:root {
  --background-light: rgb(210, 210, 210);
  --background-dark: rgb(20, 20, 20);

  --text-light: rgb(0, 0, 0);
  --text-dark: rgb(255, 255, 255);
  
  --gradient-color-1: rgb(178, 94, 82);
  --gradient-color-2: rgb(56, 33, 46);
  --gradient-color-3: rgb(17, 92, 129);
  --gradient-color-4: rgb(84, 12, 56);

  --icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d='M549.7 124.1C543.5 100.4 524.9 81.8 501.4 75.5 458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5C51.2 81.8 32.7 100.4 26.4 124.1 15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8 42.6 11.5 213.4 11.5 213.4 11.5s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6l0-162.4 142.7 81.2-142.7 81.2z'/%3e%3c/svg%3e");
  --icon-discord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d='M492.5 69.8c-.2-.3-.4-.6-.8-.7-38.1-17.5-78.4-30-119.7-37.1-.4-.1-.8 0-1.1 .1s-.6 .4-.8 .8c-5.5 9.9-10.5 20.2-14.9 30.6-44.6-6.8-89.9-6.8-134.4 0-4.5-10.5-9.5-20.7-15.1-30.6-.2-.3-.5-.6-.8-.8s-.7-.2-1.1-.2c-41.3 7.1-81.6 19.6-119.7 37.1-.3 .1-.6 .4-.8 .7-76.2 113.8-97.1 224.9-86.9 334.5 0 .3 .1 .5 .2 .8s.3 .4 .5 .6c44.4 32.9 94 58 146.8 74.2 .4 .1 .8 .1 1.1 0s.7-.4 .9-.7c11.3-15.4 21.4-31.8 30-48.8 .1-.2 .2-.5 .2-.8s0-.5-.1-.8-.2-.5-.4-.6-.4-.3-.7-.4c-15.8-6.1-31.2-13.4-45.9-21.9-.3-.2-.5-.4-.7-.6s-.3-.6-.3-.9 0-.6 .2-.9 .3-.5 .6-.7c3.1-2.3 6.2-4.7 9.1-7.1 .3-.2 .6-.4 .9-.4s.7 0 1 .1c96.2 43.9 200.4 43.9 295.5 0 .3-.1 .7-.2 1-.2s.7 .2 .9 .4c2.9 2.4 6 4.9 9.1 7.2 .2 .2 .4 .4 .6 .7s.2 .6 .2 .9-.1 .6-.3 .9-.4 .5-.6 .6c-14.7 8.6-30 15.9-45.9 21.8-.2 .1-.5 .2-.7 .4s-.3 .4-.4 .7-.1 .5-.1 .8 .1 .5 .2 .8c8.8 17 18.8 33.3 30 48.8 .2 .3 .6 .6 .9 .7s.8 .1 1.1 0c52.9-16.2 102.6-41.3 147.1-74.2 .2-.2 .4-.4 .5-.6s.2-.5 .2-.8c12.3-126.8-20.5-236.9-86.9-334.5zm-302 267.7c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.4 59.2-52.8 59.2zm195.4 0c-29 0-52.8-26.6-52.8-59.2s23.4-59.2 52.8-59.2c29.7 0 53.3 26.8 52.8 59.2 0 32.7-23.2 59.2-52.8 59.2z'/%3E%3C/svg%3E");
  --icon-git: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d='M202.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM496 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3l48.2 0c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z'%3E%3C/path%3E%3C/svg%3E");
  --icon-linkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d='M416 32L31.9 32C14.3 32 0 46.5 0 64.3L0 447.7C0 465.5 14.3 480 31.9 480L416 480c17.6 0 32-14.5 32-32.3l0-383.4C448 46.5 433.6 32 416 32zM135.4 416l-66.4 0 0-213.8 66.5 0 0 213.8-.1 0zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77zM384.3 416l-66.4 0 0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2z'%3E%3C/path%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d='M0 256c0 104.4 62.5 194.2 152.2 234.1-5.3-13-8.2-27.2-8.2-42.1l0-61.7c-16.9-16.5-30.1-36.7-38.3-59.3-4.3-11.8 7.7-21.8 19.6-18.1 39.2 12.2 83.7 19.1 130.7 19.1s91.5-6.9 130.7-19.1c11.9-3.7 23.9 6.3 19.6 18.1-8.3 22.6-21.5 42.8-38.3 59.3l0 61.7c0 14.9-2.9 29.1-8.2 42.1 89.7-39.8 152.2-129.6 152.2-234.1 0-141.4-114.6-256-256-256S0 114.6 0 256zm176-80a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm16 240l0-45.4c0-14.7-11.9-26.6-26.6-26.6l-2 0c-11.3 0-21.1 7.9-23.6 18.9-2.8 12.6-20.8 12.6-23.6 0-2.5-11.1-12.3-18.9-23.6-18.9l-2 0c-14.7 0-26.6 11.9-26.6 26.6l0 45.4c0 35.3 28.7 64 64 64s64-28.7 64-64z'%3E%3C/path%3E%3C/svg%3E");
  --icon-email: url("data:image/svg+xml,%3csvg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' class='w-5 h-5' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3e%3c/svg%3e");
  --icon-1: var(--icon-email);
  --icon-2: var(--icon-youtube);
  --icon-3: var(--icon-discord);
  --icon-4: var(--icon-git);
  --icon-5: var(--icon-linkin);
  --icon-6: var(--icon-back);
  --button-active: -1;
  --debug: 0;
  --color-accent-off: hsl(267 16% 43%);
  --color-accent-off-darker: hsl(258 29% 39%);
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
  --inner-bg: hsl(0deg 0% 90.98%);
  --outer-bg: hsl(223.81 0% 93%);
  --border-bg: hsl(0deg 0% 85%);
  --invert: 0%;
  --color-grey: hsl(0 0% 87%);
  --color-dark-grey: hsl(0 0% 95.69%);
  --angle: -90deg;
  --rotation: 0;
  --angle-offset: 90deg;
  --is-active: 0;
  --icon-offset: 100;
  --shadow: rgba(0, 0, 0, 0.125) 0px 0px 2px -0.5px,
    rgba(0, 0, 0, 0.125) 0px 1px 5px -1px,
    rgba(0, 0, 0, 0.125) 0px 4px 12px -1.5px,
    rgba(0, 0, 0, 0.125) 0px 9px 28px -2px,
    rgba(0, 0, 0, 0.125) 0px 24px 72px -2.5px;
  --icon-opacity: 0.4;
  --item-opacity: 0;
  --cubic-bezier: cubic-bezier(0.44, -0.9, 0.31, 1.55);
}

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

.border {
  background-image: url(gooey\ border.svg);
  overflow-x: hidden;
  padding: 0%;
  margin: 0%;
  display: flex;
}

.border img{
  width: 100vw;
  height: auto;
}


body {
  background-color: var(--background-light);
  margin: 0%;
  transition: background-color 600ms;
}

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

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

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

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

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

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(.71, .19, .87, .33), 
    transform 250ms cubic-bezier(.71, .19, .87, .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(.58, .2, .62, .93), 
    width 600ms cubic-bezier(.58, .2, .62, .93), 
    transform 600ms cubic-bezier(.58, .2, .62, .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(.16, .68, .25, .83), 
    opacity 600ms cubic-bezier(.87, .12, .92, .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;
  pointer-events: all;
  position: absolute;
  top: 30px;
  width: 50px;
  z-index: 5;
  background-color: var(--background-light);
}

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



#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: 'Orbitron', cursive;
  font-size: 1.5em;
  transition: opacity 250ms, transform 250ms;
}

#menu > #menu-gradient {

  background: radial-gradient(
    var(--background-light) 12%,
    rgba(0,0,0,0) 13%,
    rgba(0,0,0,0) 15%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0) 90%
  ),url(the\ cosmos.jpg);
  
  height: 300vmax;
  left: 0px;  
  opacity: 0;
  position: absolute;
  transform: translate3d(-50%, -50%, 0px) scale(4);
  transition: height 600ms cubic-bezier(.75, .1, .89, .36),
    width 600ms cubic-bezier(.75, .1, .89, .36),
    transform 600ms cubic-bezier(.75, .1, .89, .36),
    opacity 700ms cubic-bezier(.9, .02, .97, .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(.87, .12, .92, .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(.87, .12, .92, .39), 
    opacity 600ms cubic-bezier(.87, .12, .92, .39);  
  width: clamp(600px, 200vmax, 6000px);
  z-index: 3;
}

#menu > #menu-arcs-wrapper > #menu-arcs {
  animation: arc-rotation 700s 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-text {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
  inset: 0px;
  justify-content: center;
  position: absolute;
  z-index: 4;
  font-family: "Rubik Spray Paint";
  color: white;
  transition: opacity 250ms ease-in;
}




#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: "Orbitron", 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{
  box-sizing: border-box;
  white-space: nowrap;
}

.contenter{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}


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

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

h1 {
  font-size: 500%;
  font-family: "Josefin Sans";
}
h2 {
  font-size: 150%;
  font-family: "Cause";
}
h5 {
  font-size: medium;
  font-family: "Cause";
  line-height: 0%;
}

@media (min-width: 1000px) and (max-width: 2699px) {  
  body.menu-toggled > #menu > #menu-links > .link {
    transition: transform 400ms cubic-bezier(.16, .68, .25, .83), 
      opacity 500ms cubic-bezier(.87, .12, .92, .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(.62, .16, .86, .45), 
      opacity 400ms cubic-bezier(.16, .68, .25, .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: 48.5vmax;
    top: 37vmax;
  }

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

    #menu > #menu-links > .link:nth-of-type(5) {
    left: 84.6vmax;
    top: 10vmax;
  }
}

@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;
  }
}

/* -- YouTube Link Styles -- */

body.menu-toggled > .meta-link {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.menu-toggled > .meta-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


body.menu-toggled > #menu > #menu-text {
    transition: opacity 500ms cubic-bezier(.87, .12, .92, .39);  
  }

body.menu-toggled > .meta-link > span {
  color: white;
}

#source-link {
  bottom: 10px;
}

#source-link > i {
  color: rgb(94, 106, 210);
}

#yt-link > i {
  color: rgb(239, 83, 80);
}

.meta-link {
  align-items: center;
  backdrop-filter: blur(3px);
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  bottom: 10px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;  
  display: inline-flex;
  gap: 5px;
  left: 10px;
  position: fixed;
  text-decoration: none;
  transition: background-color 600ms, border-color 600ms;
  z-index: 10000;
}

.meta-link:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.meta-link > i, .meta-link > span {
  height: 20px;
}

.meta-link > span {
  color: rgb(30, 30, 30);
  font-family: "Rubik", sans-serif;
  transition: color 600ms;
}



.galleryTransparent{
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: 10px;
}

.gallery{
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  background-color: var(--background-dark);
  padding: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  place-items: center;
}

.galleryImage { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  max-width: 500px;
  height: 400px;
  border-radius: 8px;
  object-fit:cover;
  
}

.button {
  background-color: #3095cb;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-family: Cause;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.button:hover{
  background-color: #146088;
}
.button:active{
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.project{
  display: grid;
    text-align: center;
    align-items: center;
    background: url(Cosmos2.png);
    max-height: 4000px;
    margin: 0%;
    padding: 0%;
}

.header{
  display:block;
  min-height: 400px;
  padding-top: 66px;
  text-align: left;
  background-image: url(Cosmos2.png);
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: rgb(0, 0, 0);
   color: white;
   text-align: center;
}



@layer properties {
  @property --angle {
    syntax: "<number>";
    initial-value: -90deg;
    inherits: true;
  }
  @property --icon-offset {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --shadow-width {
    syntax: "<number>";
    initial-value: 0px;
    inherits: true;
  }
  @property --selector-width {
    syntax: "<number>";
    initial-value: 100;
    inherits: true;
  }
  @property --border-width {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --item-opacity {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --is-selected {
    syntax: "<number>";
    initial-value: 0;
    inherits: true;
  }
  @property --color-accent-on {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
  @property --color-accent-on-darker {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
  @property --color-shadow {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
  @property --color-shadow-darker {
    syntax: "<color>";
    initial-value: black;
    inherits: true;
  }
}


*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%);
}

html,




main [data-theme=dark] {
  --scene-bg: hsl(207deg 20% 12%);
  --color-grey: hsl(0 0% 10%);
  --inner-bg: hsl(200deg 15% 10.98%);
  --outer-bg: hsl(200deg 19% 6%);
  --border-bg: hsl(200deg 10% 8%);
  --invert: 100%;
}
main > div {
  width: 100%;
  height: var(--col-height);
  display: grid;
  place-items: center;
  background: var(--scene-bg);
}



.selector {
  justify-content: center;
  align-items: center;
  --shadow-width: calc(var(--radius) / 13);
  --knob-color: linear-gradient(
    to bottom,
    var(--color-accent-off),
    var(--color-accent-off-darker)
  );
  width: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  position: fixed;

  place-items: center;
  
  border-radius: 100000px;
  background: var(--color-dark-grey);
  box-shadow: inset rgba(0, 0, 0, 0.13) 0px 0px 2px -1px, inset rgba(0, 0, 0, 0.13) 0px 2px 8px -2px, inset rgba(0, 0, 0, 0.13) 0px 8px 34px -2px;
}
.selector .knob {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: rotate(calc(var(--angle) + var(--angle-offset)));
  transition: transform 0.4s var(--cubic-bezier);
  z-index: 2;
  cursor: pointer;
  border-radius: 100000px;
  /* Let's make the knob */
}
.selector .knob:before, .selector .knob:after {
  content: "";
  display: block;
  position: absolute;
}
.selector .knob:after {
  width: 4%;
  height: 14%;
  background: var(--knob-color);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4), 0 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 1px 2px var(--color-accent-on), inset 0 -1px 2px var(--color-accent-on-darker), 0 0 calc(var(--is-active)*4px) var(--color-accent-on), 0 0 calc(var(--is-active)*16px) hsl(var(--color-accent-on-code)/0.5);
  top: 16px;
  border-radius: 100000px;
}
.selector .knob:active:after {
  transform: scale(0.95);
}
.selector .knob:hover {
  --knob-color: linear-gradient(
    to top,
    var(--color-accent-on),
    var(--color-accent-on-darker)
  );
}
.selector:has(.knob:active):after {
  transform: scale(0.95);
}
.selector.active {
  --is-active: 1;
  transition: --color-accent-on 0.3s ease 0.2s, --color-accent-on-darker 0.3s ease 0.2s, --color-accent-on-code 0.3s ease 0.2s, --color-accent-on-darker-code 0.3s ease 0.2s;
}
.selector.active .knob {
  --knob-color: linear-gradient(
    to top,
    var(--color-accent-on),
    var(--color-accent-on-darker)
  );
}
.selector.active ul {
  --selector-width: 260;
  --border-width: 13;
  --rotation: 0;
  --icon-offset: 7;
  --item-opacity: 1;
}
.selector.active ul:before {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.18) 0px 0px 1px -1px inset, rgba(0, 0, 0, 0.16) 0px 2px 5px -2px inset, rgba(0, 0, 0, 0.063) 0px 8px 24px -4px inset;
}
.selector.active ul li {
  --is-selected: 0;
}
.selector.active ul li:nth-child(0) {

  transition: transform 0.5s ease 0s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(1) {
  transform: rotate(0deg);
  transition: transform 0.5s ease 0.05s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(2) {
  transform: rotate(60deg);
  transition: transform 0.5s ease 0.1s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(3) {
  transform: rotate(120deg);
  transition: transform 0.5s ease 0.15s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(4) {
  transform: rotate(180deg);
  transition: transform 0.5s ease 0.2s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(5) {
  transform: rotate(240deg);
  transition: transform 0.5s ease 0.25s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector.active ul li:nth-child(6) {
  transform: rotate(300deg);
  transition: transform 0.5s ease 0.3s, --icon-offset 0.5s ease, --item-opacity 0.5s ease 0.2s;
}
.selector:after {
  content: "";
  display: block;
  position: absolute;
  width: calc(100%);
  height: calc(100%);
  border-radius: 100000px;
  background-image: linear-gradient(to bottom, var(--scene-bg), var(--color-grey));
  box-shadow: 0 0 calc(var(--radius) / 30) rgba(0, 0, 0, 0.3);
  transition: background-image 0.2s ease, transform 0.15s ease;
  transform: scale(1);
}
.selector ul {
  --selector-width: 90;
  --border-width: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selector ul:before, .selector ul:after {
  content: "";
  display: block;
  position: absolute;
}
.selector ul:before {
  transition: --selector-width 0.3s ease, --color-accent-on-code 0.3s ease, --color-accent-on-darker-code 0.3s ease;
  width: calc(var(--selector-width) * 1%);
  height: calc(var(--selector-width) * 1%);
  border-radius: 100000px;
  box-shadow: var(--shadow), 0 calc(var(--radius) / -10) 120px calc(var(--radius) / 5) rgba(0, 0, 0, 0.05);
  background: var(--inner-bg);
}
.selector ul:after {
  --color-shadow: hsl(var(--color-accent-on-code)/0.6);
  --color-shadow-darker: hsl(var(--color-accent-on-darker-code)/0.6);
  --shadow-width: calc(var(--is-active) * calc(var(--radius) / 13));
  transition: --border-width 0.35s var(--cubic-bezier) 0.2s, box-shadow 0.35s var(--cubic-bezier) 0.2s, --color-accent-on 0.2s ease, --color-accent-on-darker 0.2s ease;
  width: calc( calc(100% + calc(var(--radius) / 9)) + calc(calc(var(--border-width) * 2) * 1px) );
  height: calc( calc(100% + calc(var(--radius) / 9)) + calc(calc(var(--border-width) * 2) * 1px) );
  border-radius: 100000px;
  box-shadow: 0 0 calc(var(--is-active)*2px) var(--color-shadow-darker), 0 0 calc(var(--is-active)*6px) var(--color-shadow), 0 0 0 var(--shadow-width) var(--outer-bg), var(--shadow);
  background: var(--border-bg);
}
.selector ul li {
  position: absolute;
  width: 25%;
  height: 120%;
  left: 0;
  right: 0;
  top: -70%;
  margin: auto;
  transform-origin: bottom center;
  display: flex;
  align-items: start;
  justify-content: center;
  opacity: var(--item-opacity);
}
.selector ul li > span {
  display: none;
}
.selector ul li > input[type=radio] {
  all: unset;
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  cursor: pointer;
  top: 0;
  left: 0;
}
.selector ul li:before, .selector ul li:after {
  content: "";
  display: block;
  position: absolute;
}
.selector ul li:before {
  --op: opacity(var(--is-selected));
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--color-accent-on);
  box-shadow: 0 0 6px var(--color-accent-on-darker);
  transform: translateY(175%) scaleX(1.5);
  filter: blur(12px) var(--op) saturate(2);
  transition: --is-selected 0.2s ease 0.2s;
}
.selector ul li:after {
  --iv: invert(var(--invert));
  width: 100%;
  aspect-ratio: 1/1;
  pointer-events: none;
  opacity: var(--icon-opacity);
  filter: var(--iv);
}
.selector ul li:nth-child(0):after {
  background: var(--icon-0) no-repeat center top 15%/contain;
}
.selector ul li:nth-child(1):after {
  background: var(--icon-1) no-repeat center top 15%/contain;
}
.selector ul li:nth-child(2):after {
  background: var(--icon-2) no-repeat center top 15%/contain;
  rotate: 45deg;
}
.selector ul li:nth-child(3):after {
  background: var(--icon-3) no-repeat center top 15%/contain;
  rotate: 330deg;
}
.selector ul li:nth-child(4):after {
  background: var(--icon-4) no-repeat center top 15%/contain;
}
.selector ul li:nth-child(5):after {
  background: var(--icon-5) no-repeat center top 15%/contain;
  rotate: 330deg;
}
.selector ul li:nth-child(6):after {
  background: var(--icon-6) no-repeat center top 15%/contain;
  rotate: 315deg;
}
.selector ul li:after, .selector ul li > input[type=radio] {
  top: calc(var(--icon-offset) * 1%);
}
.selector ul li:nth-child(2):after {
  transform: rotate(300deg);
}
.selector ul li:nth-child(3):after, .selector ul li:nth-child(5):after {
  transform: rotate(30deg);
}
.selector ul li:nth-child(6):after {
  transform: rotate(60deg);
}
.selector ul li:nth-child(0) {
  transition-delay: 0.1s;
}
.selector ul li:nth-child(1) {
  transition-delay: 0.2s;
}
.selector ul li:nth-child(2) {
  transition-delay: 0.3s;
}
.selector ul li:nth-child(3) {
  transition-delay: 0.4s;
}
.selector ul li:nth-child(4) {
  transition-delay: 0.5s;
}
.selector ul li:nth-child(5) {
  transition-delay: 0.6s;
}
.selector ul li:nth-child(6) {
  transition-delay: 0.7s;
}
.selector:has(li:nth-child(1) input[type=radio]:checked) {
  --angle: calc(calc((360deg / 6) * 0) - var(--angle-offset));
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
}
.selector:has(li:nth-child(1) input[type=radio]:checked) li:nth-child(1) {
  --icon-opacity: 1;
  --is-selected: 1;
}
.selector:has(li:nth-child(2) input[type=radio]:checked) {
  --angle: calc(calc((360deg / 6) * 1) - var(--angle-offset));
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
}
.selector:has(li:nth-child(2) input[type=radio]:checked) li:nth-child(2) {
  --icon-opacity: 1;
  --is-selected: 1;
}
.selector:has(li:nth-child(3) input[type=radio]:checked) {
  --angle: calc(calc((360deg / 6) * 2) - var(--angle-offset));
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
}
.selector:has(li:nth-child(3) input[type=radio]:checked) li:nth-child(3) {
  --icon-opacity: 1;
  --is-selected: 1;
}
.selector:has(li:nth-child(4) input[type=radio]:checked) {
  --angle: calc(calc((360deg / 6) * 3) - var(--angle-offset));
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
}
.selector:has(li:nth-child(4) input[type=radio]:checked) li:nth-child(4) {
  --icon-opacity: 1;
  --is-selected: 1;
}
.selector:has(li:nth-child(5) input[type=radio]:checked) {
  --angle: calc(calc((360deg / 6) * 4) - var(--angle-offset));
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
}
.selector:has(li:nth-child(5) input[type=radio]:checked) li:nth-child(5) {
  --icon-opacity: 1;
  --is-selected: 1;
}
.selector:has(li:nth-child(6) input[type=radio]:checked) {
  --angle: calc(calc((360deg / 6) * 5) - var(--angle-offset));
  --color-accent-on-code: var(--angle) 100% 72%;
  --color-accent-on-darker-code: var(--angle) 98% 61%;
  --color-accent-on: hsl(var(--color-accent-on-code) / 1);
  --color-accent-on-darker: hsl(var(--color-accent-on-darker-code) / 1);
}
.selector:has(li:nth-child(6) input[type=radio]:checked) li:nth-child(6) {
  --icon-opacity: 1;
  --is-selected: 1;
}