body {background-image: url("source_materials/blackbox.jpg");
      background-repeat: repeat-y;
      background-size:30vw auto;}

/*header styles*/

h1  {font-family: Helvetic, Arial;
    font-size: 40px;
    padding-top: 5em;}

h2  {font-family: helvetic,arial;
    font-size: 24px;}

/*paragraph styles*/
p   {font-family: arial;
    font size: 14px;}

/*footer styles*/
footer  {font-family: helvetic, arial;
        font-size: 10px;
        
        bottom: 0;}

/*image styles*/

.container {
  position: relative;
  float: left;
  margin: 7em 1em 1em 7em;
  width: 35%;}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,.6);
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  font-family: helvetica;
  font-weight: bold;
  display: block;
  color: white;
  font-size: 24px;
  width: 100%;
  height: 100%;
  padding-top: 50%;
/*  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);*/
  text-align: center;
  text-decoration: none;
}

/* unvisited link */
a:link {
  color: white;}

/* visited link */
a:visited {
  color: white;}

/* mouse over link */
a:hover {
  color: #bcd6ff;}

/* selected link */
a:active {
  color: white;}

/*navagation styles*/
nav {font-family: helvetica, arial;
    font-size: 14px;
    }

ul {list-style-type: none;
      margin: 0;
      display: block;
      background-color: black;
      padding: 10px;
      text-align: right;
      color:white;}