/* Variables */
:root {
    --text-color: black;
    --nav-button-color: var(--text-color);
    --link-color: var(--text-color);
    --bg-color: white;
    --link-style: underline dotted;
    --maximum-size: 960px;
    --center-column-width: min(var(--maximum-size), 100vw - 10rem);
    --top-margin: 3.2rem;
    /*header: 1rem*2 + 0.2rem*4 */
    --center-row-height: min(var(--maximum-size), 100vh - var(--top-margin) * 5);
    --chart-aspect-ratio: 2/1.25;

    /* Selects in interactive chart */
    --select-bg-color: white;
    --select-border-color: black;

    /* Dashed line in charts */
    --dashed-line-style: "10, 5";

    /* City Colours */
    --canada: #7b7b7a;

    --toronto: #023858;
    --mississauga: #0570b0;
    --kitchener: #74a9cf;

    --vancouver: #a50f15;
    --lower_mainland: #ef3b2c;
    --chilliwack: #fc9272;

    --montreal: #01665e;
    --quebec: #5ab4ac;

    --calgary: #3f007d;
    --edmonton: #6a51a3;
    --winnipeg: #9e9ac8;
    --saskatchewan: #bcbddc;

    --noc1: #c0bfbf;
    --noc2: #9f9e9d;
}

/* Style-based classes */
.wide-margins {
    display: grid;
    grid-template-columns: 1fr var(--center-column-width) 1fr;
}

.wide-margins>* {
    grid-column: 2;
}

.vertically-centered {
    display: grid;
    grid-template-rows: 1fr var(--center-row-height) 1fr;
}

.vertically-centered>* {
    grid-row: 2;
    /* background-color: aliceblue; */
}

.dashed-line {
    stroke: var(--canada);
    stroke-width: 2;
    stroke-dasharray: 10 5;
}

.nondashed-line {
    stroke: var(--canada);
    stroke-width: 2;
}

/* Main setup */
html {
    margin: 0;
    height: 100%;
    scroll-behavior: smooth;
    /* animate # links */
    scroll-snap-type: y mandatory;
    /* snap to section */
    overflow: auto;
}

body {
    margin: 0;
    height: 100%;
    /* Classic font-selection e.g. Medium, Wordpress, GitHub etc. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.slide {
    height: 100%;
    scroll-snap-align: start;
    background-color: var(--bg-color);
}

.slide-inner {
    position: relative;
}

a {
    color: var(--link-color);
    text-decoration: var(--link-style);
}

/* Navigation arrows */
.navigation {
    position: fixed;
    top: 45%;
    left: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.navigation div {
    height: 10%;
    top: 0;
    flex-grow: 0;
}

.navigation div.mid-navigation {
    flex-grow: 1;
}

.navigation a {
    text-decoration: none;
    font-size: 4rem;
    padding: 0 1rem 0 1rem;
}

.left-navigation a {
    display: none;
    /* first slide setting */
}

/* Header */
.header {
    position: fixed;
    width: 100%;
    padding: 1rem 0;
    background-color: var(--bg-color);
}

.header h1,
.header h2,
.header h3,
.header h4 {
    margin: 0.2rem;
}


.header h2,
.header h3,
.header h4 {
    font-weight: 400;
}

/* Charts */
.chart {
    width: 100%;
    aspect-ratio: var(--chart-aspect-ratio);
    /* width: 960px;
    height: 600px; */
    /* background-color: aquamarine; */
}

/* Chart descriptions */

.chart-description {
    padding: 1rem;
    font-size: large;
}

.chart-description>* {
    padding: 0rem;
    margin: 0rem;
}

/* .chart-description h1,
.chart-description h2,
.chart-description h3,
.chart-description h4,
.chart-description h5,
.chart-description h6 {
    padding: 0.5rem 2rem;
} */

.chart-description select {
    background-color: var(--select-bg-color);
    border: 1px solid var(--select-border-color);
    padding: 0.2rem;
    margin: 0.5rem;
    width: 100%;
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
}

.color-box {
    /* float: left; */
    height: 1rem;
    width: 1rem;
    display: inline-block;
    /* clear: both; */
}

.annotation path {
    stroke: black;
}

.slide-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10%;
    left: 10%;
    height: 80%;
    width: 80%;
    z-index: 10;
    border: 3px solid black;
    padding: 20px;
    background: lightgray;
}

.slide-overlay button {
    background-color: var(--select-bg-color);
    border: 1px solid var(--select-border-color);
    padding: 0.5rem;
    margin: 0.5rem;
    /* width: 100%; */
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
}