/* =========================
   FONTS
========================= */

    @font-face {
        font-family: 'Poppins';
        src: url('/fonts/Poppins/poppins-v24-latin-regular.woff2');
        font-weight: 400;
    }

    @font-face {
        font-family: 'Poppins';
        src: url('/fonts/Poppins/poppins-v24-latin-500.woff2');
        font-weight: 500;
    }

    @font-face {
        font-family: 'Poppins';
        src: url('/fonts/Poppins/poppins-v24-latin-600.woff2');
        font-weight: 600;
    }

    @font-face {
        font-family: 'Poppins';
        src: url('/fonts/Poppins/poppins-v24-latin-700.woff2');
        font-weight: 700;
    }

    @font-face {
        font-family: 'Poppins';
        src: url('/fonts/Poppins/poppins-v24-latin-800.woff2');
        font-weight: 800;
    }

    @font-face {
        font-family: 'Satisfy';
        src: url('/fonts/Satisfy/satisfy-v22-latin-regular.woff2');
        font-weight: 400;
    }

/* =========================
   TOKENS
========================= */

    :root {

        /* Colors */
        --color-brightmint: #D2F0E3;
        --color-darkgreen: #05555A;
        --color-black: #000;
        --color-white: #fff;
        --color-lightgrey: #F9F9F9;
        --gradient-golden: linear-gradient(95deg, #FFC631 10.71%, #EF9934 121.47%);

        /* Font Sizes */
        --fs-46: calc(46 / 16 * 1rem); /* 2.875rem */
        --fs-36: calc(36 / 16 * 1rem); /* 2.35rem */
        --fs-32: calc(32 / 16 * 1rem); /* 2rem */
        --fs-24: calc(24 / 16 * 1rem); /* 1.5rem */
        --fs-20: calc(20 / 16 * 1rem); /* 1.25rem */
        --fs-18: calc(18 / 16 * 1rem); /* 1.125rem */
        --fs-16: calc(16 / 16 * 1rem); /* 1rem */
        --fs-14: calc(14 / 16 * 1rem);

        /* Spacing */


        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 2.5rem;
        --space-xl: 3rem;

        /* Border Radius */
        --br-20: 20px;
        --br-15: 15px;


        --shadow-offset: 15px;
    }

/* =========================
   CSS RESETS
========================= */

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

    img {
        display: block;
        max-inline-size: 100%;
    }

/* =========================
   BASE & TYPOGRAPHY
========================= */

    /* Base */

    html {
        scroll-behavior: smooth;
        transition: 0.5s ease-in-out;
    }

    body {
        line-height: 1.5;
        color: var(--color-darkgreen);
        font-family: 'Poppins', sans-serif;
    }

    /* Typography */
    
    h1, h2, h3, h4, h5, h6, li {
        text-wrap: balance;   
    }

    h1 {
        font-size: var(--fs-32);
        font-weight: 600;
        line-height: 1.3;

        @media (min-width: 768px) {
            font-size: var(--fs-36);
        }

        @media (min-width: 1200px) {
            font-size: var(--fs-46);  
        }
    }

    h2 {
        font-size: var(--fs-32);
        font-weight: 600;

        @media (min-width: 1200px) {
            font-size: var(--fs-36);  
        }
    }

    h3 {
        font-size: var(--fs-18); 
    }

    .sub-head {
        font-family: 'Satisfy', italic;
        font-weight: 400;
        font-size: var(--fs-20);

        @media (min-width: 1200px) {
            font-size: var(--fs-24);  
        }
    }

    p {
        font-size: var(--fs-16);
    }

    .abstract {
        font-size: var(--fs-14);
    }

    p, li {
        max-width: 65ch;
        text-wrap: pretty;   
    }

/* =========================
   UTILITY CLASSES
========================= */

    .italic {
        font-style: italic;
    }

/* =========================
   GLOBAL ELEMENT DEFAULTS
========================= */

    a {
        text-decoration: none;
        color: inherit;
        font-family: 'Poppins', sans-serif;
    }

    button {
        font: inherit;
    }

/* =========================
   BACKGROUND ALTERNATION
========================= */

    .site-content section:nth-child(even) {
        background-color: var(--color-white);
    }

    .site-content section:nth-child(odd) {
        background-color: var(--color-brightmint);
    }