@font-face {
    font-family: 'Aleo';
    src: url('../fonts/Aleo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aleo';
    src: url('../fonts/Aleo-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@media (prefers-color-scheme: light) {
    :root {
        --background-gradient: linear-gradient( 190deg, hsl(30deg 50% 96%) 0%, hsl(30deg 37% 95%) 8%, hsl(30deg 29% 93%) 17%, hsl(30deg 24% 92%) 25%, hsl(30deg 20% 90%) 33%, hsl(30deg 17% 89%) 42%, hsl(30deg 15% 87%) 50%, hsl(30deg 14% 86%) 58%, hsl(30deg 12% 84%) 67%, hsl(30deg 11% 82%) 75%, hsl(30deg 10% 81%) 83%, hsl(30deg 9% 79%) 92%, hsl(30deg 9% 77%) 100% );
        --title-colour: var(--mid-heavy-grey);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-gradient: linear-gradient( 15deg, hsl(240deg 2% 10%) 0%, hsl(240deg 2% 11%) 8%, hsl(240deg 1% 12%) 17%, hsl(240deg 1% 13%) 25%, hsl(240deg 1% 14%) 33%, hsl(240deg 1% 15%) 42%, hsl(240deg 1% 16%) 50%, hsl(240deg 1% 17%) 58%, hsl(240deg 0% 18%) 67%, hsl(240deg 0% 19%) 75%, hsl(240deg 0% 20%) 83%, hsl(240deg 0% 21%) 92%, hsl(0deg 0% 22%) 100% );
        --title-colour: var(--mid-heavy-grey);
    }
}

:root {
    --border-radius: 14px;
}

* {
    box-sizing: border-box;
}

h3 {
    margin: 0px 0px 6px 0px;
    padding: 0;
    font-size: 24px;
    font-weight: normal;
}