body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Question Box */
.question-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.question-card {
    font-weight: bold;
    padding: 20px;
}

.question-card > * {
    display: block;
    min-height: 1.2rem;
    text-align: center;
}

.question-card__title {
    border-radius: 10px 10px 0 0;
    background: radial-gradient(circle, rgba(87, 60, 206, 1) 0%, rgba(98, 96, 250, 1) 100%);
    border: 1px solid black;
    border-bottom: none;
    padding: 1rem;
    color: white;
}

.question-card__input {
    min-height: 1.2rem;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background-color: white;
    border: 1px solid black;
    border-top: none;
    color: black;
}


/* Retirado diretamente de https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
    max-width: 500px;
}

.grow-wrap::after {
    /* Note the weird space! Needed to prevent jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap > textarea {
    all: unset;
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    padding: 0.5rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}