a
{
    color:              #462b2a;
    text-decoration:    none;
}

nav
{
    margin:             10px;
    list-style-type:    none;
    margin-top:         50px;
}

li
{
    font-size: 1.2em;
}

.li-menu
{
    list-style-type:    none;
    background-color:   #deaf51;
    font-size:          1.2em;
    height:             50px;
    line-height:        50px;
    margin-top:         10px;
    text-align:         center;
    color:              #462b2a;
    cursor:             pointer;
}

h1
{
    color:              #ce4c00;
    font-size:          1.8em;
}

h2
{
    color:              #462b2a;
    font-size:          1.5em;
}

p
{
    font-size:          1.2em;
}

#left-panel
{
    position:           fixed;
    height:             100%;
    width:              20%;
    min-width:          200px;
}

#logo-img
{
    width:              80%;
    margin-top:         10px;
}

#logo-img-r
{
    width:              80%;
    margin-top:         10px;
}

#central-container
{
    position:           fixed;
    left:               max(20%, 200px);
    right:              0px;
    height:             100%;
    background-color:   #fbf5e9;
    overflow:           auto;
    text-align:         center;
}

#last-articles-container
{
    list-style-type:    none;
    text-align:         center;
}

.central-container-title
{
    font-size:          1.5em;
    margin-top:         40px;
    margin-bottom:      0px;
    color:              #ce4c00;
    text-align:         center;
}

.category-menu-title
{
    margin:             20px;
    font-size:          1.5em;
    margin-top:         40px;
    color:              #ce4c00;
}

.article
{
    display:            inline-block;
    background-color:   white;
    width:              70%;
    min-width:          400px;
    margin-top:         20px;
    line-height:        normal;
    height:             170px;
    overflow:           hidden;
}

.article-grid
{
    display:            flex;
    height:             150px;
    background-color:   white;
    margin:             10px;
}

.article-grid:hover
{
    cursor:             pointer;
}

.article-thumbnail
{
    width:              150px;
    object-fit:         contain;
    margin-left:        20px;
}

.article-title
{
    font-size:          1.2em;
    color:              #ce4c00;
}

.article-subtitle
{
    font-size:          1em;
    color:              #462b2a;
}

.article-summary
{
    text-align:         justify;
    color:              #462b2a;
    margin-top:         10px;
    font-size:          0.85em;
    
}

.central-container-subtitle
{
    text-align:         center;
    font-size:          1.2em;
    color:              #462b2a;
}

.central-container-summary
{
    display:            inline-block;
    background-color:   white;
    width:              70%;
    margin:             auto;
    margin-top:         40px;
    padding:            20px;
    text-align:         justify;
}

.central-container-content
{
    display:            inline-block;
    background-color:   white;
    width:              70%;
    margin:             auto;
    margin-top:         20px;
    padding:            20px;
    text-align:         justify;
}

@media (max-width: 500px)
{
    #central-container
    {
        top:                150px;
        left:               0px;
        bottom:             0px;
        height:             auto;
    }

    #left-panel
    {
        position:           fixed;
        height:             150px;
        width:              100%;
    }

    #logo-img
    {
        width:              40%;
    }

    nav
    {
        margin:             0px;
        margin-top:         0px;
    }

    li
    {
        display:            inline;
        margin-left:        5px;
        padding:            3px;
    }

    .central-container-title
    {
        font-size:          1.5em;
        margin-top:         10px;
    }

    .article
    {
        width:              90%;
        min-width:          0px;
    }

    .article-thumbnail
    {
        display:            none;
    }

    .category-menu-title
    {
        margin-top:         10px;
    }

    #return-to-home-button
    {
        display:            none;
    }

    #return-to-category-button
    {
        margin-top :        -50px;
        width:              150px;
        font-size:          1em;
        height:             20px;
        line-height:        20px;
        margin-left:        200px;
    }
}