@charset "UTF-8";
body{
    background-color: white;
    margin: 5vh;
    font-family: Georgia, 'Times New Roman', Times, serif;

}

h1{
    font-size: 5vh;
    font-weight: 600;
}

h2{
    height: 30px;
    width: 50px;
    background-color: white;
    text-align: center;
    font-size: 20px;
   

}
.container{
    width: 250px;
    height: 450px;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    left: 40vw;
 

}

.puncher{
    height: 50px;
    width: 50px;
    background-color: white;
    border-radius: 0%;
    transition-duration: 0.1s ;
    border: none;
    border: solid black 1px;
    

  
}
#puncher1:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;

 
  
}


#puncher2{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher3{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher4{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}

#puncher2:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher3:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher4:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher5:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher6:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}

#puncher7:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher8:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher9:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher10:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher11:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher12{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}

#puncher12:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher13:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher14:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher15:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher16:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}
#puncher5:focus{
    background-color: black;
    transition-duration: 1s ease-out ;
    border-radius: 50%;
  
}