html, body {
    margin:0px;
    height:100%;
    margin: auto;
}

@media only screen and (min-width: 600px) {
    html, body {
        margin:0px;
        height:100%;
        width: 500px;
        margin: auto;
        background-color: rgb(70, 70, 70);
    }
}

#wrapper {
    overflow: hidden;
    height:75%;
}

#slot-1 {
    /* height:300px; */
    text-align:center;
    height:100%;
    width:50%; 
    float:left;
}

#slot-2 {
    /* height:300px; */
    text-align:center;
    height:100%;
    width:50%;
    float:right;
}

#square-1 {
    height:85%; 
    /* float:left; */
    background-color:rgb(190, 37, 37)
}

#square-2 {
    height:85%;
    /* width:50%; */
    /* float:right; */
    background-color:rgb(55, 125, 172)
}

.score {
    color: white;
    text-align: center;
    font-size: 300%;    
    font-weight: bold;
    margin: 0;
}

#serve {
    color: white;
    text-align: center;
    /* display: inline-block;  */
}

button {
    width: 80%;
    margin: 10px auto;
    display:block;
}

#reset-btn {
    background-color: rgb(167, 24, 24);
    color: white;
}

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.player-name {
    margin: 10% auto;
    width: 80%;
    height: 10%;
    /* margin: 0 5% 0 5%; */
}