:root {
    --background-color: #ffffff;
    --main-color: #4b12db;
    --main-color-semitransparent: #4b12db;
    --main-color-semisemitransparent: #4b12db25;
    --accent-color: #ff662a;
    --green-color: #00c527;
    --red-color: #ff0077;
}

body {
    background-color: var(--background-color);
    font-family: 'Bangers', cursive;
    text-align: center;
    justify-content: center;
    margin: 0
}

.Title{
    font-size: 12vw;
    background-color: var(--main-color);
    padding: 6vh;
    color:  var(--background-color);
    margin-top: 0;
}

.Subtitle {
    font-size: 6vw;
    color: var(--accent-color);
}

.Subsubtitle {
    font-size: 2vw;
    color: var(--main-color);
}

.dark {
    background-color: var(--main-color);
    color: var(--background-color);
    padding-top: 3vw;
    padding-bottom: 3vw;
    padding-right: 10vw;
    padding-left: 10vw;
    display: inline-block;
    border-radius: 2vw;
    max-width: 50%;
}

.Question {
    font-size: 4vw;
    color: var(--main-color);
    text-align: center;
    padding: 0px 3vw;
}

.button {
    font-family: 'Bangers', cursive;
    width: 20vw;
    height: 6vw;
    border: none;
    color: white;
    padding: 1vh 1vw;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 2vw;
    margin-top: 3vw;
    transition-duration: 0.2s;
    cursor: pointer;
}

.learnMore {
    background-color: var(--background-color);
    color: var(--accent-color);
    border: 4px solid var(--accent-color);
    align-self: center;
    font-weight: 600;
    border-radius: 2vw;
}

.learnMore:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.answer {
    width: 100%;
    background-color: var(--background-color);
    color: var(--main-color);
    border: 4px solid var(--main-color);
    font-weight: 600;
    border-radius: 2vw;
    display:inline-block;
    margin: 0.5vw 0.5vw;
}

.answer:hover {
    background-color: var(--main-color);
    color: var(--background-color);
}

.selected {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.selected:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.done {
    width: 30vw;
    background-color: var(--background-color);
    color: var(--accent-color);
    border: 4px solid var(--accent-color);
    align-self: center;
    font-weight: 600;
    border-radius: 2vw;
}

.done:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.QuestionContainer {
    margin-top: 5vw; 
    margin-bottom: 5vw;
    padding-top: 5vw;
    padding-bottom: 5vw;
    /* border: 10px solid var(--main-color-semitransparent);
    border-radius: 6vh;
    background-color: var(--main-color-semisemitransparent); */
    border-top: 10px solid var(--main-color-semitransparent);
}

.math {
    font-size: 3vw;
}

img {
    width: 60vw;
    height: 42.6vw; /* images are 2028x1440 */
}

.footer {
    text-align:center;
    background-color:var(--main-color);
    font-size: 2vw;
    margin-top: 8vw;
    padding: 5vh;
    color:var(--background-color);
}

.censorButtonOn {
    width: 30vw;
    background-color: var(--background-color);
    color: var(--green-color);
    border: 4px solid var(--green-color);
    align-self: center;
    font-size:2vw;
    font-weight: 600;
    border-radius: 2vw;
}

.censorButtonOn:hover {
    background-color: var(--green-color);
    color: var(--background-color);
}

.censorButtonOff {
    width: 30vw;
    background-color: var(--background-color);
    color: var(--red-color);
    border: 4px solid var(--red-color);
    align-self: center;
    font-size:2vw;
    font-weight: 600;
    border-radius: 2vw;
}

.censorButtonOff:hover {
    background-color: var(--red-color);
    color: var(--background-color);
}

.options-container {
    display: flex; 
    align-items: center;
    justify-content: center;
    padding: 0vw 1vw;
}

@media screen and (orientation: portrait) {
    .options-container {
        flex-direction: column;
    }

    .Title {
        font-size: 18vw;
    }

    .Subtitle {
        font-size: 15vw;
    }

    .Subsubtitle {
        font-size: 8vw;
    }

    .Question {
        font-size: 10vw;
    }

    .button {
        width: auto;
        height: 15vw;
        font-size: 5vw;
        padding: 1vh 10vw;
    }

    .answer {
        font-size: 6vw;
        height: auto;
        width: 95%;
    }

    .footer {
        font-size: 6vw;
    }

    .math {
        font-size: 10vw;
    }

    img {
        width: 90vw;
        height: 63.8vw; /* images are 2028x1440 */
    }
}