:root {
    --background-color: #FAF7F0;
    --background-secondary-color: #D8D2C2;
    --primary-color: #B17457;
    --transparent-primary-color: #b1745777;
    --text-color: #4A4947;

    --border-radius: 20px;
    --min-card-width: 200px;
}

::selection {
    background: var(--transparent-primary-color);
    color: black;
}

.card {
    background-color: var(--background-secondary-color);
    padding: 2em;
    border-radius: var(--border-radius);
    width: 100%;
}

section.card {
    display: none;
}

section.card > ul, section.card > ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-card-width), 1fr));
    gap: 0.5em 1em;
}

li > p{
    text-wrap: nowrap;
}

.card h2 {
    font-size: 1.5em;
    font-weight: 570;
    margin-bottom: 1em;
}

h1 {
    font-size: 2.5em;
    font-weight: 600;
    color: var(--primary-color);
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    width: 100vw;
    color: var(--text-color);
    padding: 2em 10em;
}

header {
    width: 100%;    
    margin-bottom: 2em;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3em;
}

main > article {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1em;
}

main > article.card {
    border: 3px solid var(--primary-color);
    /* box-shadow: 4px 4px 30px var(--primary-color); */
    gap: 1em;
}

.statsSelection ul {
    display: flex;
    column-gap: 2em;
    row-gap: 0.7em;
    flex-wrap: wrap;
}

textarea {
    width: 100%;
    height: 10em;
    padding: 0.9em;
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    resize: none;
    overflow-y: scroll;
}

textarea:focus, textarea:active {
    border: 2px solid var(--primary-color);
}

hr {
    width: 40%;
    border: 1px solid var(--primary-color);
}

input, label {
    cursor: pointer;
}

input:checked {
    accent-color: var(--text-color); /* https://blog.logrocket.com/styling-checkboxes-css-properties#using-accent-color-property-checkboxes */
}

@media (max-width: 1024px) {
    body {
        padding: 2em 5em;
    }
}

@media (max-width: 768px) {
    body {
        padding: 2em;
    }
    main {
        gap: 1em;
    }
    .statsSelection ul {
        column-gap: 1em;
        row-gap: 0.5em;
    }
    textarea {
        height: 8em;
    }
}

@media (max-width: 480px) {
    body {
        padding: 1em;
    }
    .statsSelection ul {
        column-gap: 0.5em;
        row-gap: 0.5em;
    }
    textarea {
        height: 7em;
    }
}