:root[data-theme="light"] {
    --text-50: #f0f8ff;
    --text-100: #dceeff;
    --text-200: #b8ddff;
    --text-300: #94ccff;
    --text-400: #70bbff;
    --text-500: #4daaff;
    --text-600: #3d88cc;
    --text-700: #2e6699;
    --text-800: #1f4466;
    --text-900: #102233;
    --text-950: #08111a;
  
    --background-50: #e6f7ff;
    --background-100: #66cfff;
    --background-200: #53c4f8;
    --background-200-rgb: 153, 223, 255;
    --background-300: #66cfff;
    --background-400: #27baff;
    --background-500: #00afff;
    --background-600: #008ccc;
    --background-700: #006999;
    --background-800: #004666;
    --background-800-rgb: 0, 70, 102;
    --background-900: #002233;
    --background-950: #001119;
  
    --primary-50: #e6f7ff;
    --primary-100: #ccefff;
    --primary-200: #99dfff;
    --primary-300: #66cfff;
    --primary-400: #33bfff;
    --primary-500: #00afff;
    --primary-600: #008ccc;
    --primary-700: #006999;
    --primary-800: #004666;
    --primary-900: #002233;
    --primary-950: #001119;
  
    --secondary-50: #fff7e6;
    --secondary-100: #ffefcc;
    --secondary-200: #ffdf99;
    --secondary-300: #ffcf66;
    --secondary-400: #ffbf33;
    --secondary-500: #ffaf00;
    --secondary-600: #cc8c00;
    --secondary-700: #996900;
    --secondary-800: #664600;
    --secondary-900: #332300;
    --secondary-950: #191100;
  
    --accent-50: #fff0f5;
    --accent-100: #ffe0eb;
    --accent-200: #ffc1d6;
    --accent-300: #ffa3c2;
    --accent-400: #ff84ad;
    --accent-500: #ff6699;
    --accent-600: #cc527a;
    --accent-700: #993d5c;
    --accent-800: #66293d;
    --accent-900: #33141f;
    --accent-950: #190a10;
  }
:root[data-theme="dark"] {
--text-50: #080d12;
--text-100: #0f1924;
--text-200: #1f3347;
--text-300: #2e4c6b;
--text-400: #3d668f;
--text-500: #4d7fb3;
--text-600: #7099c2;
--text-700: #94b2d1;
--text-800: #b8cce0;
--text-900: #dbe6f0;
--text-950: #edf2f7;

--background-50: #090e11;
--background-100: #111b22;
--background-200: #223644;
--background-200-rgb: 34, 54, 68;
--background-300: #335266;
--background-400: #446d88;
--background-500: #5588aa;
--background-600: #77a0bb;
--background-700: #99b8cc;
--background-800: #bbcfdd;
--background-800-rgb: 187, 207, 221;
--background-900: #dde7ee;
--background-950: #eef3f6;

--primary-50: #080d11;
--primary-100: #111922;
--primary-200: #223244;
--primary-300: #324c67;
--primary-400: #436589;
--primary-500: #547eab;
--primary-600: #7698bc;
--primary-700: #98b2cd;
--primary-800: #bbcbdd;
--primary-900: #dde5ee;
--primary-950: #eef2f7;

--secondary-50: #0e0811;
--secondary-100: #1c1122;
--secondary-200: #372244;
--secondary-300: #533267;
--secondary-400: #6e4389;
--secondary-500: #8a54ab;
--secondary-600: #a176bc;
--secondary-700: #b998cd;
--secondary-800: #d0bbdd;
--secondary-900: #e8ddee;
--secondary-950: #f3eef7;

--accent-50: #110810;
--accent-100: #221121;
--accent-200: #442241;
--accent-300: #673262;
--accent-400: #894383;
--accent-500: #ab54a4;
--accent-600: #bc76b6;
--accent-700: #cd98c8;
--accent-800: #ddbbda;
--accent-900: #eedded;
--accent-950: #f7eef6;

}

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

* {
    font-family: 'Montserrat';
}

body {
    background-color: var(--background-100);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

body.scroll-lock {
    overflow: hidden;
}

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

nav {
    display: flex;
    position: fixed;
    height: 8vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.ncontainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 3vw;
}

.main-nav-container {
    display: none;
}

.nav-btn,
.aside-btn {
    color: var(--text-800);
    border: none;
    height: fit-content;
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.aside-btn {
    font-size: 2rem;
}

.nav-btn:hover,
.nav-btn.active {
    background-color: var(--text-800);
    color: var(--text-200);
}

aside {
    position: fixed;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

aside.is-active {
    left: 0vw;
}

.aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 3vh;
}

.burger {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    z-index: 9999;
}
.burger:hover {
    opacity: 0.7;
}
.burger.is-active:hover {
    opacity: 0.7;
}
.burger.is-active .burger-inner,
.burger.is-active .burger-inner::before,
.burger.is-active .burger-inner::after {
    background-color: var(--text-800); 
}
  
.burger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}
  
.burger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; 
}
.burger-inner, .burger-inner::before, .burger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--text-800);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
}
.burger-inner::before, .burger-inner::after {
    content: "";
    display: block; 
}
.burger-inner::before {
    top: -10px;
}
.burger-inner::after {
    bottom: -10px;
}

.burger .burger-inner {
    top: 2px;
    transition-duration: 0.275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.burger .burger-inner::before {
      top: 10px;
      transition: opacity 0.125s 0.275s ease; 
}
.burger .burger-inner::after {
      top: 20px;
      transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}  
.burger.is-active .burger-inner {
    transform: translate3d(0, 10px, 0) rotate(135deg);
    transition-delay: 0.075s; 
}
.burger.is-active .burger-inner::before {
      transition-delay: 0s;
      opacity: 0; 
}
.burger.is-active .burger-inner::after {
      transform: translate3d(0, -20px, 0) rotate(-270deg);
      transition-delay: 0.075s; 
}