/* Import Montserrat font from Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* Declare variables */
:root {
    /* Colours */
    --white: #FFF;
    --black: #000;
    --teal: #00B0B9;
    --darkteal: #175D76;
    --orange: #EF8C34;
    --red: #E24C44;
    --lightgrey: #F2F1F6;
    --midgrey: #D6D3E3;
    --darkgrey: #B0B0B0;
    --text: #414141;
    --footerbg: #373B4C;
    --sidebartitlebg: #5A6265;

    /* Font sizes */
    --font-size-standard: 17px;
    --font-size-standard-medium: 15px;
    --font-size-standard-small: 14px;

    --font-size-heading: 45px;
    --font-size-heading-medium: 30px;
    --font-size-heading-small: 20px;

    --font-size-subheading: 17px;
    --font-size-subheading-medium: 16px;
    --font-size-subheading-small: 15px;

    --font-size-banner: 24px !important;
    --font-size-banner-medium: 17px !important;
    --font-size-banner-small: 14px !important;

    --font-size-hero-large: 75px;
    --font-size-hero: 60px;
    --font-size-hero-medium: 45px;
    --font-size-hero-small: 30px;

    /* Font weights */
    --font-weight-standard: 400;
    --font-weight-heading: 700;
    --font-weight-subheading: 700;
}

/* Set basic background properties for all pages */
body {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-standard);
    font-variation-settings: "wdth" 100, "YTLC" 500;
    line-height: 1.412;
    color: var(--text);
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
    background-color: var(--lightgrey);
}

section {
    display: flow-root;
}

.page-content-container {
    max-width: 1170px;
    min-height: 200px;
    margin: 30px auto;
}

.main-content img {
    max-width: 100%;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    border: 4px solid var(--white);
}

.heading, h1 {
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-heading);
    color: var(--text);
}

.subheading, h5 {
    font-size: var(--font-size-subheading);
    font-weight: var(--font-weight-subheading);
    color: var(--text);
}

.text, p {
    font-size: var(--font-size-standard);
    font-weight: var(--font-weight-standard);
    color: var(--text);
}

a:not(.button),
a:not(.card-link),
a:not(.footer-link),
a:not(nav a) {
    color: var(--teal);
    text-decoration: none;
}

    a.button, button {
        display: inline-block;
        border: 2px solid transparent;
        border-radius: 5px;
        padding: 10px 15px;
        margin: 15px 10px;
        background-color: var(--teal);
        color: var(--white);
        text-decoration: none;
        box-shadow: none;
        transition: all 250ms linear;
    }

        a.button:hover, button:hover {
            border: 2px solid var(--teal);
            background-color: var(--white);
            color: var(--teal);
            box-shadow: 0px 5px 15px -5px var(--darkgrey);
            transition: all 250ms linear;
        }

div.clear {
    clear: both;
}

table {
    border: 1px solid var(--white);
    border-collapse: collapse;
}

    table td {
        background-color: var(--lightgrey);
        padding: 10px 20px;
    }

        table tr:first-child td {
            background-color: var(--sidebartitlebg);
            font-weight: 500;
            color: var(--white);
        }

        tr:first-child td:first-child {
            border-top-left-radius: 10px;
        }

        tr:first-child td:last-child {
            border-top-right-radius: 10px;
        }

        tr:last-child td:first-child {
            border-bottom-left-radius: 10px;
        }

        tr:last-child td:last-child {
            border-bottom-right-radius: 10px;
        }