/* ======== BASE RESET ======== */
*{
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
body{ 
    background-color: #202124;
    font-family: 'Comic Sans MS', Verdana, sans-serif ;
    display: flex;
    color: #e8eaed;

    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 1.2rem;
}
/* MAIN LAYOUT */
#main{   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap : 0.8rem;

    flex: 0 0 auto;
    height: 100vh;
}
/* VERTICAL TITLE */
.title{
    display:flex;
    flex-direction: column;
    font-size: 8vmin;
    color: transparent;
    -webkit-text-stroke: 1px white;
}

/* ======== SKETCH CONTAINER AND GRID ======== */
.container{
    width: min(80vw, 80vh);
    aspect-ratio: 1/1;
    border: 5px solid gray;
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start;

}

.grid{
    aspect-ratio: 1/1;
}
.grid-line{
    outline: 1px dashed rgba(128, 128, 128, 25%);
}



/*  ======== BUTTONS AND BUTTON CONTAINER ======== */
button{
    background-color: #202124;
    color:#e8eaed;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    font-size: clamp(0.8rem, 1vw, 1.4rem);
}
button:hover{
    background-color: #515257;
    border-radius: 10px;
}
button:active{
    background-color: #707176;
}


/* BUTTON GROUP CONTAINER */
#button-container{
    display: flex;
    width: 100%;
    justify-content: center ;
    flex-wrap: wrap;
}

/* SQUARE COLOR BUTTON */
.color-button{
    aspect-ratio: 1/1;
    width: clamp(20px , 1.2vw, 45px);
}

/* RAINBOW EFFECT BORDER (RANDOM BUTTON) */
#random-color-button{
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, 
    #ff6b6b, 
    #ffd166,  
    #6bcf63,  
    #8ab4f8, 
    #e8eaed   
    );
    border-image-slice: 1;
}

/* FOR CENTERING USING MARGIN */
#custom-grid-button{  
    margin: 0 auto;  
}


/* FOR SETTING ACTIVE STATE OF BUTTON */
.active{
    background-color: #515257 ;
}