* {
    margin: 0;
    padding: 0;

}


body{
    background-image: url(../img/hall.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    overflow: hidden;

}
img{
    width: 20%;
}
body #dreng{
    position: relative;
    display: flex;
    justify-content: center;
    animation-name: dreng;
    animation-duration: 5s;
    bottom: -550px;
}

body #ansigt{
  position: relative;
  display:flex;
  justify-content: center;
  display: flex;
  bottom: 200px;
  animation-name: ansigt;
  animation-delay: 15s;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes ansigt{
  from{
    scale: auto;
    opacity: 1;
  }
  to{
    scale: 600%;
    opacity: 1;
  }
}
body #bold{
  position: relative;
  left: 49.3vw;
  top: 40vh;
  z-index: -1;
  animation-name: bold;
  animation-duration: 8s;
  animation-delay: 5s;
  width: 100px;
  height: auto;
  opacity: 0;
  animation-fill-mode: forwards;
}

body #piger{
  position: relative;
  left: 30.5vw;
  margin-top: 4.5%;
  animation-name: piger;
  animation-duration: 2s;
  animation-delay: 10s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.piger{
  width: 600px;
  display: flex;
  justify-content: center;
}
@keyframes piger{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes bold{
  from{
    top: 25vh;
    width: 50px;
    opacity: 1;
  }
  to{
    top:40vh;
    width: 100px;
    opacity: 1;
  }
}

@keyframes dreng{
    from{
        bottom: -900px;
    }
    to{
        bottom: -550px;
    }
}

 #arro {
  rotate: 90deg;
  width: 4%;
  height: auto;
  position: relative;
  top: -130px;
  left: 60px;
 }