option {
    font-size: 22px;
}
.warning {
    color: var(--yellow);
}
.help-text {
    text-align: left;
    font-size: 25px;
}
.example {
    color: var(--white30);
    text-align: center;
    font-size: 30px;
}
#level-select {
    margin: 0 0 20px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.help-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}
.level-explainer-container {
    margin: 10px 0;
}
.question-container {
    margin: 0;
}
.levels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}
.grid-item-container {
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: 25fr 75fr;
}
.grid-item {
    border-radius: 10px;
    padding: 10px;
    align-content: center;
}
.level-grid {
    text-align: right;
    background: var(--primary-container-border);
}
.text-grid {
    border: var(--primary-container-border) 1px solid;
    text-align: left;
}
@media screen and (max-width: 800px) {
    .grid-item-container {
        grid-template-columns: 1fr;
    }
    .level-grid {
        text-align: center;
    }
    .grid-example-container, .collapse {
        display: none;
    }
}