body {
    background-color: rgb(23, 23, 23);
    width: 100%;
    height: 100%;
}
canvas {
    background-color: black;

    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#redScore{
    color: red;
    position: fixed;
    font-size: 2.5rem;
    user-select: none;
    z-index: 1;
}
#blueScore{
    color: blue;
    position: fixed;
    font-size: 2.5rem;
    user-select: none;
    z-index: 1;
}
#timer{
    color: white;
    margin-top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    font-size: 4rem;
    user-select: none;
    z-index: 1;
}







/* User Interfaces */
#helpTitle {
    margin: 2vmin auto 0vmin auto;
    text-align: center;
    font-size: 3vmax;
    font-weight: bold;
}
#rules {
    font-size: x-large;
    margin: auto auto auto 20px;
}
#helpUI {
    max-height: 35%;
}
#helpScreen {
    visibility: hidden;
}
#gameScreen {
    visibility: hidden;
}
#endScreen{
    visibility: hidden;
}
#playAgainButton, #back  {
    margin: auto;
    display: block;
    
    width: 33%;
    height: 20%;

    border: none;
    outline: none;
    border-radius: 999px;

    background-color: rgb(39, 89, 226);

    font-size: xx-large;
    color: white;
}
#playAgainButton:hover {
    background-color: blue;
}
#playAgainButton:active {
    background-color: darkblue;
}
#howToPlayButton {
    float: right;
    margin: auto 10% auto auto;

    width: 33%;
    height: 20%;

    border: none;
    outline: none;
    border-radius: 999px;

    background-color: rgb(39, 89, 226);

    font-size: xx-large;
    color: white;

}
#howToPlayButton:hover {
    background-color: blue;
}
#howToPlayButton:active {
    background-color: darkblue;
}
#startButton {
    float: left;
    margin: auto auto auto 10%;
    display: block;

    width: 33%;
    height: 20%;

    border: none;
    outline: none;
    border-radius: 999px;

    background-color: rgb(39, 89, 226);

    font-size: xx-large;
    color: white;

    max-width: 50%;
}
#startButton:hover {
    background-color: blue;
}
#startButton:active {
    background-color: darkblue;
}
.title {
    margin: 5vmin auto 5vmin auto;
    text-align: center;
    font-size: 5vmax;
    font-weight: bold;
}
.UI {
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    max-width: 50%;
    max-height: 33%;
    background-color: white;
}