/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&family=PT+Serif&display=swap');

/*BODY*/
body{
    min-width:800px;
    max-width:1500px;
    font-family: 'PT Serif', serif;
    text-align:justify;
}

/*CONTAINER*/
#container{
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 2fr 1fr 1fr;
    grid-template-areas:
    "nav nav nav"
    "a1 a1 a1"
    "a2 a3 aside"
    "a4 a4 a4"
    "a5 a5 a5";
}

/*STYLE*/
h1{font-size:1.6em;}
h2{font-size:1.4em;}
h3{font-size:1.2em;}
h4{font-size:1em; font-weight: bold;}

/*IMAGES*/
img{
    border:2px solid darkgrey;
    box-sizing:border-box;
    min-width:50px;
    max-width:350px;
}

/*NAVIGATION*/
nav{
    grid-area:nav;
    font-size:1.2em;
    font-family: 'Baloo 2', cursive;
}

nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
}

nav ul li {
    display:inline-block;
}

/*ARTICLES*/
#a1 {grid-area:a1;}
#a2 {grid-area:a2;}
#a3 {grid-area:a3;}
#a4 {grid-area:a4;}
#a5 {grid-area:a5;}

/*ASIDE*/
aside{
    grid-area: aside;
    align-self: flex-end;
}
/*SECTION*/

section {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
}