*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: center;
    color: white;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
    text-align: center;
    background-color: rgb(0, 0, 0);
    padding: 1rem;

}
.head{
    text-align: center;
    font-weight: 900;
    font-size: 1.5rem;
}
h2{
    padding-top: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

span{
    margin:2rem;
}

.btn-container{
    border-radius: 4%;

    background-color: #daa2e4;
    border:  solid #6c584c;
    
    width:90vw;
   
    height: auto;

    display: flex;
    flex-wrap: wrap;
    
    gap: 1rem;
    align-items:center;
    justify-content:space-evenly;
    margin: auto;
  
    padding: 1rem;
       
}
.btn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; 
    text-align: center;
     margin-top: 1rem;
    margin-left:1rem;
    
 height: auto;
 flex: 1 1 45%;
 max-width: 40.8%;
 max-height: 45%;
 aspect-ratio: 1/1;
 border-radius: 20%;
 
}

.controls {
    text-align: center;
    margin: 20px;
}

button {
    padding: 10px 20px;
    font-size: 18px;
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}


.red{
    background-color: #e74e27;
    border:4px solid #fa0202;
}
.yellow{
    background-color: #f0cb12;
    border:4px solid #f6fa02;
}
.blue{
    background-color: #369acc;
    border:4px solid #3532de;
}
.green{
    background-color: #52e24a;
    border:4px solid #095809;
}
.flash{
    background-color: white;
    box-shadow: 5px 5px 5px #da4e63;
    transform: scale(1.05);

}
.userflash{
    background-color: #323331b7;
    box-shadow: 5px 5px 5px #8f6ab9;
    transform: scale(1.08);
} 


@media (min-width: 450px) {
    .btn-container{
      width: 100%;

    }
  .btn {
    flex: 1 1 44%;
    max-width: 44%;
    
  }
}
@media (min-width: 768px) {
  .btn-container {
    max-width:90vh;
    max-height: 90vh;
  }

  .btn {
    flex: 1 1 40%;
    max-width: 40%;
  }
}


    h3{
        margin:1rem;
}