@media only screen and (max-width: 767px) {
  #trailer {
    display: none;
  }

  #menu-toggle {
    backdrop-filter: blur(5px);
    border-radius: 25px;
  }
}

/* body, html {
  margin: 0;
  height: 100%;
  width: 100%;
  background: black;
  color: white;
} */

:root {
  --background-light: rgb(236, 229, 220);
  --background-dark: rgb(20, 20, 20);

  --gradient-color-1: rgb(178, 94, 82);
  --gradient-color-2: rgb(56, 33, 46);
  --gradient-color-3: rgb(42, 37, 51);
  --gradient-color-4: rgb(17, 30, 41);
  --green: rgb(42, 252, 152);
  --blue: rgb(41, 121, 255);
  --purple: rgb(0, 29, 192);
  --violet: rgb(0, 48, 207);
  --pink: rgb(0, 108, 224);
}

@keyframes background-pan {
  from {
    background-position: 0% center;
  }
  
  to {
    background-position: -200% center;
  }
}

@keyframes scale {
  from, to {
    transform: scale(0);
  }
  
  50% {
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(180deg);
  }
}

@keyframes arc-rotation {
  from {
    transform: translate3d(-50%, -50%, 0px) rotate(0deg);
  }

  to {
    transform: translate3d(-50%, -50%, 0px) rotate(360deg);
  }
}

body {
  background-color: var(--background-dark);
  margin: 0px;
  overflow-x: hidden;
  padding: 0px;
  width: 100vw;
  transition: background-color 600ms;
  cursor: none;
  scroll-behavior: smooth;
}

body.menu-toggled {
  background-color: var(--background-light);
}

body.menu-toggled > #menu {
  pointer-events: all;
}

body.menu-toggled > #menu > #menu-toggle > span:first-of-type {
  transform: translate3d(0px, 8px, 0px) rotate(45deg);
}

body.menu-toggled > #menu > #menu-toggle > span:nth-of-type(2) {
  opacity: 0;
  transform: translate3d(-5px, 0px, 0px);
}

body.menu-toggled > #menu > #menu-toggle > span:nth-of-type(3) {
  transform: translate3d(0px, -8px, 0px) rotate(-45deg);
}

body.menu-toggled > #menu > #menu-toggle > #menu-toggle-label > .word {
  opacity: 0;
  transform: translate3d(-30%, 0px, 0px) skew(20deg) scaleX(1.2);
  transition: opacity 250ms cubic-bezier(0.71, 0.19, 0.87, 0.33),
    transform 250ms cubic-bezier(0.71, 0.19, 0.87, 0.33);
}

body.menu-toggled
  > #menu
  > #menu-toggle
  > #menu-toggle-label
  > .word:nth-of-type(2) {
  transition-delay: 100ms;
}

body.menu-toggled > #menu > #menu-gradient {
  height: 200vmax;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0px);
  transition: height 600ms cubic-bezier(0.58, 0.2, 0.62, 0.93),
    width 600ms cubic-bezier(0.58, 0.2, 0.62, 0.93),
    transform 600ms cubic-bezier(0.58, 0.2, 0.62, 0.93), opacity 400ms;
  width: 200vmax;
}

body.menu-toggled > #menu > #menu-gradient-blur {
  opacity: 1;
}

body.menu-toggled > #menu > #menu-arcs-wrapper {
  opacity: 1;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.16, 0.68, 0.25, 0.83),
    opacity 600ms cubic-bezier(0.87, 0.12, 0.92, 0.39);
}

body.menu-toggled > #menu > #menu-links > .link {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease-in;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(2) {
  transition-delay: 100ms;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(3) {
  transition-delay: 150ms;
}

body.menu-toggled > #menu > #menu-links > .link:nth-of-type(4) {
  transition-delay: 200ms;
}

#menu {
  height: 100vh;
  left: 0px;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0px;
  width: 100vw;
  z-index: 100;
}

#menu > #menu-toggle {
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 50px;
  justify-content: center;
  left: 30px;
  padding: 0px;
  pointer-events: all;
  position: absolute;
  top: 30px;
  width: 50px;
  z-index: 5;
}

#menu > #menu-toggle:hover > span:nth-of-type(2),
#menu > #menu-toggle:hover > span:nth-of-type(3) {
  transform: translate3d(0px, 0px, 0px);
}

#menu > #menu-toggle > span {
  background-color: var(--gradient-color-1);
  display: block;
  height: 3px;
  transition: transform 250ms;
  width: 24px;
}

#menu > #menu-toggle > span:nth-of-type(2) {
  transform: translate3d(5px, 0px, 0px);
}

#menu > #menu-toggle > span:nth-of-type(3) {
  transform: translate3d(-2px, 0px, 0px);
}

#menu > #menu-toggle > #menu-toggle-label {
  align-items: center;
  display: flex;
  height: 50px;
  gap: 5px;
  position: absolute;
  right: -20px;
  top: 0px;
  transform: translate3d(100%, 0px, 0px);
  white-space: nowrap;
}

#menu > #menu-toggle > #menu-toggle-label > .word {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: white;
  font-size: 1.5em;
  transition: opacity 250ms, transform 250ms;
}

#menu > #menu-gradient {
  background: radial-gradient(
    var(--background-light) 12%,
    var(--gradient-color-1) 13%,
    var(--gradient-color-2) 15%,
    var(--gradient-color-3) 60%,
    var(--gradient-color-4) 90%
  );
  height: 300vmax;
  left: 0px;
  opacity: 0;
  position: absolute;
  transform: translate3d(-50%, -50%, 0px) scale(4);
  transition: height 600ms cubic-bezier(0.75, 0.1, 0.89, 0.36),
    width 600ms cubic-bezier(0.75, 0.1, 0.89, 0.36),
    transform 600ms cubic-bezier(0.75, 0.1, 0.89, 0.36),
    opacity 700ms cubic-bezier(0.9, 0.02, 0.97, 0.28);
  top: 0px;
  width: 300vmax;
  z-index: 1;
}

#menu > #menu-gradient-blur {
  backdrop-filter: blur(1vmax);
  inset: 0px;
  opacity: 0;
  position: absolute;
  transition: opacity 600ms cubic-bezier(0.87, 0.12, 0.92, 0.39);
  z-index: 2;
}

#menu > #menu-arcs-wrapper {
  height: clamp(600px, 200vmax, 6000px);
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transform: scale(1.15) translate3d(20%, 20%, 0px);
  transition: transform 600ms cubic-bezier(0.87, 0.12, 0.92, 0.39),
    opacity 600ms cubic-bezier(0.87, 0.12, 0.92, 0.39);
  width: clamp(600px, 200vmax, 6000px);
  z-index: 3;
}

#menu > #menu-arcs-wrapper > #menu-arcs {
  animation: arc-rotation 100s linear infinite;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  will-change: transform;
}

#menu > #menu-arcs-wrapper > #menu-arcs > .menu-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-dasharray: 2, 10;
  stroke-width: 1;
}

#menu > #menu-links {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  inset: 0px;
  justify-content: center;
  position: absolute;
  z-index: 4;
}

#menu > #menu-links > .link {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: "Rubik", sans-serif;
  gap: 10px;
  opacity: 0;
  position: relative;
  text-decoration: none;
  transition: opacity 250ms ease-in;
  width: 200px;
}

#menu > #menu-links > .link:hover > .label {
  transform: translate3d(6%, 0px, 0px);
}

#menu > #menu-links > .link:hover > .index {
  transform: translate3d(20%, 0px, 0px);
}

#menu > #menu-links > .link:hover > .anchor:before {
  opacity: 0.15;
  transform: translate3d(-50%, -50%, 0px) scale(1.5);
}

#menu > #menu-links > .link:hover > .anchor:after {
  border-color: red;
  transform: translate3d(-50%, -50%, 0px) scale(1.1);
}

#menu > #menu-links > .link > .anchor {
  background-color: white;
  height: clamp(4px, 0.4vmax, 12px);
  left: 0px;
  position: absolute;
  top: 50%;
  transform: translate3d(-500%, -100%, 0px) rotate(45deg);
  transition: transform 250ms;
  width: clamp(4px, 0.4vmax, 12px);
}

#menu > #menu-links > .link > .anchor:before,
#menu > #menu-links > .link > .anchor:after {
  content: "";
  height: 300%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0px);
  transition: transform 250ms, border-color 250ms;
  width: 300%;
}

#menu > #menu-links > .link > .anchor:before {
  border: 1px solid red;
  opacity: 0;
}

#menu > #menu-links > .link > .anchor:after {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

#menu > #menu-links > .link > .index {
  color: rgb(255, 255, 255, 0.25);
  font-size: 0.8em;
  transition: transform 250ms;
}

#menu > #menu-links > .link > .label {
  color: white;
  font-size: 2em;
  transition: transform 250ms;
}

#content {
  align-items: center;
  display: flex;
  gap: 2em;
  height: 100vh;
  justify-content: center;
}

#content > i {
  color: rgb(30, 30, 30);
  font-size: clamp(4em, 8vmax, 8em);
}

#content > .fa-plus {
  font-size: clamp(2em, 4vmax, 4em);
}

@media (min-width: 1000px) and (max-width: 2699px) {
  body.menu-toggled > #menu > #menu-links > .link {
    transition: transform 400ms cubic-bezier(0.16, 0.68, 0.25, 0.83),
      opacity 500ms cubic-bezier(0.87, 0.12, 0.92, 0.39);
  }

  #menu > #menu-gradient {
    transform: translate3d(-50%, -50%, 0px) scale(8);
  }

  #menu > #menu-links > .link {
    position: absolute;
    transform: translate3d(300%, 800%, 0px) scale(1.25);
    transition: transform 500ms cubic-bezier(0.62, 0.16, 0.86, 0.45),
      opacity 400ms cubic-bezier(0.16, 0.68, 0.25, 0.83);
  }

  #menu > #menu-links > .link > .anchor {
    top: 0%;
    transform: translate3d(-350%, -100%, 0px) rotate(45deg);
  }

  #menu > #menu-links > .link:first-of-type {
    left: 29.8vmax;
    top: 22vmax;
  }
}

@media (min-width: 1000px) and (max-width: 2099px) {
  #menu > #menu-links > .link:nth-of-type(2) {
    left: 59.2vmax;
    top: 16vmax;
  }

  #menu > #menu-links > .link:nth-of-type(3) {
    left: 44.5vmax;
    top: 42vmax;
  }

  #menu > #menu-links > .link:nth-of-type(4) {
    left: 75.8vmax;
    top: 39vmax;
  }
}

@media (min-width: 2100px) and (max-width: 2699px) {
  #menu > #menu-links > .link:nth-of-type(2) {
    left: 59.6vmax;
    top: 14vmax;
  }

  #menu > #menu-links > .link:nth-of-type(3) {
    left: 51vmax;
    top: 34vmax;
  }

  #menu > #menu-links > .link:nth-of-type(4) {
    left: 80.5vmax;
    top: 28vmax;
  }
}

section {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.hero {
  width: 100%;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.title {
  font-size: 7vw;
}

#about {
  /* min-height: 100vh; */
  background-color: #001a46;
  color: white;
  padding: 100px;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  object-fit: contain;
}

.about > p {
  font-size: 1.5rem;
}

#scrambled {
  letter-spacing: 1px;
  font-family: monospace;
}

.noise {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
  position: fixed;
  z-index: 1;
  background-image: url("media/noise-light.png");
  transform: none;
  transition: transform 300ms;
  opacity: 0.6;
}

.sectionInner {
  z-index: 2;
}

#trailer {
  height: 5px;
  width: 5px;
  border-radius: 20px;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  background-color: rgba(165, 165, 165, 0.687);
  z-index: 999999999;
  border: none;
  box-shadow: 0px 8px 71px 0px rgba(165, 165, 165, 0.687);
  -webkit-box-shadow: 0px 0px 20px 8px rgba(165, 165, 165, 0.687);
  -moz-box-shadow: 0px 8px 71px 0px rgba(165, 165, 165, 0.687);
  transition: transform 0.001s ease-in-out, background-color 0.1s ease,
    opacity 500ms ease, height 500ms ease, width 500ms ease,
    box-shadow 500ms ease, border 500ms ease;
}

body:hover > #trailer {
  opacity: 1;
}

#js {
  color: yellow;
  font-weight: 700;
}

#html {
  color: rgb(188, 107, 0);
  font-weight: 700;
}

#css {
  color: rgb(0, 64, 214);
  font-weight: 700;
}

#cpp {
  color: rgb(82, 0, 214);
  font-weight: 700;
}

.magic {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-size: 1.2em;
}

.magic > .magic-star {
  --size: clamp(20px, 1.5vw, 30px);
  
  animation: scale 700ms ease forwards;
  display: block;
  height: var(--size);
  left: var(--star-left);
  position: absolute;
  top: var(--star-top);
  width: var(--size);
}

.magic > .magic-star > svg {
  animation: rotate 1000ms linear infinite;
  display: block;
  opacity: 0.7;
}

.magic > .magic-star > svg > path {
  fill: var(--violet);
}

.magic > .magic-text {
  animation: background-pan 3s linear infinite;
  background: linear-gradient(
    to right,
    var(--purple),
    var(--violet),
    var(--pink),
    var(--purple)
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* #contact {
  background-color: rgb(0, 26, 70);
  padding: 100px;
  color: white;
  text-align: center;
}

#contact > div.sectionInner {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 25px;
} */