html {
    font-family: sans-serif;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 16px;
}

.main_grid {
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 0.4fr 1.5fr 0.4fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

body {
    margin: 0px;
}

/*-----------------------------------------------Header--*/


.header {
    background-color: rgb(54, 17, 102);
    text-align: center;
    color: white;
    max-height: 50px;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

/*-------------------------------------------------Nav--*/


.nav {
    height: 7vh;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
}

.nav ol li {
    display: inline-block;
}

/*-----------------------------------------------Main 1--*/

.main1 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    text-align: center;
}

.simple_grid {
    display: grid;
    grid-template-columns: auto auto auto;
    max-width: 450px;
    max-height: 450px;
    grid-gap: 5px;
    padding-bottom: 50px
}

/*-----------------------------------------------Main 2--*/

.main2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;
    text-align: center;
}

.complex_grid {    
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 5px;
    padding-bottom: 50px;
}

.main2 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.main2 :nth-child(3) {
    grid-column: 2 / span 3;
    grid-row: 1 / span 2;
}

.main2 :nth-child(6) {
    grid-column: 1 / span 2;
    grid-row: 4 / span 4;
}

.main2 :nth-child(7) {
    grid-row: 3 / span 4;
}

/*-----------------------------------------------Footer--*/

.footer {
    background-color: rgb(54, 17, 102);
    text-align: center;
    color: white;
    max-height: 50px;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 5;
}