*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   font-family: sans-serif;
}
body{
   margin: 0;
   text-align: center;
   height: 100vh;
   background-color: #0cbaba;
   background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
   color: white;
}
body::-webkit-scrollbar{
   display: none;
}

.heading{
   font-size: 4rem;
   color: #0cbaba;
   margin-top: 30px;
   margin-bottom: 10px;
}
#player1, #player2, #draw{display: none;}

.description{
   color: #0cbaba;
}

.left, .right{
   display: inline-block;
   margin: 50px;
   margin-bottom: 0;
   height: 200px;
   width: 200px;
   color: #0cbaba;
   font-size: 1.5rem;
   text-align: center;
}

#leftBox, #rightBox{
   text-align: center;
   padding: 0;
   margin-top: 20px;
   height: 130px;
   width: 130px;
   background-color: white;
   color: #0cbaba;
   font-size: 115px;
   border-radius: 15px;
   margin-left: 35px;
}


.go, .reset{
   display: inline-block;
   margin: 0;
   margin-top: 20px;
   height: 50px;
   width: 250px;
   background-color: #0cbaba;
   color: #fff;
   font-weight: bold;
   font-size: 20px;
   border-radius: 10px;
   border-width: 0;
}

.reset:hover, .go:hover{
   background-color: #77b4fa;
}

.reset{display: none;}

#copy{
   position: absolute;
   bottom: 10px;
}

@media(max-width: 650px){
   .left, .right{
      display: inline-block;
      margin: 15px;
      margin-bottom: 0;
      height: 200px;
      width: 130px;
      font-size: 30px;
      text-align: center;
   }
   
   #leftBox, #rightBox{
      text-align: center;
      padding: 0;
      margin-top: 20px;
      height: 130px;
      width: 130px;
      font-size: 115px;
      border-radius: 15px;
      margin-left: auto;
   }
}