:root {
    --theme: #FFFFFF;
    --passive: #333344;
    --active: #777788;
    --coaster: #DDDDEE;
}

body {
    max-width: 460px;
}

/* Loading spinner */

#spinner {
    /* Alignment */
    margin: 4vh;
    align-self: center;
    /* Border widths and colors */
    border: 1vh solid transparent;
    border-top: 1vh solid var(--passive);
    /* Border radius */
    border-radius: 50%;
    /* Size */
    height: 7vh;
    width: 7vh;
    /* Animation */
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}