/*  HEADER --------------------------------------------------------------- */

/* MAIN-NAV-BAR -------------------------------- */

#main-nav-bar{
    display: flex;
    list-style: none;
    justify-content: right;
    box-shadow: rgba(0, 0, 0, 0.644) .1rem 0.1rem .25rem .1rem ;
    padding-right: 1rem ;

}

#main-nav-bar li{
    display: inline-block;
    height: 100%;
    margin: 0;
}

#main-nav-bar li a{
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 1rem;
    text-decoration: none;
    color: #222;
}

#main-nav-bar li a:hover{
    background-color: #ddd;
}    

/*  BLOG -------------------------------------------------------------------------- */


.blog{
    width: 100%;
    display: flex;
}

/* LEFT COLUMN -------------------------------- */

#tags-filter{
    display: block;
    width: 20%;
}

#content{
    width: 80%;
}


/*  ARTICLES --------------------------------------------------------------- */

/* ARTICLES LIST -------------------------------- */

.articles-list{
    list-style: none;
}

.articles-list li{
    margin: 1rem;
    padding: 1rem;
    border-radius: .5rem;
    background-color: rgb(99, 221, 181);
}

.articles-list li:hover{
    cursor: pointer;
    background-color: aquamarine;
}

/* ARTICLES CONTENT --------------------------- */

.article{
    margin: 1rem;
    padding: 1rem;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.644) .1rem 0.1rem .25rem .1rem;

}

.article h3 {
    margin-bottom: 0rem;
}

.article .author {
    font-weight: bold;
    margin: 0 1rem 0 0;
}

.article .created-at {
    font-style: italic;
    margin: 0 1rem 0 0;
}

.article .article-body{

    margin: 3rem 1rem;
}

.article p{
    margin: 0;
}

.article img{
    margin: 1rem 0;
    box-shadow: rgba(0, 0, 0, 0.651) .25rem .25rem .12rem ;
}

/* PAGE NAV --------------------------------------------------------- */

.page-nav{
    margin: 1rem;
    text-align: right;
}


/* FILTERS ---------------------------------------------------------- */
#tags-list{
    list-style: none;
    padding: 1rem;
}

#tags-list li{
    display: inline-block;
    background-color: mediumturquoise;
    padding: .25rem 1.5rem;
    margin: .5rem;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.644) .15rem .15rem .15rem;
}

#tags-list li:hover{
    cursor: pointer;

}