body {
    min-width: 250px;
    font-family: 'Times New Roman', Times, serif;
}

select, ::picker(select) {
  appearance: base-select;
}


input, button, textarea, select {
    border: 1px solid grey;
    border-radius: 2.5px;
}

section {
    margin-top: min(1%, 5px);
    margin-bottom: min(1%, 5px);
}

#container1 {
    width: 100%;
    max-width: 500px;
    min-width: 250px;
    min-height: 300px;
    border-bottom: 1px solid grey;
}

#container2 {
    max-width: 500px;
}

@media only screen and (max-width: 310px) {
    .extraBtn {
        display: none;
    }
}

@media only screen and (min-width: 515px) and (max-width: 599px),
        only screen and (min-width: 615px) { 
    #container2 {
        border-right: 1px solid grey;
    }
}

@media screen and (max-width: 599px) {
    #dice td > *{
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 600px) {
    #container1 {
        display: flex;
        width: 575px;
        max-width: 575px;
    }

    #container2 {
        max-width: 572px;
        padding-right: 5px;
    }

    #stats table {
        width: 500px;
        height: 100%;
        border-bottom: none;
        border-right: 1px solid grey;
    }

    #dice, #dice table, #dice td {
        width: 100%;
        padding-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #dice td {
        display: block;
    }
}

@media only screen and (min-width: 700px) and (max-width: 1000px),
        only screen and (min-width: 1250px) {   
    #container2 {
        display: inline-block;
        border-right: 1px solid grey;
    }
}

@media (prefers-color-scheme: dark) {
    body:not(#light), #dark, #dark *, #dark select {
        background-color: black;
        color: white;
    }
}

@media (prefers-color-scheme: light) {
    #dark, #dark *, #dark select {
        background-color: black;
        color: white;
    }
}

*:is(input, button, textarea, select) { opacity: 0.8; }
*:is(input, button, textarea, select):hover { opacity: 1; }
*:is(input, button, textarea, select):active { opacity: 0.6; }
*:is(input, button, textarea, select):disabled { opacity: 0.4; }