html {
    margin: 0px;
    padding: 0px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
    min-height: 100vh;
    background-image: linear-gradient(to bottom, purple, #8651E1);
}

.menu-container {
    margin: auto;
    display: flex;
    width: 100vw;
    padding-top: 20vh;
}

.menu2-container {
    position: fixed;
    top: calc(45vh + 5vw);
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    width: 90vw;
}

.menu-button {
    border: 1px solid black;
    margin: 2vw;
    height: 15vh;
    flex: 1 1 0px;
    background-color: blueviolet;
    border-radius: 20px;
    color: wheat;
    cursor: pointer;
    font-size: 2.5vw;
    box-shadow: 0px 1vh black;
    transition-property: margin-top, box-shadow, background-color;
    transition-duration: 0.5s;
}

.menu-button:disabled {
    background-color:slateblue;
    color: red;
}

.menu-button:hover:enabled {
    margin-top: calc(2vw + 1vh);
    background-color: rebeccapurple;
    box-shadow: none;
}

#loadingBall {
    position: fixed;
    display: none;
    top: 50vh;
    left: 10%;
    transform: translate(-50%, -50%);
    background-color: magenta;
    border: 1px solid black;
    width: min(8vh, 8vw);
    height: min(8vh, 8vw);
    border-radius: 50%;
    animation-name: loadingAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#loadingText {
    position: fixed;
    display: none;
    top: 50vh;
    left: 50%;
    width: 45vw;
    height: 10vh;
    text-align: center;
    transform: translate(-50%, -50%);
    flex-direction: column;
    justify-content: center;
    background-color: blueviolet;
    font-size: 3vw;
    border: 1px solid black;
    border-radius: 10px;
}