@font-face {
  font-family: "Nerd Font";
  src: url("../fonts/SymbolsNerdFontMono-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Jet Brains Mono";
  src: url("../fonts/JetBrainsMono/JetBrainsMono-Regular.ttf")
    format("truetype");
}

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

@font-face {
  font-family: "Ubuntu Mono";
  src: url("../fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Anonymous Pro Bold";
  src: url("../fonts/Anonymous_Pro/AnonymousPro-Bold.ttf") format("truetype");
}

:root {
  --menuItemWidth: 9ch;
  --backgroundColour: #222831;
  --backgroundColour-low: #191d24;
  --secondaryColour: #374045;
  --secondaryColour-high: #49545a;
  --highlightColour1: #3e91a8;
  --highlightColour2: #30475e;
  --highlightColour2-med: #305d6d;
  --highlightColour2-low: #2d505e;
  --red-highlight: #f05454;
  --light: #dddddd;
  --light-low: #c2c2c2;
}

::selection {
  background: var(--highlightColour1);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: transparent;
  cursor: none;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--backgroundColour);
  position: relative;
}

.cursor-container {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: difference;
}

#cursor {
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: transparent;
  pointer-events: none;
  width: 3rem;
  height: auto;
  transition:
    opacity ease-in-out 0.3s,
    width ease-in-out 0.1s;
  mix-blend-mode: difference;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 70vw;
  min-height: 12vh;
  font-size: 5rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  z-index: 5;
}

.nav-toggle span {
  display: block;
  width: 5rem;
  height: 0.75rem;
  border-radius: 1rem;
  margin: 0.5rem 0;
  background-color: var(--highlightColour1);
  transition:
    transform ease-in-out 0.3s,
    opacity ease-in-out 0.2s;
}

.nav-toggle span:nth-child(3) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.nav-toggle.active body {
  overflow: hidden;
}

.nav-toggle.active + .nav-list {
  pointer-events: all !important;
}

.nav-toggle.active span:nth-child(1) {
  opacity: 0;
  transform: translateY(1.75rem);
}

.nav-toggle.active span:nth-child(4) {
  opacity: 0;
  transform: translateY(-1.75rem);
}

.nav-toggle.active span:nth-child(2) {
  transform: rotateZ(45deg);
}

.nav-toggle.active span:nth-child(3) {
  opacity: 1;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* position: absolute; */
  /* top: 0; */
  width: 70vw;
  /* height: 12vh; */
  font-size: 5rem;
}

.nav-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--backgroundColour);
  background-color: var(--secondaryColour);
  font-family: "Ubuntu Mono";
  font-weight: bold;
  letter-spacing: 0.3rem;
  box-sizing: initial;
  padding: 1rem 2rem;
  min-width: var(--menuItemWidth);
  border-radius: 1.5rem;
  animation: nav-slide 0.7s;
  transition: color 0.3s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.nav-list a:hover {
  color: var(--highlightColour2-low);
}

.nav-list a:focus {
  color: var(--highlightColour2-med);
}

#selected {
  color: var(--highlightColour1);
  animation: nav-slide 0.65s;
}

#fading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--backgroundColour);
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  z-index: 3;
}

#circle-screen {
  position: absolute;
  width: 10rem;
  height: 10rem;
  background-color: var(--backgroundColour);
  border-radius: 50%;
  transition: transform 0.7s ease-in-out;
  transform: scale(0);
  z-index: 4;
}

/* Keyframes */
@keyframes nav-slide {
  from {
    transform: translateY(-350%);
  }
  to {
    transform: translateY(0);
  }
}

/* Media Queries */
@media only screen and (max-width: 1680px) {
  .nav-list {
    font-size: 4rem;
  }
}

@media only screen and (max-width: 1380px) {
  .navbar {
    width: 90vw;
  }

  .nav-list {
    width: 90vw;
  }
}

@media only screen and (max-width: 1120px) {
  .nav-list {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: auto;
    padding: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
  }

  .nav-list a {
    margin: 2rem 0;
    transition:
      transform 0.4s ease-in-out,
      opacity 0.5s ease-in-out;
    transform: translate(0, 0);
    opacity: 0;
  }

  .nav-list a:nth-child(odd) {
    transform: translateX(-100vw);
  }

  .nav-list a:nth-child(even) {
    transform: translateX(100vw);
  }

  html:has(.nav-toggle.active) {
    overflow: hidden;
  }

  .nav-toggle.active + .nav-list a {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (pointer: coarse) {
  #cursor {
    display: none;
    opacity: 0;
  }
}