:root {
    --global-font-color: black;
    --red: #FA5252; 
    --yellow: #FBC037; 
    --blue: #228BE6; 
    --green: #40C057; 
    --orange: #FD7E14;
}

html {
    height: 100%;
    width: 100%;
    font-family: 'Tilt Warp', cursive;
    color: var(--global-font-color);
    background-color: #CCE9F9; 
}

* {
    box-sizing: border-box;
}

h1 {
    text-align: center;
    margin-bottom: 0;
    font-size: 3em;
}

main {
    max-width: 1100px;
    margin: 0 auto; 
}

#prompt {
    position: absolute; 
    text-align: center;
    font-size: 2em;
    rotate: -45deg;
    z-index: 1; 
}

#prompt > p {
    width: 29vmin; 
    padding: 0.5em; 
    border-radius: 10px;
    background-color: var(--orange); 
}

#scores {
    display: flex;
    justify-content: space-around;
    margin-bottom: -100px;
    font-size: 1.55em;
}

#game-board {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 48vmin;
    gap: 1vmin;
    margin: 14vmin auto; 
    rotate: 45deg; 
}

.square {
    height: 23vmin;
    width: 23vmin;
    border-radius: 10px;
    display: flex; 
    align-items: center;
    justify-content: center;
}

.square > p {
    rotate: -45deg;
    font-size: 3.5em;
    cursor: default;
}

#game-modes {
    display: flex;
    justify-content: space-around;
    margin-top: -75px;
    margin-bottom: 65px;
}

#game-modes > button {
    font-size: 1.25em;
    width: 165px;
    background-color: #B2BABB;
    color: #424949; 
    border: 0;
    border-radius: 10px;
    font-family: 'Tilt Warp', cursive;
}

#game-modes > button.selected {
    background-color: var(--green);
    color: var(--global-font-color); 
}

#start-game {
    display: block; 
    margin: 0 auto; 
    font-size: 1.55em;
    background-color: var(--orange); 
    border: 0;
    border-radius: 10px;
    font-family: 'Tilt Warp', cursive;
}

#start-game:hover {
    background-color: #FDA760;
}

#ArrowUp {
    background-color: var(--red);
}

#ArrowUp.playing {
    background-image: radial-gradient(yellow 0, var(--red) 60%, var(--red) 100%);
}

#ArrowUp.correct {
    background-image: radial-gradient(lightgreen 0, lightgreen 25%, var(--red) 60%, var(--red) 100%);
}

#ArrowRight {
    background-color: var(--yellow);
}

#ArrowRight.playing {
    background-image: radial-gradient(yellow 0, var(--yellow) 60%, var(--yellow) 100%);
}

#ArrowRight.correct {
    background-image: radial-gradient(lightgreen 0, lightgreen 25%, var(--yellow) 60%, var(--yellow) 100%);
}

#ArrowLeft {
    background-color: var(--blue);
}

#ArrowLeft.playing {
    background-image: radial-gradient(yellow 0, var(--blue) 60%, var(--blue) 100%);
}

#ArrowLeft.correct {
    background-image: radial-gradient(lightgreen 0, lightgreen 25%, var(--blue) 60%, var(--blue) 100%);
}

#ArrowDown {
    background-color: var(--green);
}

#ArrowDown.playing {
    background-image: radial-gradient(yellow 0, var(--green) 60%, var(--green) 100%);
}

#ArrowDown.correct {
    background-image: radial-gradient(lightgreen 0, lightgreen 25%, var(--green) 60%, var(--green) 100%);
}

@media screen and (max-width: 580px) {
    h1 {
        margin-top: 10px; 
    }
    #prompt {
        font-size: 1.5em;
    }
    #prompt > p {
        width: 40vmin; 
    }
    #scores {
        margin-bottom: -10px;
        font-size: 1.3em;
    }
    #game-board {
        width: 70vmin;
        gap: 3vmin;
    }
    .square {
        height: 33vmin;
        width: 33vmin;
    }
    .square > p {
        font-size: 3.5em;
    }
    #game-modes {
        margin-top: 85px;
        margin-bottom: 45px;
    }
    #start-game {
        font-size: 1.75em;
    }
}