* {
    padding: 0;
    margin: 0;
}

html {
    background: var(--crust);
    color: var(--text);
}

body {
    display: grid;
    justify-content: center;
    gap: 1em;
}

.answerOptions {
    display: flex;
    gap: 1em;
    list-style: none;
}

.answerOption {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0 1em;
    background-color: var(--surface1);
    border-radius: 25px;
}

.answerOption:hover,
.answerOption.selected {
    background-color: var(--mauve);
    color: var(--crust);
}

.buttonsWrapper {
    display: flex;
    justify-self: center;
    gap: 0.5em;
}

::file-selector-button,
.AnswerButton,
.switchType {
    padding: 0.5em 1em;
    background-color: var(--surface1);
    border: none;
    color: var(--text);
    border-radius: 25px;
}

::file-selector-button:hover,
.AnswerButton:hover,
.switchType:hover {
    background-color: var(--mauve);
    color: var(--crust)
}

.CorrectOrIncorrect {display: none;}

.Correct,
.Incorrect {
    color: var(--base);
    padding: 0.5em;
    border-radius: 15px;
}

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

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