:root {
    --dk-color:#588157;
    --mid-color:#a3b18a;
    --lt-color:#dad7cd; 
    --dkest-color:#394b41;
    --accent:#3a5a40;
}


/* GENERAL */

html, body {
    margin:0;
    padding:0;
    min-height:100%;
    font-family:Verdana, sans-serif;
    font-size:13px;
    background-image:url('gr.jpg');
    background-repeat:repeat;
    color:var(--dkest-color);
}

body a {
    color:var(--accent);
    font-weight:bold;
}


/* MAIN CONTAINER */

#container {
    max-width:900px;
    margin:15px auto 0;
    background-color:var(--lt-color);
}


/* HEADER */

#header {
    width:100%;
    background-color:var(--mid-color);
    border:1px solid var(--dkest-color);
    box-sizing:border-box;
}

.title {
    text-align:center;
    font-size:35px;
    font-style:italic;
    color:var(--dkest-color);
}


/* NAVIGATION */

.navbar {
    width:100%;
    background-color:var(--lt-color);
    border:1px solid var(--dkest-color);
    border-top:none;
    box-sizing:border-box;
    padding:5px 0;
    text-align:center;
}

.navbar ul {
    list-style:none;
    margin:0;
    padding:0;
}

.navbar li {
    display:inline-block;
}

.navbar a {
    display:block;
    text-decoration:none;
    color:var(--accent);
    font-size:19px;
    margin:0 20px;
    padding:5px;
}

.navbar a:hover {
    background-color:var(--mid-color);
}


/* PAGE LAYOUT */

.wrapper {
    display:flex;
    width:100%;
    box-sizing:border-box;
}


/* LEFT SIDEBAR */

#left-sidebar {
    width:197px;
    flex-shrink:0;
    border:1px solid var(--dkest-color);
    border-right:none;
    background-color:var(--lt-color);
    box-sizing:border-box;
}


/* MAIN CONTENT */

.main-content {
    flex:1;
    min-width:0;
    border:1px solid var(--dkest-color);
    background-color:var(--lt-color);
    box-sizing:border-box;
    overflow:hidden;
}


/* SECTION TITLE */

.section-title {
    text-align:center;
    font-weight:bold;
    padding:5px;
    background-color:var(--mid-color);
    color:var(--dkest-color);
    border-bottom:1px solid var(--dkest-color);
}


/* CONTENT */

.content {
    padding:10px;
    box-sizing:border-box;
    overflow:hidden;
}


h1, h3, h5 {
    color:var(--dk-color);
}

h2, h4, h6 {
    color:var(--accent);
}


p {
    padding:5px;
}


/* PDF LIST */

ul.list {
    padding-left:20px;
}

ul.list li {
    padding-bottom:8px;
}



/* =========================
   ARTWORK GALLERY
   ========================= */


.gallery-item {
    width:100%;
    max-width:100%;
    margin:20px 0;
    padding:10px;

    border:2px solid var(--dkest-color);
    border-radius:8px;

    text-align:center;

    box-sizing:border-box;
    overflow:hidden;
}


/* IMAGE SIZE CONTROL */

.gallery-item img {
    width:80%;
    max-width:450px;
    height:auto;

    display:flex;
    margin:0 auto 15px;

    border:3px solid var(--dk-color);
    border-radius:6px;

    box-sizing:border-box;
}


.gallery-item h3 {
    margin:10px 0;
}


.gallery-item p {
    margin:0;
    text-align:center;
}



/* FOOTER */

#footer {
    text-align:center;
    padding:5px;
}

#footer p {
    background:white;
    width:160px;
    margin:auto;
}



/* HIDE RIGHT SIDEBAR */

#right-sidebar {
    display:none;
}



/* SCROLLBAR */

.scroll::-webkit-scrollbar {
    width:10px;
    background:#f2b1a4;
}

.scroll::-webkit-scrollbar-thumb {
    background:var(--dk-color);
}

.scroll::-webkit-scrollbar-track {
    background:var(--lt-color);
}



/* TEXTAREA */

textarea {
    background-color:var(--dkest-color);
    color:var(--lt-color);
}



/* MOBILE */

@media only screen and (max-width:917px) {

    .wrapper {
        flex-direction:column;
    }


    #left-sidebar {
        order:2;
        width:100%;
        border-right:1px solid var(--dkest-color);
    }


    .main-content {
        order:1;
        width:100%;
    }


    .navbar a {
        font-size:16px;
        margin:5px;
    }


    .gallery-item img {
        width:95%;
        max-width:100%;
    }

}