body{
    background-color:black;
    color:white;
      }
  .container{
    display:flex;
    flex-direction:column;
    align-items:center;
    
  }
  hr{
    width:100%;
  }
  .btn{
    border:None;
     border-radius:60px;
    margin:8px;
   
  }
  .btn:active{
    transform: scale(0.9);
     transition: 0.2s;
    
  }
  .btn:hover{
    box-shadow:0px 0px 10px white;
    transition:0.2s;
  }
  .btn-img{
    height:50px;
    width:50px;
     border-radius:60px;
    padding:5px 3px 5px 3px;
    margin:10px;
   
  }
  .display{
    display:flex;
    flex-direction:column;
  }
  .reset{
    padding:5px;
    border-radius:20px;
    border:None;
    margin-top:20px;
    transform: translateX(-5px);
    height:25%;
    width:15%;
    
  }
  .win{
    color:green;
    animation: flash 0.3s ease; 
  }
  .loose{
    color:red;
    animation: shake 0.3s ease;
  }
  .draw{
    color:yellow;
    animation: flash 0.3s ease;
  }
  @keyframes flash{
    0%{transform: scale(1);}
    50%{transform:scale(1.3);}
    100%{transform:scale(1);}
  }
  @keyframes shake{
    0% {transform: translateX(0); }
    25% {transform: translateX(-5px);}
    50% {transform: translateX(5px); }
    75% {transform: translateX(-5px);}
    100% {transform:translateX(0);}
  }
  .result{
    transition: all 0.3s ease;
  }