: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;
    /* 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: 80%;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(5px);
    justify-content: space-between;
    padding: 10px 10vw;
    z-index: 1000;
}

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

.nav-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;
}

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

aside,
.burger {
    display: none;
}