@font-face {
  font-family: 'Fresh-Man';
  src: url(/fonts/FRESHMAN-PODX.TTF) format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
    /* colors */
    --primary-light: hsl(208,94%, 75%);
    --primary-og: hsl(208,94%, 50%);
    --primary-dark: hsl(208,94%, 8%);
    --primary-darkest: hsl(208,94%, 5%);
    --light-100: hsl(0, 0%, 100%);
    --light-200: hsl(0, 0%, 95%);
    --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%);

    /* gradients */
    --section-gradient: linear-gradient(180deg, var(--dark-200) 0%, var(--dark-300) 100%);
    --border-gradient: linear-gradient(180deg, var(--light-400) 0%, var(--dark-300) 100%);

    /* shadows */
    --box-shadow: 0 4px 4px 0 var(--dark-400);

    /* fonts */

    --header-font: 'Fresh-Man', sans-serif;
    --text-font: 'montserrat', sans-serif;

    /* font sizes */

    --xl4: 3rem; /* 48px */
    --xl3-5: 2.5rem; /* 40px */
    --xl3: 2.25rem; /* 36px */
    --xl2: 2rem; /* 32px */
    --xl1: 1.75rem; /* 28px */
    --lg: 1.5rem; /* 24px */
    --md: 1.25rem; /* 20px */
    --sm: 1rem; /* 16px */
    --xs: 0.875rem; /* 14px */

    /* spacing */

    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-7: 1.75rem; /* 28px */
    --spacing-8: 2rem; /* 32px */
    --spacing-9: 2.25rem; /* 36px */
    --spacing-10: 2.5rem; /* 40px */
}

/* * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} */

html{
    scroll-behavior: smooth;
    height: 100%;

}

body {
    font-family: var(--text-font);
    background-color: var(--dark-300);
    height: 100%;
}

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

p, a {
    color: var(--light-200);
    line-height: 1.5;
}

a {
    font-family: var(--header-font);
    text-decoration: none;
    letter-spacing: 5%;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

a:hover{
    color: var(--primary-og);
}