:root {
    font-family: 'Inter', sans-serif;
    font-feature-settings: 'tnum', 'cv05';
    --grey: hsl(0, 0%, 90%);
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: 'Inter var', sans-serif;
    }
}

body {
    max-width: 1000px;
    padding: 1rem 2rem;
    margin: 0 auto;
}

h1 {
    font-size: 300%;
    margin: 1rem 0;
}

h2 {
    font-size: 200%;
    margin: 1rem 0;
}

h3 {
    font-size: 150%;
    margin: 1rem 0;
}

header, section {
    text-align: center;
}

a[disabled] {
    opacity: 50%;
}

#timeButton, #speedButton {
    writing-mode: vertical-lr;
    text-align: center;
    border-radius: 8px 0px 0px 8px;
    line-height: 64px;
    cursor: pointer;
    font-size: 110%; 
}

#timeButton, .timeSwitch #speedButton {
    background: white;
}

#speedButton, .timeSwitch #timeButton {
    background: rgb(230,230,230);
}

#graphContainer {
    display: grid;
    grid-template-areas: "speedButton speedGraph"
    "timeButton speedGraph";
    grid-template-columns: 64px 1fr;
    grid-template-rows: 1fr 1fr;
    margin: 1rem 0;
}

#graphContainer.timeSwitch {
    grid-template-areas: "speedButton timeGraph"
            "timeButton timeGraph";
}

#speedGraph {
    grid-area: speedGraph;
    width: 100%;
    background: rgb(230,230,230);
    border-radius: 0px 8px 8px 8px;
}

#timeGraph {
    grid-area: timeGraph;
    width: 100%;
    background: var(--grey);
    border-radius: 8px 8px 8px 0px;
    display: none;
}

:is(#speedGraph, #timeGraph) svg {
    margin: 1rem;
}

.timeSwitch #speedGraph {
    display: none;
}

.timeSwitch #timeGraph {
    display: block;
}

table, section {
    border-spacing: 0;
    width: 100%;
    margin: 1rem 0;
}

table {
    border-radius: 8px 0px 0px 8px;
}

th, td {
    padding: 8px 0px 8px 16px;
    height: 48px;
}

td {
    border-top: var(--grey) solid 1px;
}

:is(th, td):last-child {
    padding-right: 8px;
}

th {
    text-align: left;
}

:is(th, td):first-child {
    width: 48px;
    background: var(--grey);
    padding: 8px 8px;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    line-height: 0px;
}

:is(td, th) :is(svg, img, object) {
    width: 48px;
    height: 48px;
    border-radius: 6px
}

:is(th, td):not(:nth-child(2)):not(:first-child) {
    text-align: right;
}

:is(th, td).final {
    color: navy;
}

:is(th, td).small {
    font-size: 80%;
}

input {
    width: 5rem;
    text-align: left;
}

p {
    margin: 0.5rem 0;
}

.graph .line {
    stroke-width: 2px;
    stroke-linecap: butt;
}

th:first-child {
    border-radius: 8px 0 0 0;
}

tr:last-child td:first-child {
    border-radius: 0 0 0 8px;
}

footer {
    text-align: center;
}

a {
    color: black;
}

.annotations path {
    stroke: navy;
    stroke-dasharray: 5;
}

.annotations text {
    stroke: var(--grey);
    stroke-width: 4px;
    fill: black;
        paint-order: stroke fill;
}

article {
    background: var(--grey);
    padding: 1rem 2rem;
    border-radius: 8px;
    margin: 1rem 0;
}

article.short {
    padding: 0.5rem 2rem;
}

h4 {
    margin: 0 0 8px;
}

.awardset th {
    height: 24px;
}

.red {
    --grey: hsl(0, 50%, 80%);
}

.orange {
    --grey: hsl(30, 50%, 80%);
}

.yellow {
    --grey: hsl(60, 50%, 80%);
}

.green {
    --grey: hsl(120, 50%, 80%);
}

.teal {
    --grey: hsl(180, 50%, 80%);
}

.blue {
    --grey: hsl(240, 50%, 80%);
}

.purple {
    --grey: hsl(270, 50%, 80%);
}

.pink {
    --grey: hsl(300, 50%, 80%);
}

@media screen and (min-width: calc(848px + 4rem)), print {
    .awardcontainer {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
        margin: 1rem 0;
    }

    @supports (grid-template-rows: masonry) {
        .awardcontainer {
            grid-template-rows: masonry;
        }
    }
    
    .awardcontainer table {
        margin: 0;
        height: fit-content;
    }
}

@media print {
    body {
        margin: revert;
        max-width: revert;
    }

    main h3 {
        break-before: always;
    }
}