@font-face {
  font-family: "K2D Light Regular";
  font-style: normal;
  font-weight: normal;
  src: local("K2D Light Regular"), url("/fonts/K2D-Light.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: normal;
  src: local("SpaceMono"),
    url("/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: normal;
  src: local("JetBrainsMono"),
    url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "VCR";
  font-style: normal;
  font-weight: normal;
  src: local("VCR"), url("/fonts/VCR.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Disket Mono";
  font-style: normal;
  font-weight: normal;
  src: local("DisketMono"),
    url("/fonts/Disket-Mono-Bold.ttf") format("truetype");
  font-display: swap;
}

html {
  overflow-y: scroll;
}

* {
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

body {
  background-color: var(--color-b);
  color: var(--color-w);
  height: 100vh;
}

header {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: var(--color-b);
  border-bottom: 1px solid var(--color-w);
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
#header-icon {
  transform: translate(-50%, 0);
  position: absolute;
  left: 50%;
  top: 15%;
}
.header-prop {
  margin-top: 80px;
}
footer p {
  margin-top: 20px;
}

h1 {
  font-family: "K2D Light Regular";
  font-size: 50px;
  color: var(--color-y);
  text-shadow: none;
  transition: text-shadow 0.5s ease-out, color 0.2s ease-out;
  cursor: default;
}
h2,
h5 {
  font-family: "K2D Light Regular";
  cursor: default;
}
h4 {
  font-family: "JetBrains Mono";
  cursor: default;
}
p {
  font-family: "JetBrains Mono";
  transition: text-shadow 0.5s ease-out;
  text-shadow: none;
}
li {
  font-family: "JetBrains Mono";
}
.fun-p:hover {
  transition: text-shadow 3.5s ease-out;
  text-shadow: 4px 2px var(--color-r);
}
a {
  color: var(--color-y);
  transition: color 0.25s ease-out;
  text-decoration: underline;
  text-shadow: none;
}
a:hover {
  color: var(--color-o);
}
img {
  margin-top: 10px;
  margin-bottom: 10px;
}
button {
  background-color: transparent;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 11px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: var(--color-b);
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-w);
  border-radius: 15px;
  border: 3px solid var(--color-b);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-y);
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
/* END scroll bar */

.container-fluid,
.container {
  padding: 10px;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .container-fluid,
  .container {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* header navbar */
.navbar-toggler,
.navbar-toggler:focus {
  padding: 5;
  padding-left: 0;
  border: 0;
  transition: none;
  box-shadow: none;
  cursor: pointer !important;
}
.navbar-toggler path {
  fill: var(--color-w);
  transition: fill 0.2s;
}
.navbar-toggler:hover path {
  fill: var(--color-y);
  transition: fill 0.2s;
}
.navbar.bg-dark {
  background-color: #0d0d0f00 !important;
}
/* socials */
.social-bar ul {
  width: fit-content;
  height: 64px;
}
.social-svg {
  fill: var(--color-w);
  transition: fill 0.2s;
  transform: translate(0, 40%);
}
.social-svg:hover {
  fill: var(--color-y);
  transition: fill 0.2s;
}
/* END header navbar */

/* offcanvas */
.offcanvas {
  background-color: var(--color-navbar-bg);
  margin-top: 80px;
  --bs-offcanvas-width: 350px;
}
#offcanvas-top-prop {
  position: absolute;
  top: -80px;
  height: 80px;
  width: 100vw;
  background-color: var(--color-b);
  border-bottom: 1px solid var(--color-w);
}
.offcanvas-body {
  padding: 0;
}
.navbar-nav {
  padding-top: 20px;
  padding-left: 40px;
}
.navbar-nav ul {
  padding-left: 0px;
}
.nav-link {
  font-family: "K2D Light Regular";
  font-weight: normal;
  font-size: 40px;
  color: var(--color-w);
  transition: color 0.15s;
  width: fit-content;
}
.nav-link:hover,
.nav-link:focus {
  color: var(--color-y);
  text-shadow: none;
}
.nav-game {
  font-weight: normal;
  color: var(--color-w);
  transition: color 0.15s;
  text-decoration: none;
}
.nav-game:hover,
.nav-game:focus {
  color: var(--color-y);
  text-shadow: none;
}
#games-nav {
  list-style: none;
  font-family: "JetBrains Mono";
}
#games-nav li {
  margin-bottom: 5px;
}
.current-page {
  color: var(--color-r);
}
/* END offcanvas */

.list-group.list-group-horizontal li {
  margin: 8px;
  list-style: none;
}

/* ad */
.ad {
  background-color: #000;
  border: double red 5px;
  /* overflow-y: scroll; */
  /* overflow-x: hidden; */
  font-family: georgia;
  padding: 15px;
  max-height: 40vh;
  min-height: fit-content;
  margin: 20px;
  margin-top: 50px;
}
.ad-close {
  position: absolute;
  padding: 0px;
  background-color: #0c4653;
  border: double red 5px;
  color: white;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 3px;
  right: -25px;
  top: -5px;
  z-index: 99999;
}
.ad-close svg {
  transition: fill 0.1s;
}
.ad-close:hover svg {
  fill: red;
}
.ad a#ad-link {
  position: relative;
  color: white;
  font-size: larger;
  border: double 2px white;
  border-radius: 5px;
  padding: 5px;
  position: relative;
  text-align: center;
  /* top: -20px; */
}
.ad a#ad-link:hover {
  background-color: white;
  border-color: red;
  color: red;
  /* text-shadow: 2px 1px 2px blue; */
  text-shadow: 0.05em 0 0 red, -0.025em -0.05em 0 #313f97, 0.025em 0.05em 0 blue;
  color: rgba(0, 194, 203, 0.2);
}
.ad a#ad-link:before {
  content: attr(data-text);
  position: absolute;
  top: 4;
  left: 32%;
  opacity: 0.8;
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
}
.ad a#ad-link:after {
  content: attr(data-text);
  position: absolute;
  top: 4;
  left: 32%;
  opacity: 0.8;
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 20%, 100% 100%, 0 70%);
  transform: translate(0.0125em, 0.025em);
}
.ad a#ad-link:hover::before {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
}
.ad a#ad-link:hover::after {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 20%, 100% 100%, 0 70%);
  transform: translate(0.0125em, 0.025em);
}
@keyframes glitch {
  0% {
    color: rgba(236, 34, 37, 0.2);
    text-shadow: 0.05em 0 0 red, -0.025em -0.05em 0 #313f97,
      0.025em 0.05em 0 green;
  }
  14% {
    text-shadow: 0.05em 0 0 red, -0.025em -0.05em 0 #313f97,
      0.025em 0.05em 0 green;
  }
  15% {
    color: green;
    text-shadow: -0.05em -0.025em 0 red, 0.025em -0.025em 0 #313f97,
      -0.05em -0.05em 0 green;
  }
  49% {
    text-shadow: -0.05em -0.025em 0 red, 0.025em -0.025em 0 #313f97,
      -0.05em -0.05em 0 green;
  }
  50% {
    text-shadow: 0.025em 0.05em 0 red, -0.025em 0.05em 0 #313f97,
      0 -0.05em 0 green;
  }
  99% {
    color: blue;
    text-shadow: 0.025em 0.05em 0 red, -0.025em 0.05em 0 #313f97,
      0 -0.05em 0 green;
  }
  100% {
    text-shadow: -0.025em 0 0 red, -0.025em -0.025em 0 #313f97,
      -0.025em -0.05em 0 green;
  }
}

/* scroll bar */
.ad::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}
.ad::-webkit-scrollbar-track {
  background-color: #333e45;
}
.ad::-webkit-scrollbar-thumb {
  background-color: #eedadf;
  border: none;
}
.ad::-webkit-scrollbar-thumb:hover {
  background-color: #1d1d1d;
}
/* END scroll bar */
/* END ad */

/* loader */
.loader {
  position: relative;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 100px 100px -18px;
  border: none;
  border-radius: 8px;
  -webkit-animation: spin 1.4s ease-in-out infinite;
  animation: spin 1.4s ease-in-out infinite;
  box-shadow: 0px 0px 0px var(--color-r-sm) inset;
}
.loader-text {
  position: relative;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.loader .loader-sub {
  position: relative;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: 6px 0 0 6px;
  border: none;
  border-radius: 100%;
  background-color: var(--color-y-sm);
  box-shadow: 0px 0px 5px var(--color-y-sm);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
    box-shadow: 0px 0px 0px var(--color-r-sm) inset;
  }
  15% {
    box-shadow: 0px 0px 0px var(--color-r-sm) inset;
  }
  50% {
    box-shadow: 0px 0px 40px var(--color-r-sm) inset;
  }
  85% {
    box-shadow: 0px 0px 0px var(--color-r-sm) inset;
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0px 0px 0px var(--color-r-sm) inset;
  }
}

/* INDEX */
h2 a:hover {
  text-shadow: none;
}
#light-mode:hover,
#dark-mode:hover,
.index-expansion-buttons:hover {
  cursor: pointer;
  color: var(--color-o);
  fill: var(--color-y);
}
.index-expansion-buttons {
  text-decoration: underline;
  color: var(--color-y);
  transition: color 0.25s ease-out;
}
#light-mode,
#dark-mode {
  transition: fill 0.2s;
}
@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(25deg);
  }
  95% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#header-stuff {
  animation: wiggle 3s infinite ease-in-out;
}
#header-stuff:hover {
  animation: none;
}
#header-stuff:hover + #header-stuff-text {
  opacity: 1 !important;
}
#header-stuff-text {
  position: absolute;
  top: 16px;
  left: 70px;
  width: max-content;
  padding: none;
  margin: none;
  opacity: 0;
  transition: opacity 0.1s;
}

/* tooltip */
.tooltip-arrow {
  display: none !important;
}
.tooltip-inner {
  margin-bottom: 3px;
}

.transition-fade {
  opacity: 1;
  transition: 500ms;
}
html.is-animating .transition-fade {
  opacity: 0;
}

/* back to top */
.back-to-top {
  position: fixed;
  right: 50px;
  bottom: 30px;
  border: 1px solid var(--color-w);
  border-radius: 4px;
  padding: 3px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 4px;
  font-size: 16px;
  transition: background-color 0.2s;
  color: var(--color-y);
  background-color: var(--color-b);
  display: none;
  cursor: pointer;
}

.back-to-top:hover {
  background-color: var(--color-y);
  border: 1px solid var(--color-y);
}
.back-to-top-a {
  color: var(--color-y) !important;
}
.back-to-top:hover .back-to-top-a {
  color: var(--color-b) !important;
}

/* For youtube videos */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-bottom: 10px;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}