html,
body {
  margin: 0px;
}

body {
  background-color: lightgray;
}

#main {
  position: relative;
  margin: 50px auto;
  padding: 5px;
  width: 360px;
  height: 660px;
  background-color: lightblue;
  border: 5px solid blue;
  border-radius: 15px;
}

span {
  color: blue;
}

#photo {
  margin: 20px auto;
  width: 320px;
  height: 600px;
  margin-top: 20px;
  background-color: white;
  background-size: cover;
  border: 2px solid darkorchid;
  border-radius: 10px;
}

button {
  position: absolute;
  top: 300px;
  width: 25px;
  height: 70px;
  font: 12pt arial,tahoma,sans-serif;
  text-align: center;
}

button:hover {
  filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
}

.left {
  left: 5px;
}

.right {
  right: 5px;
}

.animated1 {
  animation: first 1s;
  width: fit-content;
}

@keyframes first {
  0% {
    transform: translateY(-60px) rotateX(0.7turn);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.animated2 {
  animation: second 1s;
  width: fit-content;
}

@keyframes second {
  0% {
    transform: translateX(230px) rotateZ(90deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.animated3 {
  animation: third ease-out 1s;
  width: fit-content;
}

@keyframes third {
  0% {
    transform: rotate(-15deg);
    opacity: 0.5;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}