styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: coral;
}



:root {
    --grid-cols: 1;
    --grid-rows: 1;

}



#container-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ff0000;
    


}

h1 {
    
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 3rem;
}

button{
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 1rem;
    padding: .5rem;
    border-radius: .5rem;
    
}





#container-color {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}


h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.8rem;
    margin-right: 1rem;
}

input {
    margin-right: 1rem;
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5rem;
}



#container {
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    margin: auto;
    width: 70vw;
    height: 80vh;
    border: 20px solid red;
    border-radius: 1.5rem;
    background-color: #ffffff;


}

.grid-item {
    max-width: 100%;
    max-height: 100%;
}

.grid-lines {
    border: 1px solid black;
}