:root{
    --main-theme-color: #AC1515;
    --text-on-theme-color: #f4f4f4;
    --navbar-focus-color: #FFF;
}

.navbar{ background:var(--main-theme-color);}

.nav-link , .navbar-brand{ color:var(--text-on-theme-color); cursor: pointer;}

.navbar-brand:hover {color: #e0e0e0;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: var(--text-on-theme-color); color: var(--main-theme-color); }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:var(--navbar-focus-color);}

#about { margin-top: 50px;}

#content_text {
    margin-top: 50px;
    margin-bottom: 100px;
}

#spacer { height: 10px; background:var(--main-theme-color);}

/*header style*/
/*
.header{
 background-image: url('resources/shuteye.jpg');
 background-attachment: fixed;
 background-size: auto;
 background-position: top;
 background-repeat: no-repeat;
}
*/

.header{
background: url('resources/shuteye_cropped.jpg') center top/auto 100% no-repeat !important;
height: 50vh !important;
}

#headshot img{
    width: 100%;
    border-radius:50%;
    Margin-top:100px;
}

#content_img{
    Margin-top:50px;
    Margin-bottom:50px;
}

#content_img img{
    width: 100%;
    border-radius:25px;
    Margin-top:25px;
}

#footer{
    Margin-top: 100px;
}

.portfolio{
    Margin-top:50px;
}

.thumbnail{
    width: 100%;
}

.hovereffect {
    position:relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.overlay{
    /*position:absolute;
    top:0;
    left:0;*/
    opacity:0;
}

.hovereffect p{
    position:relative;
    text-align: center;
    margin-top: 10px;
}

.hovereffect:hover .thumbnail{
    opacity:0.5;
}

.hovereffect:hover .overlay{
    opacity:1;
    /*margin-top: 10px;*/
}

/* You use hashtags for id's, .'s for classes, and nothing for HTML elements like "p" */