/* 5 rows and 3 columns for main grid */
#wrapper{
    background-color: #fff;
    display:grid;
    grid-template-columns: 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);
}
.purple-box{
    background-color: rgba(63,63,204,0.3);
    grid-column: 1 / -1;
    grid-row: 1;
   } 


nav{
    background-color: rgba(229,227,35,0.3);
    grid-column: 2;
    grid-row: 1;
}
nav a{
    text-decoration: none;
    color:black;
    padding: 1rem 0rem;
    display:block;
    text-align: center;
}
nav ul{
    margin: 0px;
    padding: 0px;
    display:flex;
    list-style: none;
    gap: 20px;
}
nav ul li{
    width: 100%;
}
header{
    background-color: rgba(225,31,31,0.3);
    grid-column: 1 / -1;
    grid-row: 2;
}
main{
    background-color: rgba(56,200,37,0.3);
    grid-column: 2;
    grid-row: 4;

}
footer{
    background-color: rgba(171,42,203,0.3);
    grid-column: 1 / -1;
    grid-row: 5;
}