body{
    background-color: #393e46;
    margin:2rem;

}

.main{
    display:flex;
align-content: center;
justify-content: center;
}

.title{
    text-align:center;

}

.tile{
width:2rem; 
height:2rem;
background-color: white;



}

.tile:hover{
    filter:brightness(90%);
}

.container{
    display:flex;
    justify-self: center;
    justify-items: center;
    justify-self:center;
    /* max-width: 600px; */
    width:666.9px;
    height:600px;
}

h1{
    color:#e3e3e3;
    font-weight:700px;
    font-size:2rem;

}

h2, h3, p{
    color:#e3e3e3;
}

h2{
    font-size:1.6rem;
}

#colors{

    border: 1px;
}

.ui{
    display:flex;
    /* justify-content: center; */
    /* flex: 1 2 */
}

.options{
    flex:1;
    margin-right: 3rem;
    display:flex;
    flex-direction: column;
    font-size:1rem;
    align-items: center;
}
.grid{
    flex:3;
}


#deleteEverything{
  
}
.btn:hover{
color: gold;
}

.btn{
    margin-top:1rem;
    padding:1rem;
    background-color: transparent;
    color:white;
    font-weight: 600;
    font-size:1rem;
    width:14rem;
}

.activeButton{
    background-color: #f95959;
    transition:0.4s;
}

P{

}

#gridSize{
    margin-bottom: -1rem;
}

#deleteEverything:active{
    background-color: #f95959;
}