body{
    margin: 0;
    padding: 0;
}

.header{
    height: 180px;
    width: 99.8%;
    border: 2px solid rgba(0, 0, 0, 0);
    text-align: center;
}

.main{
    height: 500px;
    width: 99.8%;
    border: 2px solid rgba(0, 255, 42, 0);
    display: flex;
    justify-content: center;
}
.main-inner{
    height: 100%;
    width: 500px;
    border: 1px solid rgba(255, 0, 0, 0);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;


}

/* From Uiverse.io by Mhyar-nsi */ 
.start-button {
  background-color: #8db7ff;
  color: #3b82f6;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  width: 100px;
  height: 45px;
  transition: 0.3s;
}

.start-button:hover {
  background-color: #3b82f6;
  box-shadow: 0 0 0 5px #3b83f65f;
  color: #fff;
}





@media (max-width:584px) {
    .main-inner{
        width: 300px;
    }
    .main-inner .btn{
        height: 70px;
        width: 70px;
        margin: 20px;
    }

}


.main-inner button{
    height: 150px ;
    width: 150px;
    color: #ffffff00;
    border:  5px solid rgb(0, 0, 0);
    border-radius: 20px ;
    margin: 50px;
    text-align: center;
}

.R{
    background-color: rgb(255, 126, 126);
 }
 .G{
     background-color: rgb(127, 255, 142);
  }
 .B{
     background-color: rgb(124, 139, 255);
  }
 .Y{
     background-color: rgb(255, 249, 129);
  }

 .flash{
    background-color: white;
    transition: background-color 0.15s ease;
 }

 .userflash{
    background-color: rgb(0, 0, 0);
    transition: background-color 0.15s ease;
 }