* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Chalkduster', 'Comic Sans MS', fantasy;
}

body {
    background-image: url(background1.avif);
}

/* stylings for the title */
.title {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 3em;
}

.redColor {
    color: #D32F2F;
}

.yellowColor {
    color: #FFEB3B;
}

.tealColor {
    color: #00796B;
}

.grayColor {
    color: rgb(201, 194, 194);
}
/* --------------------- */

.mainbody {
    display: flex;
    flex-direction: column;
}

.interface {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .5em auto;
    gap: 2em;
}

.interfaceBtns {
    border: 1px solid black;
    border-radius: 20px;
    padding: 3px 8px;
}


.gridContainer {
    display: flex;
    flex-direction: column;
    width: 600px;
    height: 600px;
    margin: 1em auto;
    border: 3px solid black;
}

/* default styling for the pixels in grid */
.pixel {
    flex: 1;
    aspect-ratio: 1 / 1;
    background: rgb(188, 171, 182);
    border: .5px solid hsl(0, 0%, 0%, 20%);
}

#slider {
    -webkit-appearance: none;
    width: 80px;
    height: 3px;
    background-color: gray;
    border-radius: 3px;
}

#drawSlider {
    -webkit-appearance: none;
    width: 25px;
    height: 3px;
    background-color: black;
    border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 20px;
    background-color: white;
    border-radius: 5px;
}

#drawBtn, #gridBtn{
    background: green;
}

#eraseBtn {
    background: red;
}