*{
    font-family:arial;
    margin:0;
}

body{
    background-color: rgba(161, 161, 200, 0.6);
}

#topBar, #topBarFull {
    position: relative; /* make ::after anchor to this */
    height: 300px;
    background-image: url('../Images/bg.jpg');
    background-size: cover;
    background-position: bottom;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* ensures overlay doesn’t spill out */
}

#topBarFull{
    height:100vh;
}

#topBar::after {
    content: "";
    position: absolute;
    top: 50px;   /* anchor to all edges */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1; /* sits above background */
}

#topBarFull::after{
    content: "";
    position: absolute;
    top: 0px;   /* anchor to all edges */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1; /* sits above background */
}

/*#topBar:hover::after{*/
/*    background: rgba(0,0,0,0.8);*/
/*    transition:all 0.1s;*/
/*}*/

#topBar > * {
    position: relative;
    z-index: 2; /* bring text/nav above overlay */
}

#topBarFull > * {
    position: relative;
    z-index: 2; /* bring text/nav above overlay */
}


.title{
    font-size:30px;
    width:250px;
}

#topBar nav{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-around;
    align-items:center;
    position:fixed;
    top:0;
    width:100%;
    background: rgba(0,0,0,0.6);
}

#topBar nav:hover{

}

.navOption{
    min-width:100px;
    height:50px;
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    text-decoration:none;
}

.navOption:hover{
    font-size:125%;
    transition:all 0.05s;
}

main{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}


/*Blog post styling.*/
.blogPost {
    margin-top: 25px;
    padding: 15px;
    background-color: #eee;
    box-shadow:
            1px 2px 2px hsla(0, 0%, 14%, 0.33),
            2px 4px 4px hsla(0, 0%, 14%, 0.33),
            3px 6px 6px hsla(0, 0%, 14%, 0.33);
    width: 80%;
    min-width: 500px;
    overflow: auto;  /* clears the float */
}

.blogPost img {
    float: left;
    max-width: 100px;
    margin-right: 10px;
    margin-bottom: 5px;
}

.blogPost h1 {
    font-size: 250%;
}

.blog_Top{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:center;
}

footer{
    height:500px;
    background-color:black;
    color:white;
    margin-top:250px;
    display:flex;
    justify-content: center;
    align-items:center;
}