* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-size: 0;
}

@font-face {
  font-family: MarckScript;
  src: url(../add/fonts/MarckScript-Regular.ttf);
}
body {
  min-height: 100vh;
  background-image: radial-gradient(white 50%, lightblue 90%);
}
body .envelope {
  width: 1250px;
  height: 750px;
  position: relative;
  left: calc(50% - 625px);
  top: calc(50vh - 214.2857142857px);
  background-image: url(../add/pictures/envelope.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(1deg);
  box-shadow: -100px 100px 100px rgba(0, 0, 0, 0.5);
  border-radius: 2px 2px 10px 10px;
}
body .envelope .photo {
  text-align: center;
  clip-path: polygon(0 0, 50% 56%, 100% 0);
}
body .envelope .photo img {
  width: 100%;
  height: 750px;
  object-fit: cover;
}

.photo:hover {
  position: relative;
  clip-path: polygon(0 0, 50% 56%, 100% 0);
  cursor: pointer;
  animation-name: my-animation;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes my-animation {
  0% {
    top: 0;
    clip-path: polygon(0 0, 50% 56%, 100% 0);
  }
  6% {
    top: -15px;
    clip-path: polygon(0 0, 0 2.125%, 50% 58.063%, 100% 2.125%, 100% 0);
  }
  12% {
    top: -30px;
    clip-path: polygon(0 0, 0 4.25%, 50% 60.125%, 100% 4.25%, 100% 0);
  }
  25% {
    top: -62px;
    clip-path: polygon(0 0, 0 8.5%, 50% 64.25%, 100% 8.5%, 100% 0);
  }
  50% {
    top: -125px;
    clip-path: polygon(0 0, 0 17%, 50% 72.5%, 100% 17%, 100% 0);
  }
  75% {
    top: -188px;
    clip-path: polygon(0 0, 0 25.5%, 50% 80.75%, 100% 25.5%, 100% 0);
  }
  100% {
    top: -250px;
    clip-path: polygon(0 0, 0 34%, 50% 89%, 100% 34%, 100% 0);
  }
}

/*# sourceMappingURL=style.css.map */