* {
    box-sizing: border-box;
    transition: 0.25s ease;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Product Sans", "Roboto", "San Francisco", sans-serif;
}

:root {
    --color-accent: #004800;
    --color-error: #a80000;
    --color-on-accent: #FFFFFF;
    --color-on-background: #000000;
    --color-on-dim: #222222;
    --logo: url("/img/logo-color.svg");
    --background-color-primary: #ffffff;
    --background-color-secondary: #bbbbbb;
    --border-radius: 5px;
    --input-padding: 10px;
}

@media all and (prefers-color-scheme: dark) {
    :root {
        --color-accent: #baff33;
        --color-error: #ff4040;
        --color-on-accent: #000000;
        --color-on-background: #FFFFFF;
        --color-on-dim: #888888;
        --logo: url("/img/logo-white.svg");
        --background-color-primary: #000000;
        --background-color-secondary: #333333;
    }
}

body {
    background-image: linear-gradient(var(--background-color-primary), var(--background-color-secondary));
    background-attachment: fixed;
    height: 100vh;
    width: 100vw;
}

h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
}

h2, h3, h4, h5, h6, p, summary {
    padding: 0.5rem;
}

#app {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

main {
    height: 100%;
    overflow-y: auto;
    flex-grow: 1;
    padding: 1rem;
    box-sizing: border-box;
}

.sidebar {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    max-width: 300px;
}

#hamburger {
    color: var(--color-on-background);
    text-decoration: none;
}

.stacked-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media all and (min-width: 1200px) {
    .columns {
        display: flex;
        flex-direction: row;
    }

    .columns > * {
        flex-grow: 1;
    }
}

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

header.row {
    justify-content: space-between;
    align-items: center;
}

.card header .button {
    margin: 0.5rem;
}

.card {
    background: var(--background-color-primary);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.button {
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: bold;
    padding: var(--input-padding);
    text-decoration: none;
    text-align: center;
}

.flex-full-width {
    display: flex;
    flex-direction: row;
}

.button-primary {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
}

.button-secondary {
    background-color: var(--background-color-primary);
    color: var(--color-accent);
}

.button-danger {
    background-color: var(--color-error);
    color: var(--color-on-accent);
}

.center {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.logo {
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
    width: 200px;
}

.center form {
    width: 100%;
    max-width: 1200px;
}

form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

input, select, textarea {
    font-family: "Segoe UI", "Product Sans", "Roboto", "San Francisco", sans-serif;
    font-size: 1rem;
    margin-bottom: 10px;
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: var(--input-padding);
}

input:disabled {
    background-color: var(--background-color-secondary);
    color: var(--color-on-background);
}

.inline-input {
    display: flex;
    flex-direction: row;
    justify-content: start;
}

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

.list-item {
    list-style: none;
}

.list-item > a, .list-item > p {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--border-radius);
    padding: 0.5rem;
    color: var(--color-on-background);
}

.list-item > a:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.body-large {
    font-size: 1.1rem;
}

.body-medium {
    font-size: 1rem;
}

.body-small {
    font-size: 0.9rem;
}

.error {
    color: var(--color-error);
}

@media all and (max-width: 600px) {
    .hide-small {
        display: none;
    }
}

@media all and (max-width: 900px) {
    #sidebar {
        background-color: var(--background-color-primary);
        position: fixed;
        transform: translateX(-100%);
    }

    #sidebar:target {
        transform: translateX(0);
    }
}

@media all and (min-width: 900px) {
    #hamburger {
        display: none;
    }
}

@media all and (max-width: 400px) {
    .button {
        width: 100%;
    }

    .center {
        padding: 10px;
    }

    .flex-full-width {
        flex-direction: column;
        padding: 5px;
        width: 100%;
    }

    .flex-full-width .button {
        flex-direction: column;
        margin: 5px;
    }
}