a{
    color:rgb(26, 25, 25);
}
a:hover{
    color:black;
}

.head {
  /* left: 50%; */
  /* top: 10%; */
  margin: auto;
  text-align: center;
}
/* .boxes {
    position: absolute;
  left: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  top:50%;
} */
body {
  background-color: #e9e9e9;
  font-family: 'Courier New', Courier, monospace;
  color:rgb(65, 65, 65);
  touch-action: manipulation;
}
.box{
    width:4rem;
    height:4rem;
    font-size:2rem;
    margin-right:1rem;
    color:black;
}
.box2{
    width:4rem;
    height:4rem;
    font-size:2rem;
    margin:auto;
    
    /* margin-right:1rem; */
}
.box3{
    width:2rem;
    height:2rem;
    margin-right:3px;
}
/* .box{
    width:4vw;
    height:4vw;
    font-size:2vw;
    margin-right:1vw;
} */
.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   /* background-color: red; */
   color: black;
   text-align: center;
   margin-top:20px;
}
.greyimage{
    filter:grayscale(100%);
}
/* 
.flip{
transform: rotateX(360deg);
transition: transform .6s;
} */

.shake {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.7s;
/* color:red; */

/* When the animation is finished, start again */
animation-iteration-count: 0.25;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.btn-dark{
    background-color: rgb(35, 35, 35);
    border-color:rgb(35, 35, 35);
    /* color:white; */
}