* {
    color: white
    ;
}


body {
    background-color: rgb(101, 129, 158);
}
 
#container {
    max-width: 600px;
    width: 90%;
    border: 2px solid rgb(0, 0, 0);
    padding: 20px;
    margin: 0 auto;
    border-radius: 10px;
    background-color: rgb(66, 66, 66);
}



header {
    display: flex;
    justify-content: center;
}



.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  max-height: 900px;
    
    }
    
    #div1 { grid-area: 1 / 1 / 2 / 5; 
        background-color: rgb(146, 146, 146);
            display: grid;
            margin-bottom: 20px;
            min-height: 150px;

            }
        

            #div2 { grid-area: 2 / 1 / 3 / 3;
        background-color: orange;
        max-height: 10vh;
     }

     #div2:hover {
        background-color: rgb(255, 197, 91);
    }

    
    #div3 { grid-area: 2 / 3 / 3 / 5;
    background-color: red;
max-height: 10vh;}

#div3:hover {
    background-color: rgb(253, 84, 84);
}



#div4 { grid-area: 3 / 1 / 4 / 2;
        background-color: rgb(114, 114, 114); }
        #div5 { grid-area: 3 / 2 / 4 / 3;
        background-color: rgb(114, 114, 114); }
        #div6 { grid-area: 3 / 3 / 4 / 4;
        background-color: rgb(114, 114, 114); }
        #div7 { grid-area: 3 / 4 / 4 / 5;
        background-color: rgb(114, 114, 114);}
        #div8 { grid-area: 4 / 1 / 5 / 2; 
        background-color: rgb(114, 114, 114);}
        #div9 { grid-area: 4 / 2 / 5 / 3; 
        background-color: rgb(114, 114, 114);}
        #div10 { grid-area: 4 / 3 / 5 / 4;
        background-color: rgb(114, 114, 114); }
        #div11 { grid-area: 4 / 4 / 5 / 5; 
        background-color: rgb(114, 114, 114);}
        #div12 { grid-area: 5 / 1 / 6 / 2; 
        background-color: rgb(114, 114, 114);}
        #div13 { grid-area: 5 / 2 / 6 / 3;
        background-color: rgb(114, 114, 114);}
        #div14 { grid-area: 5 / 3 / 6 / 4;
        background-color: rgb(114, 114, 114);}
        #div15 { grid-area: 5 / 4 / 6 / 5;
        background-color: rgb(114, 114, 114);}
        #div16 { grid-area: 6 / 1 / 7 / 2;
        background-color: rgb(114, 114, 114); }
        #div17 { grid-area: 6 / 2 / 7 / 3;
        background-color: rgb(114, 114, 114); }
        #div18 { grid-area: 6 / 3 / 7 / 4; 
        background-color: rgb(114, 114, 114);}
        #div19 { grid-area: 6 / 4 / 7 / 5; 
        background-color: rgb(114, 114, 114);}

    

.parent > div {
    border: 2px solid rgb(0, 0, 0);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}



#div4:hover, #div5:hover,
#div6:hover, #div7:hover,
#div8:hover, #div9:hover,
#div10:hover, #div11:hover,
#div12:hover, #div13:hover,
#div14:hover, #div15:hover,
#div16:hover, #div17:hover,
#div18:hover, #div19:hover {
    background-color: rgb(136, 136, 136);
}


p {
    border: 2px solid rgb(0, 0, 0);
    align-items: center;
}



#display {
    background-color: red;
}

h3 {
    font-size: 2.4em;
}