@font-face {
  font-family: "HusC_Font"; /* set name */
  src: url("../assets/font/husc-default.ttf"); /* url of the font */
}

/********************************** Static elements **********************************/

header {
  font-family: "HusC_Font";
  color:#f2f2f2;
  width:100%;

  background-image: linear-gradient(#5b5b5b, #303030);

  display: block;

  padding-bottom: 10px;
}

body {
  font-family: "HusC_Font";
  font-size:14px;
  background: linear-gradient(135deg, rgba(236, 35, 99, 1) 0%,rgba(240, 75, 89, 1) 5%,rgba(242, 108, 72, 1) 10%,rgba(245, 130, 65, 1) 15%,rgba(249, 173, 79, 1) 20%,rgba(253, 201, 83, 1) 25%,rgba(249, 230, 101, 1) 30%,rgba(229, 230, 94, 1) 35%,rgba(174, 210, 88, 1) 40%,rgba(119, 193, 96, 1) 45%,rgba(80, 186, 114, 1) 50%,rgba(62, 184, 142, 1) 55%,rgba(70, 190, 191, 1) 60%,rgba(78, 167, 199, 1) 65%,rgba(68, 150, 190, 1) 70%,rgba(65, 139, 186, 1) 75%,rgba(64, 113, 178, 1) 80%,rgba(112, 96, 159, 1) 85%,rgba(148, 56, 121, 1) 90%,rgba(174, 50, 111, 1) 95%,rgba(214, 49, 105, 1) 100%) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100vh;

  image-rendering: pixelated;

  display: flex;
  align-items: flex-start;
  flex-direction:column;
  justify-content: center;

  margin:0;
}

select {
	font-family: "HusC_Font";
	font-size:14px;
}

/********************************** Static elements **********************************/

.topheader-div {
	display: flex;
	justify-content: center;
}

.topheader-logo {
	display: block;
	margin:auto;
	max-height:180px;
	image-rendering:auto;
}
.topheader-pokedex{
	font-size:86px;
	margin-top:2rem;
	text-decoration:underline;
	text-decoration-thickness: 25%;
	text-decoration-style:dotted;
}

.header {
  background: #303030;

  color:#f2f2f2;

  image-rendering: pixelated;

  margin: 0 auto;
  width: 65vw;
  height:40px;

  border:8px solid #303030;
  border-top-style: none;
  border-bottom-style: none;

  padding: 0px 20px;

  display: grid;
  flex-direction: row;
  grid-template-columns:repeat(3, 1fr);
  justify-content: center;
  text-align: center;
  gap:300px
}


.body {
  background: rgba(250, 250, 250, 1);

  image-rendering: pixelated;

  padding: 10px 20px;

  border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -khtml-border-bottom-right-radius: 8px;
  -icab-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -khtml-border-bottom-left-radius: 8px;
  -icab-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;

  margin: 0 auto;
  width: 65vw;
  margin-bottom: 40px;

  border:8px solid #303030;
  border-top-style: none;
}

.centered-img {
  display: block;
  margin:auto;
}

.p_link a {
  color: #3341dd;
  }
.p_link a:hover {
  color: #33c1ff;
  }
.f_link a {
  color: #1aa600;
  }
.f_link a:hover {
  color: #22f3a6;
  }

.w_link a {
  color: #dddddd;
  text-decoration: none;
  }
.w_link a:hover {
  color: #ffffff;
  }

/********************************** Gallery layout **********************************/
#container{
  margin:0 auto;
  padding:1em;
}

#gallery{
  display:grid;
  width:100%;
  gap:14px;
  grid-template-columns:repeat(6, 1fr);
}
#gallery button{
    min-width: 100px;
    min-height: 100px;
    display:grid;
  align-items:flex-start;
  justify-content:center;
}
.button {
    font-family: "Open Sans", sans-serif;
    padding: 1px 6px;
    border: 1px solid #8f8f9d;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
    min-width: 100px;
    min-height: 100px;
    display:grid;
  align-items:flex-start;
  justify-content:center;
}
/*#gallery button{
  color:var(--text-color);
  opacity:1;
  transition:0.5s all;
  display:grid;
  gap:10px;
  align-items:flex-start;
  text-decoration: none;
  font-family: "HusC_Font", "Open Sans", sans-serif;
  background: transparent;
  border: none !important;
}*/
.item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering: pixelated;
}
.item-image{
  line-height:0;
  aspect-ratio:1/1;
  width:96px;
  height:96px;
}
.item-title{
  width:96px;
  text-align:center;
  font-size:1rem;
}
.button a {
    text-decoration: none;
}
/********************************** Gallery layout **********************************/

/********************************** Individual pages **********************************/
.montitle {
	display: flex;
	justify-content: center;
}

.firstrow {
	display:grid;
	width:100%;
	gap:10px;
	grid-template-columns:repeat(3, 1fr);
}
.rightmost_col {
	padding-left:10px;
}

.bigsprite {
	width:288px;
}

.pokedex-data-category {
	border-right: 2px solid #ccc;
	padding-right:50px;
	color:#808080;
}

.pokedex-data-value {
	padding-left:10px;
}

.hidden-ability {
	color:#1aa600;
}

.notlast {
	border-bottom: 1px solid #ccc;
}

.typeIcon {
	height:33px;
	padding-right:10px;
}


/* stat table */
.stattable {
	background: #9FA19F;
	border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	-khtml-border-top-right-radius: 10px;
	-icab-border-top-right-radius: 10px;
	-o-border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-bottom-right-radius: 10px;
	-icab-border-bottom-right-radius: 10px;
	-o-border-bottom-right-radius: 10px;
	border-collapse: separate; white-space: nowrap;
}

.stattable-header {
	background: #C1C2C1;
	border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	-khtml-border-top-right-radius: 10px;
	-icab-border-top-right-radius: 10px;
	-o-border-top-right-radius: 10px;
}

.row-hp {
	background: #9EE865;
}
.row-atk {
	background: #F5DE69;
}
.row-def {
	background: #F09A65;
}
.row-spa {
	background: #66D8F6;
}
.row-spd {
	background: #899EEA;
}
.row-spe {
	background: #E46CCA;
}

.stattable-th {
	width:150px;
	padding-left: 0.2em;
	padding-right: 0.2em;
	display: flex;
	justify-content: space-between;
}
.stattable-th-last {
	background: #C1C2C1;
}
.stattable-td-last {
	border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-bottom-right-radius: 10px;
	-icab-border-bottom-right-radius: 10px;
	-o-border-bottom-right-radius: 10px;
}
.stattable-td-width {
	width: 510px;
}

.statbar {
	height:20px;
}
.statbar-hp {
	background-color: #69DC12;
	border: 1px solid #448F0C;
}
.statbar-atk {
	background-color: #EFCC18;
	border: 1px solid #9B8510;
}
.statbar-def {
	background-color: #E86412;
	border: 1px solid #97410C;
}
.statbar-spa {
	background-color: #14C3F1;
	border: 1px solid #0D7F9D;
}
.statbar-spd {
	background-color: #4A6ADF;
	border: 1px solid #304591;
}
.statbar-spe {
	background-color: #D51DAD;
	border: 1px solid #8B1370;
}


.evochart-base {
	display:grid;
	width:100%;
}
.evochart-mon {
	display:grid;
	width:100%;
	grid-template-rows:repeat(2);
	justify-content: center;
	align-items: center;
}
.evochart-link {
	margin: auto;
	text-decoration: none;
}
.mediumsprite {
	width:192px;
}
.arrow {
	width:116px;
}
.arrow-back {
	rotate:180deg;
}
.arrow-down {
	rotate:90deg;
}
.arrow-up {
	rotate:270deg;
}
.arrow-mirror-x {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.arrow-mirror-y {
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

.loc-trivia {
	display:grid;
	width:100%;
	grid-template-columns:repeat(2,1fr);
}

/********************************** Individual pages **********************************/

/*Mobile compatibility*/
@media(orientation: portrait) {
	.topheader-logo {
		max-height:75px;
	}
	.topheader-pokedex {
		margin:auto;
		font-size:42px;
		text-decoration:none;
	}

	.header {
		width: 80vw;
		gap:0px;
	}
	.body {
		width: 80vw;
	}

	#gallery {
		grid-template-columns:repeat(2, 1fr);
	}

	/* Individual pages */
	.firstrow {
		gap:10px;
		grid-template-columns:repeat(1,1fr);
	}
	.rightmost_col {
		padding-left:0px;
	}

	.mediumsprite {
		width:96px;
	}

	.arrow {
		width:58px;
	}

	.loc-trivia {
		grid-template-columns:repeat(1,1fr);
	}
	
	.centered-img {
    display: block;
    margin:auto;
    max-width:100%;
  }
  
  .stattable-th {
	  width:110px;
  }
  
  .evochart-base {
  	font-size:7px;
  }
}