/*MAIN CSS*/

body {
background-color: #fbf5ee;
}

#header {
width: 100%;
z-index: 9999;
position: sticky;
    padding: 15px 25px;
}

#name,
#menu {
display: inline-block; 
vertical-align: middle;
    font-size: inherit;
}

#name {
width: 30%;
}

#name a {
        font-weight: normal;
    font-size: 24px;
}

#menu {
width: 68%;
}


#name a,
#menu ul li {
font-family: "Prata", serif;
color: #000;
text-decoration: none;
}

#menu {
text-align: right;
}

#menu ul {
list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

#menu ul li {
display: inline;
margin: 0 10px;
}

#menu ul li a {
    color: #000;
    font-size: 14px;
}

#menu ul li a.active {
    text-decoration: underline;
}



#main-content {
position: relative;
padding: 2% 8% 5% 8%;
    text-align: center;

}

#main-content h2 {
    text-align: left;
    border-top: 1px solid #000;
    padding-top: 15px;
    margin: 50px 15px 50px 15px;
    font-size: 26px;
    font-family: "Prata", serif;
}

#main-content img {
max-width: 100%;
margin: 0 auto;
text-align: center;
height: auto;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


.narrow-feature {
    margin: 0 auto;
    width: 60%;
}


#main-content.home-image.mobile {
    display: none;
    padding: 8% 0;
}


#main-content .work-grid img {
    max-width: 100%;
    height: auto;
}

.work-grid {
    margin: 25px 0;
}

.back {
    text-align: left;
}

.back a {
    font-family: "Prata", serif;
    color: #000;
    padding-left: 15px;
}

#about {
    text-align: left;
    padding-left: 15px;
    padding-top: 25px;
}

#about h2 {
  margin-left: 0;
}

#self-portrait {
    padding: 25px;
}

#footer {
    text-align: center;
    padding: 25px;
    font-family: "Prata", serif;
    font-size: 12px;

}


@media screen and (max-width: 1023px) {
    .work-grid-item {
        margin: 10px auto;
        text-align: center;
    }
    
    #header {
        margin-top: 25px;
    }
    
    #name,
    #menu {
        width: 100%;
        text-align: center;
        display: block;
        display: block;
    }
    
    #main-content h2 {
        font-size: 24px;
    }
    
    #main-content {
        padding: 0 4%;
    }
    
    #main-content.home-image {
        padding: 0;
    }
    
    #main-content.home-image.desktop {
        display: none;
    }
    
    #main-content.home-image.mobile {
        display: block;
    }
    
    #self-portrait {
    padding: 25px 50px 0 50px;
}
    
    #self-portrait img {
        width 80%;
        margin: 0 auto;
    }
    
    #about h2 {
        margin-top: 25px;
    }
    
    .work-grid {
    margin: 0;
}
    
    .work-grid div {
        margin: 10px 0;
    }
}