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

html {
  font-size: 62.5%;
}

body {
  font-family: 'Dancing Script', cursive;
  font-weight: 400;
}

.header {
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(rgb(255, 199, 94), rgb(209, 119, 1));
  text-shadow: 0 0 1px rgb(209, 119, 1), 0 0 1px rgb(209, 119, 1),
    0 0 1px rgb(209, 119, 1);
}

h1 {
  animation: fadein 1.5s;
}

.center {
  display: flex;
  justify-content: center;
}

.main {
  font-family: 'Alegreya', serif;
  font-weight: 400;
  height: 88vh;
  padding: 0 7%;
  color: #fff;
  text-shadow: 1px 1px 3px rgb(65, 65, 65), 0 0 3px rgb(51, 51, 51),
    0 0 3px rgb(75, 75, 75);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.affirmation-text {
  animation: fadein 3s;
  position: absolute;
  top: 25%;
  padding: 0 2rem 0 2rem;
  font-size: 2.8rem;
}

.photographer {
  position: absolute;
  bottom: 10rem;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5rem;
  padding: 0 2rem 0 2rem;
  animation: moveInLeft 1.5s;
}

.link {
  text-decoration: none;
  color: rgb(190, 190, 190);
  font-family: sans-serif;
  font-size: 1.5rem;
}

.music {
  position: absolute;
  bottom: 7rem;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5rem;
  padding: 0 2rem 0 2rem;
  animation: moveInRight 1.5s;
}

audio {
  position: absolute;
  left: 50%;
  bottom: 14rem;
  transform: translateX(-50%);
  opacity: 0.5;
  /* border: 2px solid grey;
  border-radius: 50px; */
}

.footer {
  height: 4vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-family: sans-serif;
  color: #fff;
  background: linear-gradient(to top, rgb(255, 199, 94), rgb(209, 119, 1));
  text-shadow: 0 0 1px rgb(209, 119, 1), 0 0 1px rgb(209, 119, 1),
    0 0 1px rgb(209, 119, 1);
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-moz-keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-webkit-keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-ms-keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-o-keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-moz-keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@-webkit-keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@-ms-keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@-o-keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  /* 80% {
    transform: translateX(-1rem);
  } */
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-moz-keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  /* 80% {
    transform: translateX(-1rem);
  } */
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-webkit-keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  /* 80% {
    transform: translateX(-1rem);
  } */
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-ms-keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  /* 80% {
    transform: translateX(-1rem);
  } */
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@-o-keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  /* 80% {
    transform: translateX(-1rem);
  } */
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}