body {
  background-color: black;
  overflow: hidden;
  padding:0;
}

@font-face {
  font-family: ZTBrosOskon90s;
  src: url('https://byvsen.se/typsnitt/ZTBrosOskon90s-Regular.otf');
}

.overlay-black{
    position: absolute;
    top: 0; left: 0;
    height: 100vh;
    width: 100vw;
    z-index:2;
    background-color:black;
    animation-name:fadeIn;
    animation-duration:20s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    pointer-events: none;
}

a {
  color:black;
  text-decoration:none;
}

@keyframes fadeIn {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

.berg1 {
  animation: bgScrollLeft 40s linear infinite;
  pointer-events: none;
}

@keyframes bgScrollLeft {
  from {
    transform:translateX(0%);
  }
  to {
    transform:translateX(-100%);
  }
}

.bergBak1 {
  animation: bgbScrollLeft 40s linear infinite;
  pointer-events: none;
}

@keyframes bgbScrollLeft {
  from {
    transform:translateX(100%);
  }
  to {
    transform:translateX(0%);
  }
}

.berg2 {
  animation: bgScrollLeft 60s linear infinite;
  pointer-events: none;
}

.bergBak2 {
  animation: bgbScrollLeft 60s linear infinite;
  pointer-events: none;
}

.frida {
  animation: fridaFly 40s ease-out forwards;
  pointer-events:none;
  height:7vw;
  transform:scaleX(-1);
  position:absolute;
  top:10vw;
}

@keyframes fridaFly {
  from{
    left:-20%;
  }
  to{
    left:43%;
  }
}

.saker {
  color:blue;
  position:absolute;
  bottom:0%;
  left:0%;
  width:100%;
  height:30%;
  line-height: 2vh;
  opacity:0;
  transition: opacity 0.5s ease-out;
  font-family: ZTBrosOskon90s;
}

.saker:hover {
  opacity:0.3;
}

.titel {
  text-align: center;
  font-size: 5vw;
  pointer-events:none;
  font-family: ZTBrosOskon90s;
}

.knapp {
  text-align: center;
  font-size: 5vw;
  font-family: ZTBrosOskon90s;
}