:root {
    --scaling-margin: 90%;
}
@media (min-aspect-ratio: 3/4) {
    :root {
        --scaling-margin: 80%;
    }
}
@media (min-aspect-ratio: 4/3) {
    :root {
        --scaling-margin: 70%;
    }
}
@media (min-aspect-ratio: 16/9) {
    :root {
        --scaling-margin: 60%;
    }
}
.sensible-container {
    margin: var(--spacing) auto;
    width: var(--scaling-margin);
}

.center-container {
    margin: 0 auto;
    width: fit-content;
}



.title-text {
    font-family: Roboto Slab;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}



.drop-shadow {
    box-shadow: .3em .4em .2em rgba(0, 0, 0, .3);
}



.speech-bubble {
    border-radius: var(--border-rounding);
    border-bottom-left-radius: 0;
    background-color: #d9d9d9;
    color: black;
}



.flexbox-row {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--spacing);
}
.flexbox-column {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing);
}
.flex-fill {
    flex: 1;
}



.grid-fill-row {
    margin: auto;
    grid-column: 1 / -1;
}



.clickable {
    user-select: none;
    cursor: pointer;
}
.clickable:hover {
    filter: brightness(1.1);
}
.clickable:active {
    transform: scale(.9)
}



.icon {
    height: 1.4em;
}