@font-face {
  font-family: "Roboto";
  src: url("roboto.woff2");
}

html {
    font-family: "Roboto", sans-serif;
}

body {
    background-color: #1b1b1b;
    color: White;
}

input, select, option {
    font-size: inherit;
    font-family: inherit;
}

input, select {
    border-radius: 0.25em;
    background-color: #1b1b1b;
    color: White;
}

/* Classes */

.group_box {
    border-radius: 0.25em;
    gap: 0.5em;
    padding: 1em;
    margin: 1em;
    background-color: #525252;
    color: White;
}

.failure {
    display: grid;
    grid-template-columns: 1fr 4fr;
    margin-top: 0.5em;
}

.quote {
    font-size: 2em;
}

/* IDs */

#top {
    display: flex;
    flex-wrap: wrap;
}

#failures {
}

#failures>div:nth-child(2n) {
    background-color: #373737;
}

#failure_header {
    display: grid;
    grid-template-columns: 1fr 4fr;
    font-size: 1.2em;
}

#add_entry {
    display: grid;
    grid-template-areas:
        "label_name"
        "select_name"
        "label_description"
        "enter_description"
        "label_secret"
        "enter_secret"
        "submit_failure";
}

#winner_name, #scrum_master_name {
    color: #ed8e97;
}

#scrum_master_name {
    white-space: nowrap;
}

#scrum_hat {
    position: relative; bottom: 0.25em; right: 4em;
}

/* Media queries */

@media ((min-width: 500px) and (max-resolution: 199dpi)) or
       ((min-resolution: 200dpi) and (orientation: landscape)) {
    #add_entry {
        max-width: fit-content;
        grid-template-areas:
            "label_name        select_name"
            "label_description enter_description"
            "label_secret      enter_secret"
            ".                 submit_failure";
    }

    #winner, #scrum_master {
        max-width: fit-content;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: White;
        color: Black;
    }

    select {
        background-color: White;
        color: Black;
    }

    input {
        background-color: White;
        color: Black;
    }

    .group_box {
        background-color: #adadad;
        color: Black;
    }

    #failures>div:nth-child(2n) {
        background-color: #c8c8c8;
    }

    #winner_name, #scrum_master_name {
        color: #d61649;
    }
}

/* Grid area placements */

#label_name {
    grid-area: label_name;
}

#select_name {
    grid-area: select_name;
}

#label_description {
    grid-area: label_description;
}

#enter_description {
    grid-area: enter_description;
}

#label_secret {
    grid-area: label_secret;
}

#enter_secret {
    grid-area: enter_secret;
}

#submit_failure {
    grid-area: submit_failure;
}