body {
    text-align: center;
    background-color: #011f3f;
}

#level-title {
    font-family: "Press Start 2P", cursive;
    font-size: 3rem;
    margin: 5%;
    color: #fef2bf;
}

#score-title {
    cursor: pointer;
    font-family: "Press Start 2P", cursive;
    font-size: 1rem;
    /* margin:  5%; */
    color: #fef2bf;
    align-items: center;
}

.container {
    display: block;
    width: 50%;
    margin: auto;
}

.btn {
    margin: 25px;
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 10px solid black;
    border-radius: 20%;
}

.game-over {
    background-color: red;
    opacity: 0.8;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.pressed {
    box-shadow: 0 0 20px white;
    background-color: grey;
}

#scoreName {
    font-family: "Press Start 2P", cursive;
    color: #fef2bf;
    margin: 2% auto;
}

#scoreName input[type="text"] {
    font-family: inherit;
    padding: 10px;
    margin: 0 10px;
}

#scoreName .btn-primary,
#scoreForm input[type="submit"] {
    font-family: inherit;
    padding: 10px 16px;
    cursor: pointer;
}

#leaderboard {
    font-family: "Press Start 2P", cursive;
    color: #fef2bf;
    width: 50%;
    margin: 3% auto;
}

#high-scores {
    list-style: none;
    padding: 0;
    font-size: 0.8rem;
    line-height: 2.2;
}

#high-scores li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(254, 242, 191, 0.25);
    padding: 4px 8px;
}

@keyframes top-score-glow {
    0% {
        color: #ff5d5d;
        text-shadow: 0 0 8px #ff5d5d;
    }
    20% {
        color: #ffd93d;
        text-shadow: 0 0 8px #ffd93d;
    }
    40% {
        color: #6bff6b;
        text-shadow: 0 0 8px #6bff6b;
    }
    60% {
        color: #4dd2ff;
        text-shadow: 0 0 8px #4dd2ff;
    }
    80% {
        color: #c77dff;
        text-shadow: 0 0 8px #c77dff;
    }
    100% {
        color: #ff5d5d;
        text-shadow: 0 0 8px #ff5d5d;
    }
}

#high-scores li.top-score {
    animation: top-score-glow 3s linear infinite;
    font-weight: bold;
    font-size: 1.3rem;
}