:root {
    --background-gradient: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    --button-color: #fff;
    --font-color: rgb(59, 59, 59);
}

[data-theme="darkMode"] {
    --background-gradient: linear-gradient(to top, #9e7a94 0%, #6b7c98 100%);
    --button-color: rgb(90, 89, 89);
    --font-color: rgb(240, 238, 238);
}

html {
    height: 100%;
}

body {
    background-image: var(--background-gradient);
    background-repeat: no-repeat;
    display: grid;
    place-items: center;
    font-family: 'Roboto', sans-serif;
    color: var(--font-color);
}

button {
    padding: 4px;
    margin-right: 4px;
    border-radius: 2px;
    background-color: var(--button-color);
    color: var(--font-color);
    border: none;
}

hr {
    border: 0;
    height: 1px;
    background-color: #2F4F4F;
}

.question {
    font-size: 1.6em;
    font-weight: bold;
}

.small {
    font-size: 0.8em;
}

.set {
    text-transform: capitalize;
}

@media (orientation: landscape) {
    #app {
        max-width: 50%;
    }
}

@media (orientation: portrait) {
    #app {
        max-width: 80%;
    }
}