index.css

body{
    font-weight: 200;
    font-family: Arial, Helvetica, sans-serif;
    color:#3E4377;
    margin:0;
  }
  header{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:5px;
    height:100px;
    background-color: silver;
    text-align: center;
    padding:10px;
    width:100%;
  }
  
  .active{
    background-color: #0FC9E7;
  }
  
  .player:hover{
    background-color: #0FC9E7;
  }
  
  .container{
    margin:auto auto;
    margin-top:50px;
    display:grid;
    width:315px;
    height:315px;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:1fr 1fr 1fr;
    grid-gap:5px;
    background-color:silver;
    padding:10px;
  }
  
  .item{
    width:100px;
    height:100px;
    background-color: white;
    text-align: center;
  }
  
  .item:hover{
    background-color: lightgrey;
  }
  
  .item  .material-icons{
    margin-top:22px;
    margin-bottom:22px;
    font-size:55px;
    text-align: center;
    font-weight: 150;
    color:#0D95DC;
  }

 .judge-card{
   position: absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: rgba(190, 230, 233, 0.86);
   width:400px;
   height:400px;
   border-radius: 10px;
   align-items:center;
   text-align: center; 
 } 

 .judge-card h1{
   font-size:60px;
   font-weight:100;
   margin-top:160px;
 }

 #judgement{
   visibility: hidden;
 }

.newGame{
  background-color: #CE4553;
  padding:5px;
  position: relative;
  width:30px;
  height: 30px;
  float: right;
  top:10px;
  right:10px;
  border-radius:3px;
  border:solid 1px silver;
  text-align: center;
}

.newGame:hover{
  background-color: #EB3E06;
}


  /* @keyframes rotate-text{
    from {color: #00FFB8;}
    to {color: #4C00FF;}
  }
.j-text-active{
  animation-name:rotate-text;
  animation-duration:5s;
} */

/* .player2-active{
  transition-duration: 6s ;
  transform: rotateY(360deg);
} */