@font-face {
    font-family: HGSS;
    src: url('/fonts/HGSS.ttf') format("truetype");
}

@font-face {
    font-family: NDS;
    src: url('/fonts/NDS.ttf') format("truetype");
}

@font-face {
    font-family: Pokemon;
    src: url('/fonts/PokemonSolid.ttf') format("truetype");
}

body {
  background-color: #000;
  background-image: url('/images/bgs/Koffing.png');
  background-attachment:fixed;
  color: #fff;
  font-family:HGSS;
  font-size:10px;
  scrollbar-width: thin;
  scrollbar-color: #555 #000; 
  image-rendering: crisp-edges;
  padding:0;
}

a {
  color: #F8C8DC;
  text-decoration:underline;
  transition: color 0.7s ease;
}

a:visited {
  color: #ff9ecf;
}

a:hover {
  color: #fff;
  text-decoration: line-through;
}
a:active {
  color: #fff;
  text-decoration: none;
  font-weight:bold;
}
a img {
  padding:2px;
}
a img:hover {
  background:url('/images/bgs/glitter.gif');
}

ul {
  list-style-type: circle;
}

p:last-child {
  margin-bottom:0px;
}

h2 {
  font-size: 1.3em;
  text-transform: uppercase;
  text-align: center;
  padding:3px;
}

h3 {
  font-size: 1.2em;
  padding:3px;
}

.main {
max-width:1000px;
background:#000;
background-image: url(/images/bgs/square.png);
background-size: 200px;
border-right:3px solid #fff;
border-left:3px solid #fff;
padding-bottom:40px;
min-height:100vh;
}

::-moz-selection {
  background-color: #F8C8DC;
  color:#770737;
}
::selection {
  background-color: #F8C8DC;
  color:#770737;
}

::-webkit-scrollbar {
            width: 15px;
            height: 15px;
            }
            ::-webkit-scrollbar-thumb {
            background-color: #000;
            background-image: url(/images/bgs/scrollbgvertical.png);
            border-top: 1px solid #bdbdbd;
            border-left: 1px solid #bdbdbd;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            }
            ::-webkit-scrollbar-thumb:horizontal{
              background-image: url(/images/bgs/scrollbghorizontal.png);
            }
            ::-webkit-scrollbar-track {
            background-color: #000;
            background-image: url(https://i.imgur.com/IGXGYKz.png);
            }
            ::-webkit-scrollbar-button {
            background-color: darkgrey;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAPBAMAAABKPLFCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACGhILr6ulbWlqop6ddXV0hISHk4+MAAABubm3///8cDMtbAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgChMNNQqYsOkJAAAAfElEQVQY02MQhAABQRTAABVlEFICA0EIpYjGpZ60CUTaGcoNQpVWTodIlxmBuaqtEGl3JXUnED+sCCKtngqWNptmBJY2KwKqF1RS7YTZPSMIyFVOV08GSytnJith6lYpUiqB2B0RhM1uuMtVsbucusGCTZoRJYpgACoqCABTOTzVZ8THeQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0xOVQxNTo1MToyOCswMjowMPJE7xwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMTlUMTU6NTE6MjgrMDI6MDCDGVegAAAAAElFTkSuQmCC')
            }
            ::-webkit-scrollbar-button:vertical:start {
            background-position: -45px 0;
            }
            ::-webkit-scrollbar-button:vertical:end {
            background-position: 0 0;
            }
            ::-webkit-scrollbar-button:horizontal:start {
            background-position: -15px 0;
            }
            ::-webkit-scrollbar-button:horizontal:end {
            background-position: -30px 0;
            }

.tree-diagram ul {
                        display: flex;
                        position: relative;

                        /* Reset */
                        list-style-type: none;
                        margin: 0;
                        padding: 1rem 0.5rem 0rem 0.5rem;
                    }

                    .tree-diagram ul ul::before {
                        border-right: 1px solid #fff;
                        content: '';

                        /* Position */
                        position: absolute;
                        top: 0;
                        right: 50%;

                        /* Size */
                        height: 1rem;
                        width: 50%;
                    }

                    .tree-diagram li {
                        padding: 1rem 0.5rem 0rem 0.5rem;
                        position: relative;

                        /* Center the content */
                        align-items: center;
                        display: flex;
                        flex-direction: column;
                    }

                    .tree-diagram li::before {
                        border-right: 1px solid #fff;
                        border-top: 1px solid #fff;
                        content: '';

                        /* Position */
                        position: absolute;
                        top: 0;
                        right: 50%;

                        /* Size */
                        height: 1rem;
                        width: 50%;
                    }

                    .tree-diagram li::after {
                        border-top: 1px solid #fff;
                        content: '';

                        /* Position */
                        position: absolute;
                        top: 0;
                        right: 0;

                        /* Size */
                        width: 50%;
                    }

                    .tree-diagram li:first-child::before,
                    .tree-diagram li:last-child::after {
                        /* Remove the top of border from the first and last items */
                        border-top: none;
                    }

                    /* Add a root item if you want */
                    li.tree-diagram__root::before {
                        border-right: none;
                    }

@keyframes blinkingText{
    0%{     color: inherit;    }
    49%{    color: inherit; }
    50%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: inherit;    }
}

@keyframes colorshift {
    0%{     filter:hue-rotate(0deg);    }
    100%{   filter:hue-rotate(360deg);    }
}

.blink{
    animation:blinkingText 1.0s infinite;
}

.hover01 img {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	transition: 1s ease;
}
.hover01 img:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}

.hover02 img {
	filter:brightness(100%);
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -o-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.hover02 img:hover {
  filter:brightness(130%);
  background:none;
}

.hover03 img {
	filter:grayscale(1);
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-o-transition: 1s ease;
	transition: 1s ease;
}
.hover03 img:hover {
	filter:none;
}

.teardrop {
  -MOZ-BORDER-RADIUS: 100%;
   -WEBKIT-BORDER-RADIUS: 100%;
   BORDER-RADIUS: 100%;
}

.teardrop:hover {
  -MOZ-BORDER-RADIUS-TOPLEFT: 0;
   -WEBKIT-BORDER-TOP-LEFT-RADIUS: 0;
   BORDER-TOP-LEFT-RADIUS: 0;
   -MOZ-BORDER-RADIUS-TOPRIGHT: 50%;
   -WEBKIT-BORDER-TOP-RIGHT-RADIUS: 50%;
   BORDER-TOP-RIGHT-RADIUS: 50%;
   -MOZ-BORDER-RADIUS-BOTTOMRIGHT: 50%;
   -WEBKIT-BORDER-BOTTOM-RIGHT-RADIUS: 50%;
   BORDER-BOTTOM-RIGHT-RADIUS: 50%;
   -MOZ-BORDER-RADIUS-BOTTOMLEFT: 50%;
   -WEBKIT-BORDER-BOTTOM-LEFT-RADIUS: 50%;
   BORDER-BOTTOM-LEFT-RADIUS: 50%;
}

.hueshift img:hover {
	animation:colorshift linear 4s infinite;
}

.display-4 {
  font-size:6em;
  font-family:Pokemon;
  color:#ffcb05;
  -webkit-text-stroke: 2px #3c5aa6;
  
}

.bottombar {
  position:fixed;
  left:0;
  bottom:0;
  margin:0;
  padding-top:10px;
  padding-bottom:10px;
  background-color:#000;
  font-size: 18px;
  text-align:center;
  width:100%;
  z-index:20;
}

.bottombar p {
  color:#fff;
  font-family: Yoster;
  font-size:18px;
}

.bottombar a {
  color:#fff;
  font-family: Yoster;
  font-size:15px;
}

@supports(clip-path: polygon(calc( 0% 0%, 100% - ( var(--1) * 100% / var(--scale) ) ) 100%, 100% 100%)) {
  .chaarts[class*="radar"] {
    --radius: 150px;
    --unitless-radius: calc( 1024 / 16 / 5 );
    --size: calc( var(--radius) / var(--scale) );
    --size2: calc( var(--radius) / calc(var(--scale)/17) );
    --part: calc( 360deg / var(--items) );
    --integer: calc(var(--scale));
    background-image:
      repeating-radial-gradient(
        circle at 50%,
        rgba(255, 255, 255, .2) 0 2px,
        transparent 2px calc(var(--size) * var(--step))
      ),
      repeating-radial-gradient(
        circle at 50%,
        rgba(255, 255, 255, .1) 0 2px,
        transparent 2px var(--size2)
      );
    border: 2px solid;
    border-radius: 50%;
    contain: layout;
    counter-reset: scale var(--integer);
    height: calc( var(--radius) * 2 );
    margin: 6rem auto 12rem;
    overflow: visible;
    position: relative;
    width: calc( var(--radius) * 2 );
  }

  .chaarts[class*="radar"] caption {
    background: none;
    bottom: -10rem;
    position: absolute;
  }

  .chaarts[class*="radar"] [scope="col"] {
    --away: calc( (var(--radius) * -1) - 50% );
    left: 50%;
    margin: 0;
    padding: 0 1rem;
    position: absolute;
    top: 50%;
    transform:
      translate3d(-50%, -50%, 0)
      rotate( calc(var(--part) * var(--index, 1)) )
      translate( var(--away) )
      rotate( calc(var(--part) * var(--index, 1) * -1) );
  }

  .chaarts[class*="radar"] tr > *:nth-of-type(2) {
    --index: 2;
  }
  
  .chaarts[class*="radar"] tr > *:nth-of-type(3) {
    --index: 3;
  }
  
  .chaarts[class*="radar"] tr > *:nth-of-type(4) {
    --index: 4;
  }
  
  .chaarts[class*="radar"] tr > *:nth-of-type(5) {
    --index: 5;
  }
  
  .chaarts[class*="radar"] tr > *:nth-of-type(6) {
    --index: 6;
  }
  
  .chaarts[class*="radar"] tr > *:nth-of-type(7) {
    --index: 1;
  }

  .chaarts[class*="radar"] td {
    --skew: calc( 90deg - var(--part) );
    border-bottom: 1px solid var(--color2);
    height: 50%;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    transform:
      rotate( calc(var(--part) * var(--index, 1)) )
      skew( var(--skew) );
    transform-origin: 100% 100%;
    width: 50%;
  }

  .chaarts[class*="radar"] span {
    --opposite: calc( 180 - (90 + (90 - (360 / var(--items)))) );
    --angle: calc( var(--opposite) * 0.01745329251 );
    --sin-term-angle-1: var(--angle);
    --sin-term-angle-2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
    --sin-term-angle-3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
    --sin-term-angle-4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
    --sin-term-angle-5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
    --sin-angle: calc(var(--sin-term-angle-1) - var(--sin-term-angle-2) + var(--sin-term-angle-3) - var(--sin-term-angle-4) + var(--sin-term-angle-5));
    --hypo: calc( var(--unitless-radius) / var(--sin-angle) );
    --ratio: calc( var(--hypo) / var(--unitless-radius) );
    background: linear-gradient(
      to top left,
      var(--color2) 10%,
      var(--color1) 75%
    );
    filter: drop-shadow( 0 0 1rem var(--color1) );
    height: 100%;
    position: absolute;
    width: 100%;
  }

  .chaarts[class*="radar"] td:nth-of-type(1) span {
    --pos: calc( 100% - (var(--2) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--1) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }

  .chaarts[class*="radar"] td:nth-of-type(2) span {
    --pos: calc( 100% - (var(--3) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--2) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }
  
  .chaarts[class*="radar"] td:nth-of-type(3) span {
    --pos: calc( 100% - (var(--4) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--3) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }
  
  .chaarts[class*="radar"] td:nth-of-type(4) span {
    --pos: calc( 100% - (var(--5) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--4) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }
  
  .chaarts[class*="radar"] td:nth-of-type(5) span {
    --pos: calc( 100% - (var(--6) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--5) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }
  
  .chaarts[class*="radar"] td:nth-of-type(6) span {
    --pos: calc( 100% - (var(--7) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--6) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }
  
  .chaarts[class*="radar"] td:nth-of-type(7) span {
    --pos: calc( 100% - (var(--2) * 100% / (var(--scale) * var(--ratio) ) ) );
    --polygon: polygon(
      100% var(--pos),
      calc( 100% - ( var(--1) * 100% / var(--scale) ) ) 100%,
      100% 100%
    );
    clip-path: var(--polygon);
  }
  
  .chaarts[class*="radar"] td::after,
  .chaarts[class*="radar"] td::before {
    display: none;
  }

  .chaarts.radar [scope="col"]::after {
    color: var(--color2);
    display: block;
    font-size: 7px;
    font-weight: 400;
  }

  .chaarts.radar [scope="col"]:nth-child(1)::after {
    --integer: calc(var(--1));
    counter-reset: value var(--integer);
    content: counter(value) "\A0/\A0" counter(scale);
  }
  
  .chaarts.radar [scope="col"]:nth-child(2)::after {
    --integer: calc(var(--2));
    counter-reset: value var(--integer);
    content: counter(value) "\A0/\A0" counter(scale);
  }
  
  .chaarts.radar [scope="col"]:nth-child(3)::after {
    --integer: calc(var(--3));
    counter-reset: value var(--integer);
    content: counter(value) "\A0/\A0" counter(scale);
  }
  
  .chaarts.radar [scope="col"]:nth-child(4)::after {
    --integer: calc(var(--4));
    counter-reset: value var(--integer);
    content: counter(value) "\A0/\A0" counter(scale);
  }
  
  .chaarts.radar [scope="col"]:nth-child(5)::after {
    --integer: calc(var(--5));
    counter-reset: value var(--integer);
    content: counter(value) "\A0/\A0" counter(scale);
  }
  
  .chaarts.radar [scope="col"]:nth-child(6)::after {
    --integer: calc(var(--6));
    counter-reset: value var(--integer);
    content: counter(value) "\A0/\A0" counter(scale);
  }
}

.pokeindex {
  font-family: HGSS;
  font-size:12px;
  width:99%;
  margin-right:0.5%;
  margin-left:0.5%;
  height:90px;
  position: relative;
  border:5px double #fff;
  text-align:center;
}

@media (min-width: 768px) {
  .pokeindex {
  width:49%;
}
}

.pokeindex a {
  font-family:HGSS;
  color:#fff;
}
      
.pokeicon {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(/images/pages/pokemon/pokeball.webp);
  background-position: center center;
  background-size: 50%;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
}

.poketype {
  position: absolute;
  right: 16px;
  width: 48px;
  height: 80px;
  display:flex;
  align-items:center;
  line-height:0;
}

.electric {
  border-color:#C49F00;
}

.electric:hover {
  background-color:#F8D030;
  color:#000
}

.fire {
  border-color:#BD4F00;
}

.fire:hover {
  background-color:#F08030;
  color:#000
}

.grass {
  border-color:#3C9410;
}

.grass:hover {
  background-color:#78C850;
  color:#000
}

.normal {
  border-color:#75753C;
}

.normal:hover {
  background-color:#A8A878;
  color:#000
}

.poison {
  border-color:#6E006E;
}

.poison:hover {
  background-color:#A040A0;
  color:#000
}

.water {
  border-color:#2753BD;
}

.water:hover {
  background-color:#6890F0;
  color:#000
}

.grass-poison {
  border-color:#3C9410 #6E006E #6E006E #3C9410;
}