@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
 background-color: rgba(30, 20, 35, 0.979)

}


header{
  background-color: white;
  padding: 20px;
}

 header, h1{
   color: blueviolet;
   text-align: center;
   font-family: "Pixelify Sans", sans-serif;
   font-size: 3rem;
}

.score-board{
  margin: 20px auto;
  border: 3px solid white;
  border-radius: 4px;
  text-align: center;
  width: 150px;
  color:  white;
  font-size: 1.5rem;
  padding: 15px 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  position: relative;
}


.badge{
  background-color: rgb(97, 97, 232);
  color: whitesmoke;
  font-size:0.4em ;
  padding: 2px 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


#user-label{
  position: absolute;
  top: 25px;
  left: -25px;
  
}

#computer-label{
  position: absolute;
  top: 25px;
  right: -35px;
  
}

.result{
   font-size: 2rem;
   color: whitesmoke;
}


.result > p {
  text-align: center;
  font-weight: bold;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.choices{
  margin: 50px 0;
  text-align: center;
}



.choice{
  border: 4px solid white;
  border-radius: 75px;
  margin: 0 20px;
  display: inline-block;
  padding: 8px;
  transition: all 0.3s ease;
  
}

img{
 border-radius: 65px;

}

.choice:hover{
  cursor: pointer;
  
}

#action-message{
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-align: center;
}

.green-glow{
  border: 4px solid rgb(30, 241, 30);
  box-shadow: 0 0 10px rgb(34, 60, 34) ;
 
}

.red-glow{
  border: 4px solid rgb(254, 17, 17);
  box-shadow: 0 0 10px rgb(151, 47, 47);
}

.yellow-glow{
  border: 4px solid rgb(246, 226, 11);
  box-shadow: 0 0 10px rgb(224, 195, 2);
}


.btn{
  text-align: center;
  margin-top: 10px;
}
button{
  font-size: 1.2rem;
  font-weight: bold;
  border: 2px solid;
  padding: 5px;
  cursor: pointer;
  background-color:rgb(97, 97, 232);
  color: white;
}