@import "node_modules/reset-css/reset.css";
@import "node_modules/@fontsource/crimson-text/latin-400.css";

body {
    /* Margin of whole page. Will be 0 in OBS */
    --body-margin: 1rem;
    /* Background of whole page. Will be transparent in OBS */
    --body-background: rgb(30 41 59);
    
    /* Fixed height of card */
    --card-height: calc(100vh - 2 * var(--body-margin) - 2 * var(--card-padding));
    /* Padding of card */
    --card-padding: 1rem;
    /* Background of card */
    --card-background: rgb(220 38 38);
    /* Border radius of card */
    --card-radius: 0.5rem;

    /* Font size of card title */
    --title-font-size: 3rem;
    /* Height of card title, should not be changed */
    --title-height: calc(var(--title-font-size) + var(--title-margin-bottom));
    /* Bottom margin of card title */
    --title-margin-bottom: 0.75rem;

    /* Font size of fields */
    --fields-font-size: 1.5rem;

    /* Border with of each field */
    --field-border-width: 1px;
    /* Padding with of each field */
    --field-padding: 0.25rem;
    /* Width of each field, should not be changed */
    --field-width: calc(100% / 5 - 2 * var(--field-border-width));
    /*  - (2 * var(--card-padding)) */
    /* Height of each field, should not be changed */
    --field-heigth: calc((100vh - (2 * var(--body-margin)) - 2 * var(--card-padding) - var(--title-height) - var(--title-margin-bottom)) / 5 - 2 * var(--field-border-width));

    /* Background of activated fields */
    --field-active-background: rgb(34 211 238);
}

@media screen and (min-width: 1280px) {
    body {
        --title-font-size: 3.75rem;
        --fields-font-size: 1.875rem;
    }
}

@media screen and (min-width: 1920px) {
    body {
        --title-font-size: 4rem;
        --fields-font-size: 2.25rem;
    }
}

/* Reduce page to only show card */
body.obs {
    --body-margin: 0rem;
    --body-background: transparent;
}

body {
    margin: var(--body-margin);
    background: var(--body-background);

    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-style: normal;

    font-size: 100%;
}

#card {
    height: var(--card-height);
    padding: var(--card-padding);
    background: var(--card-background);
    border-radius: var(--card-radius);
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1 / 1;
}

#title {
    font-size: var(--title-font-size);
    height: var(--title-height);
    line-height: var(--title-height);

    color: rgb(226 232 240);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: var(--title-margin-bottom);
}

#fields { 
    font-size: var(--fields-font-size);

    display: flex;
    flex-wrap: wrap;

    background: white;
    color: rgb(30 41 59);

    user-select: none;
}

card-element {
    width: var(--field-width);
    height: var(--field-heigth);
    line-height: var(--field-heigth);

    flex: 0 1 auto;

    text-align: center;
    border: var(--field-border-width) solid;

    hyphens: auto;
}

card-element.active {
    background-color: var(--field-active-background);
}