/* Import Assistant font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');

/* Apply the font to all elements */
* {
    font-family: 'Assistant', sans-serif;
}

/* Set base styles for the body */
body {
    font-family: 'Assistant', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* Use Assistant at a light base weight for the whole site */
    font-weight: 300;
    background: #ECECEC;
    font-size: 16px;
    /* base font size for the site */
}

/* Apply padding only to page content (under the navbar) so the navbar's own
   padding isn't affected. Targets the main element and the existing
   .main-content class used in templates. */
main,
.main-content {
    padding: 0 40px;
    box-sizing: border-box;
}

/* Heading styles */
h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    main,
    .main-content {
        font-size: 14px;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    main,
    .main-content {
        padding: 0 16px;
        font-size: 14px;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }
}