:root {
    --black: #000000;
    --white: #ffffff;
    --accent-a: var(--black);
    --accent-b: var(--white);
    --paper: #eeeeee;
    --grid: #cccccc;
    --au-green: #007c5a;
    --au-gold: #fccc00;
    --act: #3f4298;
    --nsw: #e67d30;
    --nt: #478ac1;
    --qld: #9ebd56;
    --sa: #d8201f;
    --tas: #6ab18b;
    --vic: #d1b23e;
    --wa: #771b80;
    --upper: #9c4a42;
    --lower: #748a80;
    font-size: 16px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #111111;
        --grid: #333333;
        --accent-a: var(--white);
        --accent-b: var(--black);
    }
}

.invert-accent {
    background: var(--accent-a);
    color: var(--accent-b);
}

.au {
    --accent-a: var(--au-gold);
    --accent-b: var(--au-green);
}

.act {
    --accent-a: var(--white);
    --accent-b: var(--act);
}

.nsw {
    --accent-a: var(--white);
    --accent-b: var(--nsw);
}

.nt {
    --accent-a: var(--black);
    --accent-b: var(--nt);
}

.qld {
    --accent-a: var(--black);
    --accent-b: var(--qld);
}

.sa {
    --accent-a: var(--white);
    --accent-b: var(--sa);
}

.tas {
    --accent-a: var(--black);
    --accent-b: var(--tas);
}

.vic {
    --accent-a: var(--black);
    --accent-b: var(--vic);
}

.wa {
    --accent-a: var(--white);
    --accent-b: var(--wa);
}

.upper {
    --accent-a: var(--white);
    --accent-b: var(--upper);
}

.lower {
    --accent-a: var(--white);
    --accent-b: var(--lower);
}

html {
    height: 100%;
}

body {
    font-family: "Roboto Condensed", sans-serif;
    color: var(--accent-a);
    background-image: linear-gradient(transparent 0.45rem, var(--paper) 0, var(--paper) 2.6rem, transparent 0),
        linear-gradient(90deg, transparent 0.45rem, var(--paper) 0, var(--paper) 2.6rem, transparent 0),
        linear-gradient(var(--grid) 0.0rem, transparent 0.05rem),
        linear-gradient(90deg, var(--grid) 0.0rem, transparent 0.05rem);
    background-size: 3rem 3rem;
    background-color: var(--paper);
    background-position: 1.5rem 1.5rem;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body > header {
    padding: 3rem;
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

body > header nav {
    display: flex;
    gap: 1rem;
    font-size: 2rem;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
}

body > header super-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body > header:not(.open) super-nav > :not(:first-child) {
    display: none;
}

body > header nav div {
    line-height: 3rem;
    padding: 0 0.5rem;
    background: var(--accent-b);
    color: var(--accent-a);
    box-sizing: border-box;
    white-space: nowrap;
}

body > header nav .state {
    font-weight: 500;
}

.opinion {
    border: 0.25rem solid var(--accent-a);
    line-height: 2.5rem;
}

.opinion.invert-accent {
    border-color: var(--accent-b);
}

a, a:visited, a:hover, a:active {
    text-decoration: underline;
    color: inherit;
    text-decoration-color: var(--accent-a);
}

body > header nav a, body > header nav a:is(:visited, :hover, :active) {
    text-decoration: none;
}

body > main {
    margin: 0rem 6rem 3rem;
}

p {
    color: var(--accent-a);
}

body > main p:first-child {
    margin-top: 0;
}

body > main p:last-child {
    margin-bottom: 0;
}

body > main.flip-reverse-grid {
        padding: 1rem;
}

.twoup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

.all-centre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.flip-reverse-grid, header.open {
    background-image: linear-gradient(transparent 0.45rem, var(--grid) 0, var(--grid) 2.6rem, transparent 0), linear-gradient(90deg, transparent 0.45rem, var(--grid) 0, var(--grid) 2.6rem, transparent 0), linear-gradient(var(--paper) 0.0rem, transparent 0.05rem), linear-gradient(90deg, var(--paper) 0.0rem, transparent 0.05rem);
    background-color: var(--grid);
    background-size: 3rem 3rem;
    background-position: 1.5rem 1.5rem;
}

body > footer {
    background: rgb(0, 137, 0);
    padding: 1.5rem;
    mix-blend-mode: multiply;
    --accent-a: var(--white);
    text-align: center;
}

body > footer p {
    margin: 0;
}

@media print {
    body {
        background: white;
    }
}

.htvc-logo {
    font-family: "Roboto Flex", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 25,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 780,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 570,
        "YTUC" 760;
    background: var(--accent-a);
    color: var(--accent-b);
}

.bh-logo {
    position: relative;
    margin-right: 2.75rem;
}

.bh-logo::after {
    background-image: url("/images/BallotHelperRight.svg");
    background-size: cover;
    height: 3rem;
    width: 3.5rem;
    display: inline-block;
    content: '';
    position: absolute;
    right: -3.25rem;
    top: 0;
    filter: invert();
}

.bh-logo.e404::after {
    background-image: url('/images/404Right.svg')
}

.divider-before::before {
    content: '';
    width: 0.25rem;
    background: black;
    height: 3rem;
    left: -1.25rem;
    position: absolute;
    top: 0rem;
    display: block;
}

.divider-before {
    position: relative;
    margin-left: 1.25rem;
}

.hamburger {
    width: 3rem;
    height: 3rem;
    background-image: linear-gradient(var(--accent-a) 20%, transparent 20%, transparent 40%, var(--accent-a) 40%, var(--accent-a) 60%, transparent 60%, transparent 80%, var(--accent-a) 80%);
    flex-shrink: 0;
    transition: rotate .2s cubic-bezier(.19, 1, .22, 1);
    cursor: pointer;
}

.open .hamburger {
    rotate: 90deg;
}

.serif {
    font-family: 'Roboto Serif', serif;
}

nav div.serif {
    font-variation-settings: "wdth" 60;
}

@media (prefers-color-scheme: dark) {
    body > footer {
        mix-blend-mode: screen;
        background: rgb(0, 119, 0)
    }

    .bh-logo::after {
        filter: inherit;
    }
}

@media (orientation: portrait) {
    body > main.twoup {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
}