*, *::before, *::after{
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
nav{
    display: flex;
    justify-content: space-around;
    padding: .5em;
    background-color: brown;
}
.colors{
    display: grid;
    grid-template: repeat(5, 1fr) / repeat(5, 1fr);
    grid-template-areas: 
    "image1 image2 image3 image4 image5"
    "image1 image2 image3 image4 image5"
    "image1 image2 image3 image4 image5"
    "image1 image2 image3 image4 image5"
    "image1 image2 image3 image4 image5"
    ;
    gap: 0;
    height: 100%;
}
.names{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "value1 value2 value3 value4 value5";
}
.colors img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
option{
    font-size: 1.1rem;
    border: 2px solid black;
}
select:hover{
    background-color: goldenrod;
    
}
select:focus{
    background-color: bisque;
}
main{
    height: 80vh;
}
select{
    padding: .5em;
    border-radius: 10px;
    font-size: 1.2rem;
}
button{
    padding: .4em .9em;
    background-color: white;
    border: none;
    border-radius: 10px;
}
input{
    height: 2.8rem;
    border: 1px solid wheat;
    border-radius: 10px;
    
}