* {
    box-sizing: border-box;
}


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #000;
    color: #222;
}


h2 {
    color: #feed01;
}


header {

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;

}


.logo img {

    width: 30vw;
    max-width: 450px;
    min-width: 180px;
    height: auto;
    border-radius: 3px;

}



/* TOP AREA WITH SIDEBAR */

.container1 {

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 4fr 1fr;

    gap: 20px;

    padding-bottom: 30px;

}



/* ARTICLES BELOW */

.container2 {

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

}



/* ARTICLE LIST */

.articles {

    display: flex;
    flex-direction: column;
    gap: 30px;

}


.blog-post {

    background: #000;
    color: #fff;

    padding: 25px;

    border: 1px solid #fff;
    border-radius: 3px;

}


.blog-post h2 {

    margin-top: 0;

}


.blog-post .date {

    font-size: 0.85rem;
    opacity: 0.7;

    margin-bottom: 20px;

}

#full-article-container {

    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

}
/* SIDEBAR */

.sidebar {

    background: #000;
    color: #fff;

    padding: 25px;

    border: 1px solid #fff;
    border-radius: 3px;

}



/* LINKS */

a {

    color: #fff;

}



/* MOBILE */

@media (max-width: 768px) {


    .container1 {

        width: 95%;
        grid-template-columns: 1fr;

    }


    .container2 {

        width: 95%;

    }


    .logo img {

        width: 90vw;
        max-width: none;

    }

}