html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
}

/* open-sans-regular - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'),
       url('./fonts/open-sans-v34-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('./fonts/open-sans-v34-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: black;
  box-sizing: border-box;
  /* background-image: url(pexels-sindre-strøm-1175136.jpg); */
  /* background-size: cover; */
  /* background-position: bottom center; */

}

#myBild {
  width: 100vw;
  object-fit: cover;
  object-position: bottom center;
  position: relative;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 20px;
  left: 0;

  max-width: 80vw;
  max-height: 80vh;
  margin: 1rem auto;
  padding: 2em;
  /*border: 1px dotted red;*/
  background: linear-gradient(to bottom, #eaeaea, white);
  border-radius: 20px;
  opacity: 0.7;
  
  animation-name: einAusBlenden;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

#info-bild {
  font-size: medium;
  margin: auto 0 0 0;
}

@keyframes einAusBlenden {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0.7;
  }
}