@font-face {
  font-family: Where My Keys;
  src: url(/assets/fonts/Where\ My\ Keys.otf);
}

@font-face {
  font-family: Hallory;
  src: url(/assets/fonts/hallory-3d-font/HalloryExtruderightDemo-pgOry.otf);
}

@font-face {
  font-family: Ananda Black;
  src: url(/assets/fonts/ananda-black/AnandaBlackPersonalUseRegular-rg9Rx.ttf);
}

:root {
  --max-width: 1280px;
  --num-nav-elements: 3;
  --border-width: 2px;
  --border-color: black;

  --moving-text-anim-x: -8px;
  --moving-text-anim-y: -8px;

  --text-color: black;
  --bg-color: none; /*linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); */
}

* {
  box-sizing: border-box;
}

/* CRT FILTER */
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 3;
  background-size:
    100% 2px,
    3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}

body {
  min-height: 100vh !important;
  margin: 0;
  padding: 2rem;

  font-family: sans-serif;
}

#frame {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/assets/frame.png");
  background-repeat: none;
  opacity: 0.5; /* Black background with opacity */
  z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/assets/overlay.png");
  background-repeat: none;
  background-size: contain;
  opacity: 1; /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

main {
  display: flex;
  flex-direction: column;

  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;

  max-width: var(--max-width);
}

.flex-container-column {
  display: flex;
  flex-direction: column;
}
.flex-container-row {
  display: flex;
  flex-direction: row;
}
.flex-between {
  justify-content: space-between;
}
.gap {
  gap: auto;
}

.text-centered {
  text-align: center;
}