#all {
  border:1px solid black;
  border-radius:25px;
  position: absolute;
  /* centered the gallery */
  left: calc(50vw - 500px);
  width: 1000px;
  /* adjusted height to fit content without extra space */
  height: 1000px;
  box-shadow:5px 5px 10px #999999;
  /* added background color */
  background: #ddd;
  }
  #headline {
  font-size: 3em;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-align: center;
  /* adjusted width and location to center */
  width: 400px;
  position: absolute;
  top: 30px;
  left: 300px;
  text-decoration:underline;
  }
  #thumbnails {
  position: absolute;
  top: 845px;
  left: 100px;
  /* adjusted width to convert from a column to a row */
  width: 800px;
  /* added custom height to customize images */
  /* height:auto; */
  height: 110px;
  opacity:0.5;
  }
  /* added styling to ul to center element */
  #thumbnails ul {
    padding: 10px 30px 10px 30px;
    margin: 0 auto;
  }
  #thumbnails li{
  list-style:none;
  width: 100px;
  height: 100px;
  /* added background color to make the image more visable when not hovering */
  background: #000;
  /* gave the li elements a height and width to add styles to element */
  display: inline-block;
  margin: 10px;
  }
  #thumbnails:hover{
  cursor:pointer;
  opacity:1;
  }
  .smallimg {
  width: 100px;
  /* moved margin from image to li */
  /* margin:10px; */
  float: left;
  }
  #largearea {
  position: absolute;
  /* moved element above the caption */
  top: 118px;
  /* adjusted width and position to center element */
  left: 175px;
  width: 650px;
  height: 650px;
  /* added box shadow to main image to improve visability and draw more attention. */
  box-shadow: 0 0 10px 5px;
  }
  #mainphoto {
  width: 650px;
  /* adjusted margin and position to center element */
  margin:0 auto;
  }
  #caption {
  font-size: 18px;
  font-family: Verdana, Geneva, sans-serif;
  text-align: center;
  position: absolute;
  /* adjusted margin and position to center and rearange element */
  top: 800px;
  left: 175px;
  width: 650px;
  }