/* 5 rows and 4 columns for main grid */
#wrapper{
    background-color: #fff;
    display:grid;
    grid-template-columns: minmax(0px,1fr) minmax(0px, 1fr) minmax(300px, 8fr) minmax(0px, 1fr);
    grid-template-rows: minmax(86px, 86px) minmax(300px, auto) minmax(0px, 50px) minmax(1070px,auto) minmax(40px,92px);
}
.nav-background{
    background-color: rgba(0,0,0,0);
    grid-column: 1 / -1;
    grid-row: 1;
   } 
.logo{
    grid-row: 1;
    grid-column: 2;
}
nav{
    background-color: rgba(0,0,0,0);
    grid-column: 3 / -2;
    grid-row: 1;
    text-align: right;
    padding-left: 100px;
}
nav a{
    text-decoration: none;
    color:black;
    font-family: 'Oswald';
    font-size: 1.5rem;
    display: block;
    padding-top: 7px;
}
nav ul{
    display:flex;
    list-style: none;
}
nav ul li{
   width: 150px;
}
header{
    height: 300px;
    background-image: url("sunflower.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-column: 1 / -1;
    grid-row: 2;
}
.title{
    display: flex;
    background: rgba(219,219,219,0.7);
    height: 128px;
    justify-content: center;
    align-items: center;
    font-family: 'Oswald';
    text-align: center;
    font-size: 2rem;
    height: 128px;
    width: 448px;
}
/* 5 columns for subgrid and 4 rows */
main{
    display: grid;
    background-color: rgba(0,0,0,0);
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr);
    grid-template-rows: minmax(auto, 470px) minmax(auto, 326px) minmax(auto, 72px) minmax(auto, 200px);
}
.picture1{
    grid-row: 1;
    grid-column: 1 / 3;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
.picture2{
    grid-row: 1;
    grid-column: 4 / -1;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
.text{
    grid-row: 2;
    grid-column: 1 / -1;
    color: black;
    font-size: 35px;
    font-family: 'Crimson Text';
    border: 3px;
    border-color: black;
    border-style: solid;
}
.foam-ball{
    grid-row: 3;
    grid-column: 1;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
.red-ball{
    grid-row: 3;
    grid-column: 2;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
.orange-ball{
    grid-row: 3;
    grid-column: 3;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
.green-dot-ball{
    grid-row: 3;
    grid-column: 4;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
.yellow-ball{
    grid-row: 3;
    grid-column: 5;
    text-align: center;
    font-size: 30px;
    font-family: 'Oswald';
}
footer{
    background-color: #DBDBDB;
    grid-column: 1 / -1;
    grid-row: 5;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding-top: 10px;
}