@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
*{
    box-sizing: border-box;
}
::selection, ::-moz-selection{
    background: #9b59b6;
}

a::selection, a::-moz-selection{
    color: #000;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #000;
    color: #FFF;
}

h1.h2,h3,h4,h5{
    color: #B7b7B7;
}

header, footer, div.page, .search {
    width: 760px;
    margin: 0 auto;
    padding: 20px 30px;
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

a{
    text-decoration: none;
    color: #8e44ad;
}

a:hover{
    color: #9b59b6;
}

a.featured{
    color: #f1c40f;
    transition: all 0.6s;
}
a.featured:hover{
    color: #2980b9;
}

header h1 {
    color: #B7b7B7;
    margin: 0;
    font-weight: 700;
    font-size: 42px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 15px 0 0;
    padding: 0;
}

.blog-post{
    margin-bottom: 40px;
}

.blog-post h2{
    padding: 0;
    margin: 0;
}

h2.page-title{
    text-align: center;
}

.blog-post .meta{
    margin-top: 0;
}

.blog-post section{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
}

.blog-post .image{
    width: 20px;
    height: 100%;
} 

.pagination{
    text-align: center;
}

footer{
    text-align: center;
    margin-top: 15px;
}


@media screen and (max-width: 760px){
    header, footer, div.page, .search {
        width: 100%;
        padding: 0;
    }
    header{
        flex-direction: column;
        padding-bottom: 20px;
    }
}