body{
    text-align:center;
    background: url("bg4.jpg");
    background-size:cover;      
    background-position: center;  
    background-repeat: no-repeat;  
    height: 100vh;
}

.tablet {
    background: linear-gradient(
        to left,
        rgba(50, 50, 50, 0.3),
        rgba(50, 50, 50, 0.5),
        rgba(50, 50, 50, 0.3)
    );
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-clip: padding-box;
    width: 95%;
    height: 97vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;   
}

.grid{
    height: 360px;
    width: 360px;
    /* position: fixed; */
    display:flex;
    flex-wrap: wrap;
    border: 2px solid rgb(255, 255, 255);
    /* align-items: center; */
    /* justify-content: center;
    margin: auto; */
    /* margin-top: 25px; */
    /* margin-left: 36%; */
}

.key{
    background-color: rgb(255, 255, 255);
    height: 100px;
    width: 100px;
    /* border-radius: 20px; */
    margin: 10px 10px;
    cursor: pointer;
}

.key:hover{
    box-shadow: 2px 2px 5px #a0a0a0;
}

h1{
    font-family: "Bitcount Prop Double", system-ui;
    font-size: 6rem;
    color: red;
    font-weight: 500;
    margin-bottom: 0;
    margin-top:0;
    animation: flicker 1.5s infinite;
}

h2{
    font-family: "Bitcount Prop Double", system-ui;
    font-weight: 500;
    color: white;
    font-size: 1.75rem;
}

h2 {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 5s steps(20) infinite;
  position: relative;
}

.flash{
    background-color: red;
    /* background-size: contain;      
    background-position: center;  
    background-repeat: no-repeat;  */
}

.userFlash{
    background-color: rgb(64, 255, 0);
}

.rules{
    top: 2rem;
    right: 2rem;
    position: fixed;
    border-radius: 20px;
    font-size: 1rem;
    cursor: pointer;
    background: none;
    color: white;
    width: 8rem;
    height: 2.5rem;
    border: none;
    opacity: 0.8;
}

button i{
    margin-left: 0.3rem;
}

#score{
    font-size: 1rem;
    color: white;
}

@keyframes flicker {
  0%, 100% { text-shadow: 0 0 5px red ; }
  10% { text-shadow: 0 0 10px red; }
  20% { text-shadow: 0 0 5px red; }
  30% { text-shadow: 0 0 1px red; }
  40% { text-shadow: 0 0 5px red; }
  50% { text-shadow: 0 0 1px red; }
  60% { text-shadow: 0 0 10px red; }
  70% { text-shadow: 0 0 4px red; }
  80% { text-shadow: 0 0 1px red; }
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}