@font-face { font-family: "Varela Round"; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/autowas/fonts/varela-round-regular.woff2') format('woff2'); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200; font-display: swap; src: url('/static/autowas/fonts/oswald-extra_light.woff2') format('woff2'); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/autowas/fonts/oswald-light.woff2') format('woff2'); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/autowas/fonts/oswald-regular.woff2') format('woff2'); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/autowas/fonts/oswald-medium.woff2') format('woff2'); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/autowas/fonts/oswald-semi_bold.woff2') format('woff2'); }

:root {
    --color-primary: #36B7EB;
    --color-primary-light: #CFEEFA;
    --color-dark: #02273C;
    --font-heading: 'Oswald', 'Varela Round', sans-serif;
}

h1, h2, h3, h4, h5 {
    font-family: 'Oswald', 'Varela Round', sans-serif;
}

/* When scrolled, autowas uses a white header with primary-coloured links */
#header.scrolled {
    color: var(--color-primary); /* drives bg-current on the nav underline div */
}
#header.scrolled a {
    color: var(--color-primary);
    opacity: 1; /* reset opacity-80 — faded links look wrong on white */
}
#header.scrolled .hamburger-bar {
    background-color: var(--color-primary);
}
#header.scrolled #header-bg {
    opacity: 1;
}