@import url('google-fonts/css/inter.css');

:root {
    /* Colours */
    --white: #FFFFFF;
    --background: #FBFFFE;
    --onbackground: #252525;
    --primary: #005461;
    --primary-hover: #14616D;
    --outline: #333333;
    --gray-default: #CECECE;
    --gray-darker: #6C6C6C;
    /* Soft Grid Base Unit*/
    --sg-unit: 8px;
    --sg_sm: calc(var(--sg-unit) * 0.5);
    --sg: var(--sg-unit);
    --sg_lg: calc(var(--sg-unit) * 2);
    --sg_xlg: calc(var(--sg-unit) * 4);
    /* Border radius */
    --border-radius: 2px;
    /* Transition */
    --transition: 250ms;
}

body {
    margin: 0px;
    box-sizing: border-box;
    line-height: normal;
    font-size: 15px;
    font-family: "Inter", sans-serif;
    letter-spacing: 0.00937rem;
    font-weight: 400;
}

    body ::-webkit-scrollbar {
        width: var(--sg);
        height: var(--sg);
        z-index: 1;
    }

    body ::-webkit-scrollbar-track {
        background: transparent;
    }

h1 {
    font-size: 45px;
    font-weight: 400;
    line-height: 1.15556;
}

h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2222;
}

h3 {
    font-size: 28px;
    font-weight: 400;
}

a {
    text-decoration: none;
}

p {
    margin: 0 0 var(--sg) 0;
}

hr {
    margin: var(--sg_lg) 0;
}

.row-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: var(--sg_lg);
    grid-gap: var(--sg);
}

    .row-container.centered {
        justify-content: center;
        align-items: center;
    }

    .row-container.align-left {
        justify-content: center;
        align-items: start;
    }

    .row-container.align-right {
        justify-content: center;
        align-items: end;
    }

.column-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: var(--sg_lg);
    grid-gap: var(--sg);
}

    .column-container.centered {
        justify-content: center;
        align-items: center;
    }

    .column-container.align-left {
        justify-content: start;
        align-items: center;
    }

    .column-container.align-right {
        justify-content: end;
        align-items: center;
    }