@import url(./elements.css);
@import url(./idleAnimation.css);
@import url(./sections/navigation.css);
@import url(./sections/footer.css);
@import url(../fonts/loader.css);

@media (prefers-color-scheme: light) {
    :root {
      --text: #16150d;
      --background: #edf1f7;
      --primary: #005dc7;
      --secondary: #3895ff;
      --accent: #4074b0;

      --text-50: hsl(212, 28%, 95%);
      --text-100: hsl(212, 25%, 90%);
      --text-200: hsl(212, 25%, 80%);
      --text-300: hsl(212, 25%, 70%);
      --text-400: hsl(212, 26%, 60%);
      --text-500: hsl(212, 26%, 50%);
      --text-600: hsl(212, 26%, 40%);
      --text-700: hsl(212, 25%, 30%);
      --text-800: hsl(212, 25%, 20%);
      --text-900: hsl(212, 25%, 10%);
      --text-950: hsl(212, 28%, 5%);
    
      --background-50: #edf1f7;
      --background-100: #dce4ef;
      --background-200: #b9c8df;
      --background-300: #95add0;
      --background-400: #7291c0;
      --background-500: #4f76b0;
      --background-600: #3f5e8d;
      --background-700: #2f476a;
      --background-800: #202f46;
      --background-900: #101823;
      --background-950: #080c12;
    
      --primary-50: #e5f1ff;
      --primary-100: #cce4ff;
      --primary-200: #99c9ff;
      --primary-300: #66adff;
      --primary-400: #3392ff;
      --primary-500: #0077ff;
      --primary-600: #005fcc;
      --primary-700: #004799;
      --primary-800: #003066;
      --primary-900: #001833;
      --primary-950: #000c1a;
    
      --secondary-50: #e5f1ff;
      --secondary-100: #cce4ff;
      --secondary-200: #99c9ff;
      --secondary-300: #66adff;
      --secondary-400: #3392ff;
      --secondary-500: #0077ff;
      --secondary-600: #005fcc;
      --secondary-700: #004799;
      --secondary-800: #003066;
      --secondary-900: #001833;
      --secondary-950: #000c1a;
    
      --accent-50: #ecf2f8;
      --accent-100: #dae5f1;
      --accent-200: #b4cae4;
      --accent-300: #8fb0d6;
      --accent-400: #6996c9;
      --accent-500: #447cbb;
      --accent-600: #366396;
      --accent-700: #294a70;
      --accent-800: #1b314b;
      --accent-900: #0e1925;
      --accent-950: #070c13;
    }
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --text: #f2f1e9;
      --background: #080c12;
      --primary: #3895ff;
      --secondary: #005dc7;
      --accent: #4f83bf;

      --text-50: hsl(212, 28%, 5%);
      --text-100: hsl(212, 25%, 10%);
      --text-200: hsl(212, 25%, 20%);
      --text-300: hsl(212, 25%, 30%);
      --text-400: hsl(212, 26%, 40%);
      --text-500: hsl(212, 26%, 50%);
      --text-600: hsl(212, 26%, 60%);
      --text-700: hsl(212, 25%, 70%);
      --text-800: hsl(212, 25%, 80%);
      --text-900: hsl(212, 25%, 90%);
      --text-950: hsl(212, 28%, 95%);
    
      --background-50: #080c12;
      --background-100: #101823;
      --background-200: #202f46;
      --background-300: #2f476a;
      --background-400: #3f5e8d;
      --background-500: #4f76b0;
      --background-600: #7291c0;
      --background-700: #95add0;
      --background-800: #b9c8df;
      --background-900: #dce4ef;
      --background-950: #edf1f7;
    
      --primary-50: #000c1a;
      --primary-100: #001833;
      --primary-200: #003066;
      --primary-300: #004799;
      --primary-400: #005fcc;
      --primary-500: #0077ff;
      --primary-600: #3392ff;
      --primary-700: #66adff;
      --primary-800: #99c9ff;
      --primary-900: #cce4ff;
      --primary-950: #e5f1ff;
    
      --secondary-50: #000c1a;
      --secondary-100: #001833;
      --secondary-200: #003066;
      --secondary-300: #004799;
      --secondary-400: #005fcc;
      --secondary-500: #0077ff;
      --secondary-600: #3392ff;
      --secondary-700: #66adff;
      --secondary-800: #99c9ff;
      --secondary-900: #cce4ff;
      --secondary-950: #e5f1ff;
    
      --accent-50: #070c13;
      --accent-100: #0e1925;
      --accent-200: #1b314b;
      --accent-300: #294a70;
      --accent-400: #366396;
      --accent-500: #447cbb;
      --accent-600: #6996c9;
      --accent-700: #8fb0d6;
      --accent-800: #b4cae4;
      --accent-900: #dae5f1;
      --accent-950: #ecf2f8;
    }
  }

  :root[data-theme="light"] {
    --text: #16150d;
    --background: #edf1f7;
    --primary: #005dc7;
    --secondary: hsl(212, 100%, 61%);
    --accent: #4074b0;

    --text-50: hsl(212, 28%, 95%);
    --text-100: hsl(212, 25%, 90%);
    --text-200: hsl(212, 25%, 80%);
    --text-300: hsl(212, 25%, 70%);
    --text-400: hsl(212, 26%, 60%);
    --text-500: hsl(212, 26%, 50%);
    --text-600: hsl(212, 26%, 40%);
    --text-700: hsl(212, 25%, 30%);
    --text-800: hsl(212, 25%, 20%);
    --text-900: hsl(212, 25%, 10%);
    --text-950: hsl(212, 28%, 5%);
  
    --background-50: #edf1f7;
    --background-100: #dce4ef;
    --background-200: #b9c8df;
    --background-300: #95add0;
    --background-400: #7291c0;
    --background-500: #4f76b0;
    --background-600: #3f5e8d;
    --background-700: #2f476a;
    --background-800: #202f46;
    --background-900: #101823;
    --background-950: #080c12;
  
    --primary-50: #e5f1ff;
    --primary-100: #cce4ff;
    --primary-200: #99c9ff;
    --primary-300: #66adff;
    --primary-400: #3392ff;
    --primary-500: #0077ff;
    --primary-600: #005fcc;
    --primary-700: #004799;
    --primary-800: #003066;
    --primary-900: #001833;
    --primary-950: #000c1a;
  
    --secondary-50: #e5f1ff;
    --secondary-100: #cce4ff;
    --secondary-200: #99c9ff;
    --secondary-300: #66adff;
    --secondary-400: #3392ff;
    --secondary-500: #0077ff;
    --secondary-600: #005fcc;
    --secondary-700: #004799;
    --secondary-800: #003066;
    --secondary-900: #001833;
    --secondary-950: #000c1a;
  
    --accent-50: #ecf2f8;
    --accent-100: #dae5f1;
    --accent-200: #b4cae4;
    --accent-300: #8fb0d6;
    --accent-400: #6996c9;
    --accent-500: #447cbb;
    --accent-600: #366396;
    --accent-700: #294a70;
    --accent-800: #1b314b;
    --accent-900: #0e1925;
    --accent-950: #070c13;
  }
  :root[data-theme="dark"] {
    --text: #f2f1e9;
    --background: #080c12;
    --primary: #3895ff;
    --secondary: #005dc7;
    --accent: #4f83bf;

    --text-50: hsl(212, 28%, 5%);
    --text-100: hsl(212, 25%, 10%);
    --text-200: hsl(212, 25%, 20%);
    --text-300: hsl(212, 25%, 30%);
    --text-400: hsl(212, 26%, 40%);
    --text-500: hsl(212, 26%, 50%);
    --text-600: hsl(212, 26%, 60%);
    --text-700: hsl(212, 25%, 70%);
    --text-800: hsl(212, 25%, 80%);
    --text-900: hsl(212, 25%, 90%);
    --text-950: hsl(212, 28%, 95%);
  
    --background-50: #080c12;
    --background-100: #101823;
    --background-200: #202f46;
    --background-300: #2f476a;
    --background-400: #3f5e8d;
    --background-500: #4f76b0;
    --background-600: #7291c0;
    --background-700: #95add0;
    --background-800: #b9c8df;
    --background-900: #dce4ef;
    --background-950: #edf1f7;
  
    --primary-50: #000c1a;
    --primary-100: #001833;
    --primary-200: #003066;
    --primary-300: #004799;
    --primary-400: #005fcc;
    --primary-500: #0077ff;
    --primary-600: #3392ff;
    --primary-700: #66adff;
    --primary-800: #99c9ff;
    --primary-900: #cce4ff;
    --primary-950: #e5f1ff;
  
    --secondary-50: #000c1a;
    --secondary-100: #001833;
    --secondary-200: #003066;
    --secondary-300: #004799;
    --secondary-400: #005fcc;
    --secondary-500: #0077ff;
    --secondary-600: #3392ff;
    --secondary-700: #66adff;
    --secondary-800: #99c9ff;
    --secondary-900: #cce4ff;
    --secondary-950: #e5f1ff;
  
    --accent-50: #070c13;
    --accent-100: #0e1925;
    --accent-200: #1b314b;
    --accent-300: #294a70;
    --accent-400: #366396;
    --accent-500: #447cbb;
    --accent-600: #6996c9;
    --accent-700: #8fb0d6;
    --accent-800: #b4cae4;
    --accent-900: #dae5f1;
    --accent-950: #ecf2f8;
  }


* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: Comfortaa;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Sora;
}

#background {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: fixed;
    filter: brightness(0.7) contrast(1.1) grayscale(1); /* blur(1px) */
}

.disable-selection {
  -webkit-user-drag: none;
  user-select: none;
}

.disable-selection * {
  -webkit-user-drag: none;
  user-select: none;
}