/* general styles */



*,

*:before,

*:after {

    box-sizing: border-box;

}



html {

    font-size: 100%;

}



body {

    color: #5A5959;

    font-size: 100%;

}



ul {

    list-style: none;

    padding: 0;

    margin: 0

}



a {

    text-decoration: none;

    transition: 0.3s;

    color: #5A5959;

}



a:focus {

    outline: none;

}



a:hover {

    color: black;

    background-color: #FFF8BB;



}





/* typography */



h1,

h2,

h3,

h4,

h5,

h6,

p,

li {

    font: normal 19px/32px 'PT Serif', serif;

}



h1 {

    font: bold 47px/62px 'PT Serif', serif;

    letter-spacing: -0.06rem

}





header nav li,

header nav li a {

    font: bold 20px/36px 'PT Serif', serif;

}





header div li,

header div li a {

    font: bold 15px/20px 'PT Serif', serif;

    margin-bottom: 15px;

}



header div h3 {

    font: bold 20px/20px 'PT Serif', serif;

    margin-bottom: 15px;

    color: #0DB18A;

}



aside p {

    font: normal 16px/22px 'PT Serif', serif;

    margin-top: 0;

}



p:first-of-type,

img:first-of-type {

    margin-top: 0;

}



/* layout */



body {

    display: grid;

    grid-template-columns: 180px 960px;

    justify-content: center;

    margin: 40px 0;

    grid-gap: 30px;

}





header div {

    margin-top: 560px;

}



article {

    display: grid;

    grid-template-columns: 600px 330px;

    grid-column-gap: 30px;

}



article section:first-of-type {

    grid-column: span 2;

}