@font-face {
  font-family: 'Hoover';
  src: url(/fonts/Hoover-Thin.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hoover';
  src: url(/fonts/Hoover-Light.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hoover';
  src: url(/fonts/Hoover-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hoover';
  src: url(/fonts/Hoover-Medium.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hoover';
  src: url(/fonts/Hoover-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sunday Masthead';
  src: url(/fonts/SundayMasthead-Regular.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
    /* colors */
    --primary-100: hsl(119, 66%, 90%);
    --primary-200: hsl(119, 66%, 82%);
    --primary-300: hsl(127, 16%, 55%);
    --primary-400: hsl(147, 20%, 24%);

    --secondary-100: hsl(195, 100%, 30%);;
    --secondary-200: hsl(195, 100%, 20%);
    --secondary-300: hsl(195, 100%, 13%);
    --secondary-400: hsl(195, 100%, 7%);

    --light-100: hsl(186, 28%, 93%);
    --light-200: hsl(0, 0%, 90%);
    --light-300: hsl(0, 0%, 80%);
    --light-400: hsl(0, 0%, 70%);

    --dark-100: hsl(0, 0%, 20%);
    --dark-200: hsl(0, 0%, 15%);
    --dark-300: hsl(0, 0%, 10%);
    --dark-400: hsl(0, 0%, 4%);

    --alt-primary-100: hsl(341, 66%, 90%);
    --alt-primary-200: hsl(341, 66%, 82%);
    --alt-primary-300: hsl(341, 16%, 55%);
    --alt-primary-400: hsl(341, 20%, 24%);

    --alt-secondary-100: hsl(324, 100%, 30%);
    --alt-secondary-200: hsl(324, 100%, 20%);
    --alt-secondary-300: hsl(324, 100%, 13%);
    --alt-secondary-400: hsl(324, 100%, 7%);

    --linear-hero: linear-gradient(180deg, var(--dark-300) 50%, var(--dark-400) 100%);

    /* font */

    --header-font: 'Sunday Masthead', 'Hoover', sans-serif;
    --body-font: 'Hoover', 'PlusJakartaSans', system-ui, sans-serif;

    /* font sizes */

    --font-4xl: 6rem; /* 96px */
    --font-3xl: 3rem; /* 48px */
    --font-2xl: 2.5rem; /* 40px */
    --font-xl: 2rem; /* 32px */
    --font-lg: 1.5rem; /* 24px */
    --font-md: 1.25rem; /* 20px */
    --font-sm: 1rem; /* 16px */
    --font-xs: 0.875rem; /* 14px */

    /* spacing */

    --spacing-xs: 8px;
    --spacing-s: 16px;
    --spacing-m: 22px;
    --spacing-l: 32px;
    --spacing-xl: 64px;

    /* special effects */

  --x: 0;
	--y: 0;
	--xp: 0;
	--yp: 0;
  --bg: hsl(0, 0%, 10%);
  --bg2: hsl(0, 0%, 15%);
  --hue: calc(0 + (var(--xp) * 500));
  --size: 200px;
  --glow: radial-gradient(
          50% 50% at center,
          var(--primary-100),
          var(--primary-200),
          transparent 
      )
    
    calc((var(--x) * 1px) - (var(--size) * 0.5))
    calc((var(--y) * 1px) - (var(--size) * 0.5))
    / var(--size) var(--size)
    no-repeat fixed;
}

html{
    scroll-behavior: smooth;
}

#introduction, #techstack, #projects{
    scroll-margin-top: 70px;
}

@media (width < 642px) {
    #introduction, #techstack, #projects{
        scroll-margin-top: 0px;
    }
}

body{
    background-color: var(--dark-300);
}

:root:active{
  --size: 500px;
}

html.light-theme{
    --primary-100: hsl(0, 0%, 15%);
    --primary-200: hsl(0, 0%, 4%);

    --dark-100: var(--light-100);
    --dark-200: var(--light-200);
    --dark-300: var(--light-300);
    --dark-400: var(--light-400);  
    
    --glow: radial-gradient(
          50% 50% at center,
          var(--secondary-100),
          var(--secondary-100),
          transparent 
      )
    
    calc((var(--x) * 1px) - (var(--size) * 0.5))
    calc((var(--y) * 1px) - (var(--size) * 0.5))
    / var(--size) var(--size)
    no-repeat fixed;
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font);
  color: var(--primary-100);
}

body, input, textarea, select, button, a{
  font-family: var(--body-font);
  color: var(--primary-100);
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

@view-transition{
  navigation: auto;
}