@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

@font-face {
  font-family: Bisney;
  src: url(./fonts/Bisney.otf);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  /* background-image: url(https://media.wallpaperchill.com/pink-wallpapers/pink-background-wallpaper-s35.jpg); */
  background-color: #fdd2bf;
  background-repeat: no-repeat;
  background-size: cover;
}

#wrap {
  width: 450px;
  height: 600px;
  margin: 25px auto;
  background-color: #fff;
}

header {
  height: 80px;
  text-align: center;
  background-color: #fa9a9a;
}

header h1 {
  /* font-family: Hoefler Text; */
  font-family: Bisney;
  letter-spacing: 2.5px;
  padding: 15px 0;
  font-size: 40px;
  color: #cd0a0a;
}

main img {
  display: block;
  height: 340px;
  margin: 10px auto;
}

main p {
  /* font-family: Hoefler Text; */
  font-family: "Lobster", sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 0 40px;
}

footer {
  height: 60px;
  text-align: center;
  background-color: #fa9a9a;
}

footer h3 {
  /* font-family: Hoefler Text; */
  font-family: Bisney;
  font-size: 24px;
  letter-spacing: 1.5px;
  color: #cd0a0a;
  padding: 15px 0;
}

.heart {
  width: 65px;
  height: 65px;
  background-image: url(https://www.freeiconspng.com/thumbs/love-png/love-png-5.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -20%;
  left: 83%;
  opacity: 0.7;
  animation: hearts 5s linear infinite 2s;
  z-index: 9999;
}

#h2 {
  width: 45;
  height: 45px;
  left: 31%;
  opacity: 0.7;
  animation: hearts 7s linear infinite 9.6s;
  transform: rotate(17deg);
}

#h3 {
  width: 35px;
  height: 35px;
  left: 95%;
  opacity: 0.7;
  animation: hearts 6s linear infinite 8s;
  transform: rotate(29deg);
}

#h4 {
  width: 40px;
  height: 40px;
  left: 4%;
  opacity: 0.7;
  animation: hearts 5s linear infinite 11s;
  transform: rotate(35deg);
}

#h5 {
  width: 65px;
  height: 65px;
  left: 14%;
  opacity: 0.7;
  animation: hearts 7s linear infinite 14s;
  transform: rotate(17deg);
}

#h6 {
  width: 59px;
  height: 59px;
  left: 73%;
  opacity: 0.7;
  animation: hearts 4.8s linear infinite 17s;
  transform: rotate(6deg);
}

#h7 {
  width: 48px;
  height: 48px;
  left: 18%;
  opacity: 0.7;
  animation: hearts 5.5s linear infinite 20s;
  transform: rotate(23deg);
}

#h8 {
  width: 65px;
  height: 65px;
  left: 11%;
  opacity: 0.7;
  animation: hearts 5s linear infinite 1.8s;
  transform: rotate(330deg);
}

#h9 {
  width: 51px;
  height: 51px;
  left: 61%;
  opacity: 0.6;
  animation: hearts 5.9s linear infinite 14s;
  transform: rotate(350deg);
}

@keyframes hearts {
  from {
  }
  to {
    top: 130%;
  }
}