html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: url("background.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

/* https://www.sliderrevolution.com/resources/css-animated-background/ */
/*
body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
*/

.container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item {
    width: 10em;
}

.question-number {
    font-size: 1em;
    width: 100%;
    text-align: center;
}

/* https://www.w3.org/Style/Examples/007/center.en.html#vertical */
.question-text {
    font-size: 2em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 3em;
}

.buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.button {
    padding: 0.5em;
    margin: 1em;
}

.about {
    background: #d3d3d3ad;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}