body,
html {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
div.background {
  background-image: url(images/bg.jpg);
  background-size: cover;
  display: block;
  width: 100vw;
  height: 100vh;
}

#logo {
  width: 400px;
  /* height: 200px; */
  /* border: solid 1px red; */
  position: absolute;
  left: 50%;
  opacity: 0;
  top: 0;
  /* top: 100px; */
  transform: translateX(-50%);
  /* animation-name: float; */
  /* animation: float 6s ease-in-out infinite; */
  animation: slideIn 2s 3s ease-in-out forwards,
    float 3s 0s ease-in-out infinite;
}

@keyframes slideIn {
  from {
    top: 0;
  }
  to {
    top: 100px;
    opacity: 1;
  }
}

@keyframes float {
  0% {
    /* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
    transform: translate(-50%, 0px);
  }
  50% {
    /* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
    transform: translate(-50%, -20px);
  }
  100% {
    /* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
    transform: translate(-50%, 0px);
  }
}

/* #logo img{
    width: 100%;
} */

img.card {
  display: block;
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  opacity: 0;
}

img.img1 {
  width: 300px;
  left: 0;
  top: 0;
  transform: rotate(-30deg);
  animation: fadeIn1 0.5s 0.5s ease-in forwards;
}

@keyframes fadeIn1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    left: 100px;
    top: 100px;
    transform: rotate(-10deg);
  }
}

img.img2 {
  width: 340px;
  right: 0;
  top: 0;
  transform: rotate(16deg);
  animation: fadeIn2 1s 0.5s ease-in forwards;
}
@keyframes fadeIn2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    right: 100px;
    top: 60px;
    transform: rotate(6deg);
  }
}

img.img3 {
  width: 250px;
  left: 400px;
  top: 0px;
  transform: rotate(80deg);
  animation: fadeIn3 1s 1s ease-in forwards;
}
@keyframes fadeIn3 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    left: 400px;
    top: 360px;
    transform: rotate(8deg);
  }
}

img.img4 {
  width: 280px;
  right: 400px;
  top: 0;
  transform: rotate(-28deg);
  animation: fadeIn4 1s 1.5s ease-in forwards;
}

@keyframes fadeIn4 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    right: 400px;
    top: 360px;
    transform: rotate(-8deg);
  }
}

.message {
  left: 50%;
  top: 260px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 40px;
  font-family: "Josefin Sans";
  position: absolute;
  opacity: 0;
  animation: messageFade 1s 4s ease-in forwards;
}

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