@font-face {
  font-family: IBM_VGA;
  src: url(../assets/IBM_VGA.woff);
}
@keyframes backgroundScroll {
  0% {
    background-position: 0px 0px;
    filter: opacity(100%);
  }
  50% {
    background-position: 0px -234px;
    filter: opacity(50%);
  }
  100% {
    background-position: 0px -468px;
    filter: opacity(100%);
  }
}
@keyframes hue {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes hue2 {
  from {
    filter: hue-rotate(0deg) saturate(6);
    transform: rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg) saturate(6);
    transform: rotate(360deg);
  }
}
@keyframes saturbate {
  0% {
    filter: saturate(2);
  }
  50% {
    filter: saturate(4);
  }
  100% {
    filter: saturate(2);
  }
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  margin: 0;
}

html {
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
  color: #fff;
  background-color: #000;
  font-size: 18px;
}

body {
  background: none;
  background-image: linear-gradient(45deg, rgba(0, 78, 129, 0.5568627451) 1px, transparent 0);
  background-size: 0.5rem 0.5rem;
  overflow-y: scroll;
}

a {
  text-decoration: none;
}
a:link, a:visited, a:active {
  color: #aaa;
}

button {
  font-family: inherit;
  font-size: 1em;
}

blockquote {
  margin: 0;
  padding: 1em;
}

.rainbow {
  animation: hue2 4s infinite linear;
}

.rainbowtit {
  width: 126px;
  margin: auto;
}

#nav {
  background: rgba(0, 48, 63, 0.9098039216);
  display: grid;
  position: sticky;
  top: 0;
  grid-template-rows: 75px auto;
  grid-template-columns: 165px auto;
  z-index: 1;
  /* Style span tag */
}
#nav #navhome {
  display: flex;
}
#nav .link_wrapper_active {
  grid-row: 2;
  display: flex;
  flex-direction: column;
}
#nav .link_wrapper_active a {
  border: none;
}
#nav .hamb {
  display: none;
}
#nav .hamb-line {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  width: 23px;
  margin: auto;
  top: 48%;
}
#nav .hamb-line::before,
#nav .hamb-line::after {
  background: #fff;
  content: "";
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}
#nav .hamb-line::before {
  top: 7px;
}
#nav .hamb-line::after {
  top: -7px;
}
#nav .link__wrapper {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#nav .link__wrapper .navlink {
  width: auto;
  padding: 16px 10px;
  text-decoration: none;
}
#nav .link__wrapper .navlink:hover, #nav .link__wrapper .navlink:focus {
  background: rgba(0, 69, 90, 0.2823529412);
}
#nav .link__wrapper a {
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 20px 0px;
}

.page-wrapper {
  background: #00141a;
  min-height: calc(100vh - 185px);
  max-width: 1000px;
  margin: auto;
  display: grid;
  gap: 1em;
  grid-template-areas: "sidebar main";
  grid-template-columns: minmax(175px, 0.5fr) minmax(0, 4fr);
}
.page-wrapper main a:hover {
  color: #1dddff;
  animation: hue 2s infinite linear;
}
.page-wrapper main h1 {
  font-size: 1.7em;
}
.page-wrapper main p {
  font-size: 0.9em;
}

.sidebar {
  border-right: 1px solid rgba(0, 48, 63, 0.9098039216);
}
.sidebar .sideimg {
  width: 20px;
}
.sidebar ul {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
.sidebar li {
  padding: 5px 0;
  padding-left: 10px;
}
.sidebar li:hover {
  text-decoration: underline;
  text-decoration-color: #aaa;
}

#sidebar-burger .line {
  display: none;
}

.tb {
  width: 295px;
  border-collapse: collapse;
}
.tb .play {
  width: 48%;
}
.tb .rank {
  width: 9%;
}
.tb .move {
  width: 15%;
}
.tb .char {
  width: 28%;
}
.tb thead {
  width: 100%;
  height: 29px;
  border: none;
}
.tb tr {
  background-color: #003849;
}
.tb td {
  background-color: #000b0f;
}
.tb td:nth-child(4n-3) {
  font-weight: 700;
  background-color: #00141a;
  text-shadow: #000 -1px 1px;
  border-left: none;
}
.tb th, .tb td {
  border: 1px dotted;
  border-right: none;
  border-bottom: none;
  border-color: #003849;
  font-size: 0.85em;
  padding: 0;
  padding-left: 4px;
}
.tb th {
  border: none;
}
.tb .ch {
  height: 29px;
}
.tb .ch .chars {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background-image: url("/assets/img/chars.png");
}
.tb .hm td {
  background-color: #00141a;
}
.tb .hm td:nth-child(4n-3) {
  font-weight: 700;
  background-color: #000b0f;
  text-shadow: #000000 -1px 1px;
  border-left: none;
}
.tb .hm td:first-of-type {
  font-size: 0.63em;
}

.tbwrapper {
  max-height: 800px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
}
.tbwrapper .iss {
  width: 256px;
}
.tbwrapper .imgsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 295px;
}
.tbwrapper .imgsection > * {
  box-shadow: -4px 4px rgba(0, 9, 12, 0.5411764706);
}
.tbwrapper .imgsection .imgwrapper {
  background: #000b0f;
  border: 1px solid #003849;
}
.tbwrapper .imgsection .imgwrapper .overlay {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}
.tbwrapper .imgsection .imgwrapper .overlay .afterwrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.3s ease;
}
.tbwrapper .imgsection .imgwrapper .overlay .afterwrap:hover {
  background: rgba(0, 0, 0, 0.6705882353);
  opacity: 1;
}
.tbwrapper .imgsection .imgwrapper .overlay .afterwrap:hover + .afterimg {
  display: block;
  opacity: 1;
}
.tbwrapper .imgsection .imgwrapper .overlay .afterimg {
  position: absolute;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: 0.2s ease;
}
.tbwrapper .imgsection .imgwrapper #rankimg {
  display: block;
  width: 100%;
}
.tbwrapper .imgsection .imgwrapper p {
  margin: 0;
  padding: 4px;
}
.tbwrapper .imgsection .imgwrapper .titlep {
  background: #003849;
}

.prup,
.prdown,
.prline,
.prstar,
.prreturn {
  display: inline-block;
  width: 13px;
  height: 11px;
  background-image: url("/assets/img/sprites.png");
}

.prup {
  background-position: 0 0;
}

.prdown {
  background-position: -13px 0;
}

.prline {
  background-position: 13px 0;
}

.prstar {
  background-position: -13px -11px;
}

.prreturn {
  background-position: 0 -11px;
}

.page-footer {
  display: flex;
  height: 110px;
  background: rgba(0, 48, 63, 0.9098039216);
  flex-shrink: 0;
  font-size: 18px;
}
.page-footer p {
  margin: 0;
}
.page-footer .footer {
  margin: auto;
  width: 100%;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.page-footer .footer #ghub {
  height: 1.6em;
}
.page-footer .footer .contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: IBM_VGA;
  font-size: 16px;
  padding: 14px;
  background: #002431;
}

.indeximg {
  max-width: 100%;
  height: auto;
}

.rankingbtn {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 0.5em;
  margin: 8px;
}
.rankingbtn .btn {
  color: #fff;
  background: #002431;
  height: 3em;
  width: 4.5em;
  border: none;
  cursor: pointer;
  box-shadow: -4px 4px rgba(0, 9, 12, 0.5411764706);
  text-shadow: #000 -1px 1px;
}
.rankingbtn .btn:hover {
  background: #004357;
}

.btn.current {
  font-weight: 700;
  background-color: #004357;
}
.btn.current:hover {
  background: #004357;
}

.box {
  padding: 6px;
  background: #002431;
  box-shadow: -4px 4px rgba(0, 9, 12, 0.5411764706);
}
.box:hover {
  box-shadow: none;
  transform: translate(-4px, 4px);
}

@media (max-width: 750px) {
  html {
    font-size: 15px;
  }
  body {
    background-size: 0.6rem 0.6rem;
  }
  .page-wrapper {
    grid-template-areas: "sidebar main";
    grid-template-columns: 2.5% 95% 2.5%;
    grid-template-rows: 35px auto;
    gap: 0;
  }
  .page-wrapper main {
    grid-row: 2;
    grid-column: 2;
  }
  #nav {
    grid-template-columns: 165px auto 70px;
  }
  #nav .hamb {
    display: block;
    width: 100%;
    height: 100%;
    grid-row: 1;
    grid-column: 3;
    border: none;
  }
  #nav .link__wrapper {
    grid-row: 1;
    grid-column: 1/4;
    display: none;
    flex-direction: row;
    align-items: center;
  }
  #nav .link__wrapper .navlink {
    width: 100%;
    padding: 16px 10px;
  }
  #nav .link_wrapper_active {
    grid-row: 2;
    display: flex;
    flex-direction: column;
  }
  #nav .link_wrapper_active a {
    border: none;
  }
  .sidebar {
    grid-column: 1/4;
    background: rgba(0, 48, 63, 0.3490196078);
  }
  .sidebar > ul {
    display: flex;
    height: 100%;
    justify-content: center;
  }
  .sidebar > ul li {
    height: 100%;
    display: flex;
    align-items: center;
    white-space: pre;
  }
  .sidebar #sidebar-burger {
    display: none;
  }
  .sidebar-active {
    grid-template-areas: "sidebar main";
    grid-template-columns: minmax(200px, 0.5fr) minmax(0, 4fr);
  }
  .sidebar-active .sidebar > ul {
    display: block;
  }
  .btn {
    font-size: 1.1em;
  }
  #f {
    display: none;
  }
  .tb thead {
    height: 24px;
  }
}

/*# sourceMappingURL=style.css.map */