/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("ellen.jpg");
  background-size: cover; 
  color: black;
  font-family: Verdana;
  background-repeat: no-repeat;
  background-color: #0c1d17;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  width: 30%; /* Full width (cover the whole page) */
  height: 30%; /* Full height (cover the whole page) */
  top: 75%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

@media (min-width: 800px) {
  body {
    background-size: 100% auto; 
  }
  #overlay {
    top: 50%;
    height: 60%;
    width: 20%;
  }
}

.menu {
  width: 30%;
  text-align: center;
}

h1, h2, h3, h4, p, a {
  color: white; 
  text-shadow: 4px 4px 8px lightgray;
}