:root {
    --background-color: #f7f9fa;
    --primary-color: #242f33;
    --font-family-base-heading: Nunito, Arial;
    --font-family-base: 'Segoe UI', system-ui, sans-serif;
    --font-weight-base: 300;
    --font-size-base: 16px;
    --schoolsnz-blue: #0988b2;
    --dark: #1f2426;
    --button: #0a9ccc;
    --text-colour: #555555;
}

* {box-sizing: border-box;}

html, body {display: flex; flex-direction: column; height: 100vh; margin: 0; padding: 0;}
body {height: 100vh; color: var(--primary-color); background-color: var(--background-color); font-size: var(--font-size-base); font-weight: var(--font-weight-base); font-family: var(--font-family-base);}

.content {flex: 1;}
.schoolsnz-blue {color: var(--schoolsnz-blue);}
.heavy {font-weight: 800;}
.button {display: inline-block; padding: 12px 25px; text-decoration: none; font-weight: 500; font-family: var(--font-family-base-heading); font-size: 1.2rem; border-radius: 1000px; color: white; background-color: var(--button); transition-duration: .3s; cursor: pointer; user-select: none; white-space: nowrap;}
.button:hover {opacity: .8;}
.button-alt {margin-right: 10px; padding: 5px 12px 5px 12px; font-size: .9rem; background-color: white; border: 1px solid var(--primary-color); color: var(--text-colour);}
.button-alt:hover {background-color: #f0f0f0;}
.text-link {color: var(--schoolsnz-blue); font-weight: 600; text-decoration: none; transition-duration: .3s; transition-property: opacity, background-color;}
.text-link:hover {opacity: .8;}
.hidden {display: none!important;}
.flex {display: flex;}
.input-error {border: 1px solid red!important; background-color: rgba(255,0,0,.2)!important;}
.radio-error {box-shadow: 0px 0px 3px red, 0px 0px 3px red, 0px 0px 3px red!important;}