@font-face {
    font-family: "Grandstander Regular";
    src: url("fonts/Grandstander-Regular.woff2");
}

@font-face {
    font-family: "Grandstander Bold";
    src: url("fonts/Grandstander-Bold.woff2");
}

:root {
    --square-bright: #ffa6f3;
    --square-dim: #ff7bf1;
    --selected: #70eba4;
    /* there is probably a better color for this but the important part is the contrast */
    --selected-colorblind: #004828;

    --dark-background: #1e1d21;
    --dark-link: #46bbe4;
    --dark-link-active: #ff2d59;

    /* important, but unused atm */
    --trans: linear-gradient(
        to bottom,
        #55cdfd 0%,
        #55cdfd 20%,
        #f6aab7 20%,
        #f6aab7 40%,
        #ffffff 40%,
        #ffffff 60%,
        #f6aab7 60%,
        #f6aab7 80%,
        #55cdfd 80%,
        #55cdfd 100%
    );

    font-size: 20px;
    font-family: Grandstander Regular;
}

body {
    margin: 0;
}

header {
    height: 130px;
    flex-direction: column;
    gap: 10px;
}

h1 {
    margin: 0;
}

#seed-display {
    display: none;
    font-family: Grandstander Bold;
}

main {
    height: calc(100vh - 130px - 50px);
    container-type: size;

    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    height: 50px;
    flex-wrap: wrap;
    column-gap: 10px;
}

.icon {
    height: 1em;
    padding-right: 5px;
    vertical-align: middle;
}

#warning {
    font-size: 32px;
    text-align: center;
    border: 3px solid red;

    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.transition-color,
.transition-color .bingo-square {
    transition-duration: 0.2s;
    transition-property: background-color, color;
}

.center-content,
.bingo-square > div {
    display: flex;
    align-items: center; 
    justify-content: center;
    text-align: center;
}

#bingo-board {
    table-layout: fixed;
    width: min(100cqh, 95vw);
    border-collapse: collapse;
}

.bingo-square {
    /* scale text based off of container size */
    /* this prevents the table from overflowing when scaled */
    font-size: min(2.9cqh, 2.9cqw);
    /* set border based on font size */
    border: 0.2em solid black;

    /* remove default padding */
    padding: 0;

    /* position children relative to this element */
    /* allows us to set the checkboxes to 100% height and width below */
    position: relative;

    color: black;
    font-family: Grandstander Bold;

    &.odd {
        background-color: var(--square-dim);
    }
    &.even {
        background-color: var(--square-bright);
    }
    &.selected {
        background-color: var(--selected);
    }
}

.bingo-square > div {
    /* this will *try* to keep the board square */
    /* but allows it to stretch vertically if that is impossible */
    aspect-ratio: 1 / 1;

    & > label {
        /* set spacing properties based on font size */
        line-height: 0.95em;
        padding-left: 0.3em;
        padding-right: 0.3em;
    }

    /* use checkboxes for their functionality but don't actually display them */
    /* also adds keyboard navigation for free */
    & > input[type="checkbox"] {
        margin: 0;
        padding: 0;
        /* remove special browser styling */
        appearance: none;
        /* indicate clickable area with cursor */
        cursor: pointer;

        width: 100%;
        height: 100%;
        position: absolute;
    }
}

.theme-dark {
    color: white;
    background-color: var(--dark-background);

    & a {
        color: var(--dark-link);
    }
    & a:visited {
        color: var(--square-dim);
    }
    & a:active {
        color: var(--dark-link-active);
    }
}

.colorblind .bingo-square {
    background-color: var(--square-bright);

    &.selected {
        background-color: var(--selected-colorblind);
        color: white;
    }
}

.streamer {
    & > header {
        justify-content: space-around;
    }
    & #title {
        display: none;
    }
    & #seed-display {
        display: block;
    }

    & .bingo-square {
        font-size: min(3.6cqh, 3.6cqw);
        border-width: 1px;

        & label {
            line-height: 0.9em;
            padding-left: 0.1em;
            padding-right: 0.1em;
        }
    }
}