.image-container {
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 100vh;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: translate3d(0,0,0);
}

#imagecredit {
  clear: both;
  position: absolute;
  right: 1%;
  bottom: 1%;
  font-size: 12px; /* Responsive font size */
  /* position:fixed;right:0%;bottom:1%; */
  transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);
  background-color: white;
  color: black;
}

.text {
  font-family: Verdana, sans-serif;
  background-color: white;
  color: black;
  font-weight: bold;
  font-size: 10vw; /* Responsive font size */
  margin: 0 auto; /* Center the text container */
  padding: 10px;
  width: 70%;
  text-align: center; /* Center text */
  position: absolute; /* Position text */
  top: 50%; /* Position text in the middle */
  left: 50%; /* Position text in the middle */
  transform: translate(-50%, -50%); /* Position text in the middle */
  mix-blend-mode: screen; /* This makes the cutout text possible */
}

.smalltext {
  background-color: white;
  color: black;
  font-size: 14px; /* Responsive font size */
  font-weight: bold;
  padding: 10px;
  width: 50%;
  text-align: center!important; /* Center text */
  margin-left: auto!important;
  margin-right: auto!important;
}

a {
  background-color: white;
  color: black;
}