@charset "utf-8";

body > header > img {
    width: 8%;
    float:auto;
}

h1 {
    color:antiquewhite;
    font-size: 1em;
}

h2 {
    padding-left: 45%; /*creates space around an element's content*/
    font-family: cursive;
    color: pink;
}

body { /*Changes the background color to black*/
    background-color: black;
}

ul {
    margin: 0;
    padding: 0;
}
li {
    float: right; /*positioning and formatting the list to the right*/
    font-size: 2em;
    list-style-type: none; /*Removes list bullets */
}
li a {
      color: pink;
      padding: 30px;
      text-decoration: none; /*no line is drawn and any existing decoration is removed*/
      
}
a:hover {
    background-color: white;
}
/*Image Hover Overlay*/
.container { /*Responsive Fixed width container*/
    position: relative;
    width: 100%;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute; /*sit at the middle of the page content */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;/*Full height(Cover the whole page)*/
    width: 100%; /*Full width(Cover the whole page)*/
    opacity: 0; /*transparency of an element. The lower the value the more transparent*/
    transition: .10s ease;
    background-color: black;
  }
  
  .container:hover .overlay {
    opacity: 1;
  }
  
  .text {
    color: pink;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  body > footer {
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: whitesmoke;
    text-align: center;
    padding: 10px;


}

@media only screen and (max-width: 769px) {
  li {
      font-size: 1em;
  }
  li a {
    padding: 5px;
  }
  body > footer {
      font-size: 0.5em;
      padding: 5px;
  }
  h2 {
    padding-left: 25%;
  }
  .text {
    font-size: 15px;   
  }
}