body, html {
height: 100%;
}

/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
/* Set a specific height */
height: 100%;
width: 100%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}

/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2vw;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
color: white;
}
.goto {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}
.next {
  display: block;
  position: absolute;
  right: 0px;
  color: #000;
  padding: 8px 16px;
  font-size:50px;
  text-decoration: underline;
}
/* Change the link color on hover */
.next:hover {
  background-color: #555;
  color: white;
}	
.previous {
  display: block;
  position: absolute;
  left: 0px;
  color: #000;
  padding: 8px 16px;
  font-size:50px;
  text-decoration: underline;
}
/* Change the link color on hover */
.previous:hover {
  background-color: #555;
  color: white;
}