*{
    margin:0;
    padding:0;
    font:1rem;
    font-family:  Helvetica, sans-serif;
    color:rgb(238, 231, 231);
    font-weight: bold;
}
#heading{
    text-align: center;
    margin-top: 3rem;
}
body{
    width:100vw;
    height:100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:rgb(18, 17, 17);
}
#main{
    height:60%;
    width:40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    
}
#outer{
    width: 350px;
    height:350px;
    border-radius: 1rem; 
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 20px;
}
.red{
    width:45%;
    height:45%;
    border: 3px solid black;
    border-radius: 1rem;
}
.yellow{
    width:45%;
    height:45%;
    border: 3px solid black;
    border-radius: 1rem;
}
.green{
    width:45%;
    height:45%;
    border: 3px solid black;
    border-radius: 1rem;
}
.blue{
    width:45%;
    height:45%;
    border: 3px solid black;
    border-radius: 1rem;
}
h4{
    margin:1rem;
}
.red{
    background-color: rgb(161, 42, 42);
}
.yellow{
    background-color: rgb(159, 161, 42);
}
.green{
    background-color: rgb(66, 161, 42);
}
.blue{
    background-color: rgb(42, 113, 161);
}
.flash{
    background-color: rgb(246, 246, 246);
}

.userflash{
        background-color: green;
    }