body {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: url(./images/bg.jpg) no-repeat center;
  background-size: cover;
}
.copy-photo {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: .5rem;
  font-family: Arial;
  font-size: .625rem;
  color: #333;
  background: rgba(255,255,255,.5);
}
.copy-photo a {
  color: inherit;
}
main {
  max-width: 100%;
}
h1 {
  max-width: 100%;
  font-family: 'Shadows Into Light', cursive;
  font-size: 4rem;
  line-height: 2em;
  letter-spacing: .3em;
  color: #000;
  transition: letter-spacing .3s linear;
  text-shadow: 0px 5px 0px rgba(121,121,255,1);
}
h1 span {
  display: inline-block;
  animation: letras .3s ease forwards infinite;
  position: relative;
  top: 0;
  left: 0;
}
.a1 {
  animation-delay: .1s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .3s;
}
.a4 {
  animation-delay: .4s;
}
.a5 {
  animation-delay: .5s;
}
.a6 {
  animation-delay: .6s;
}
.a7 {
  animation-delay: .7s;
}
@keyframes letras {
  0% {
    top: -5px;
    left: -5px;
  }
  25% {
    top: -5px;
    left: -10px;
  }
  50% {
    top: 5px;
    left: -10px;
  }
  75% {
    top: 5px;
    left: 5px;
  }
  100% {
    top: 0;
    left: 0;
  }
}
@media (min-width: 575px) {
  h1 {
    font-size: 6rem;
  }
}
@media (min-width: 768px) {
  h1 {
    font-size: 9rem;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 12rem;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 15rem;
  }
}