body { background-color: black; color: white; }

h1 { color: darkgray; text-align: center; }
h3 {color: silver; }
p { color: darkgray; font-size: 16px;}


/* Nav Bar */
.main-nav {
font-family: serif;
font-size: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}

.main-nav li { float: left; }
.main-nav li a {
display: block;
color: #EEEEEE;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}

.main-nav a:hover {
  color: red;
}


/* Side Nav for Blog links */
/* .sideNav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 75%;
  left: 5px;
  background: white;
  overflow-x: hidden;
  padding: 8px 0;
}

.sideNav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #EEEEEE;
  display: block;
}

.sideNav a:hover {
  color: red;
} */

/* Styling of the menu <ul> container for blog entries */
.blogListNav {
list-style-type: none;
  width: 10%; /* width of blog menu */
  z-index: 1;
  top: 75%;
  left: 5px;
  background: black;
  overflow-x: hidden;
  padding: 10% 0;
}

.blogListNav a {
  padding: 1% 1% 1% 1%;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: lightgray; /* #EEEEEE after test */
}

.blogListNav a:hover {
  color: red;
}

/* Styling of the menu list of blog entries themselves */
#menuDiv {
height:400px;
width:400px;
float: right;
border:1px solid #FF0000;
font:16px/26px Georgia, Garamond, Serif;
overflow:auto;
padding: 1%;
margin-right: 0%;
}


/* Displays the content of blog entry in box after it's clicked on in the menu */
#contentDiv {
height:600px;
width:85%;
position: relative;
text-align: center;
border:1px solid #FF0000;
font:16px/26px Georgia, Garamond, Serif; overflow: auto;
padding: 100px 100 200px;
margin-top: -30%;
margin-left: 10%;
margin-right: 5%;
padding-bottom: 2%;
}

#blogDiv {
position: relative;
padding: 3%;
background: rgba(0, 0, 0, 0.75);
}


/* Set fixed clawmark background */

{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.block-parallax-1 {
    overflow: hidden;
    position: relative;
}
.block-parallax-1 .parallax-bg {
    background-attachment: fixed;
    background-image: url('../images/HCC.jpg');
    background-position: 0px 0px;
    background-repeat: repeat;
    height: 100%;
    position: absolute;
    width: 100%; /* naughty code*/
    min-width: 470px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.block-parallax-1 .md-box {
    padding: 100px 100 200px;
    background: rgba(0, 0, 0, 0.75);
    position: relative;
    height: 900px;  /*height of entire box */
    text-align: left;
}

.block-parallax-1 .md-box h1 {
    color: #fff;
}

.block-parallax-2 .parallax-bg {
	background-image: url('../images/HCC.jpg');
}


/* Blog images- left justified */
.blog-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    width: 305px;
}

/*.blog-img img {
    display: block; May be unnecessary if image is centered, revisit when done
    margin: 0 auto;
}*/