body{
    background-color: black;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

main{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* margin-top: 5vmin; */
}

.wrapper{
    display: grid;
    grid-template-columns: repeat(5, 12vh);
    grid-template-rows: repeat(6, 12vh);
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
    /* margin: auto 19vh; */
}

.square{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    border-radius: 25%;
    font-size: 8vh;
    
    background-color: #ddd;
}

.myClass {
    color: rgb(255, 50, 50);
    
  }

.bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0;
    padding: 0 0;
}

.scores{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 32%;
    flex-wrap: wrap;
}

.score, .bottom-status{
    font-size: 8vh;
    margin: 0 3vw;
    text-align: center;
}

#blue-score{
    color: rgb(26, 100, 250);
   
}

#red-score{
    color: rgb(255, 40, 40);
    
}

.bottom-status{
    color: #ddd;
    display: block;
}