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

:root {
    font-size: 62.5%;
}

body {
    background-color: rgb(235, 235, 235);
}

header {
    background-color: rgb(70, 70, 70);;
    color: #eee;
    height: 120px;
    padding: 15px;
    font-size: 2.5rem;
    text-align: center;
}

header > a {
    color: #eee;
    text-decoration: none;
    padding: 15px;
}

header > a:hover {
    color: palevioletred;
}

/* this is the container for the first 3 promo items*/
#promo1 .promo-item {
    height: 70vh;
}

.item1 {
    background-color: palevioletred;
    /* calc() is using the height viewport minus the height of the header*/
    height: calc(100vh - 120px) !important; /* !important ensure that the height property value for this element will take precedence*/
}

.item2 {
    background-color:darkcyan;
}

.item3 {
    background-color: lavender;
}

/* this is the container for 6 promo items*/
#promo2 {
    display: flex;
    flex-flow: row wrap;
}

#promo2 .promo-item{
    flex: 1 0 360px;
    height: 70vh;
}

/*items within the promo2 container */
#promo2 .promo-item:nth-child(1) {background-color: lightcoral;}
#promo2 .promo-item:nth-child(2) {background-color: lightcyan;}
#promo2 .promo-item:nth-child(3) {background-color: olivedrab;}
#promo2 .promo-item:nth-child(4) {background-color: gold;}
#promo2 .promo-item:nth-child(5) {background-color: darksalmon;}
#promo2 .promo-item:nth-child(6) {background-color: aquamarine;}

footer {
    background-color: paleturquoise;
    min-height: 100vh;
        padding: 15px;
    font-size: 2.5rem;
    text-align: center;
}

/* add these medeia queries so that the divs still display two by two when the screen gets wider*/
@media screen and (min-width: 1000px) {
    #promo2 .promo-item {
        flex: 1 0 499px;
        height: 70vh;
    }
}

@media screen and (min-width: 1500px) {
    #promo2 .promo-item{
        flex: 1 0 749px;
        height: 70vh;
    }
    
}