@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #666;
  height: 2000px;
}

section {
  height: 800px;
  background: url(../images/star.jpg) fixed no-repeat;
  position: relative;
}

h1 {
  font-size: 6em;
  color: #fff;
  position: absolute;
  top: 80px;
  left: 400px;
  width: 250px;
  text-transform: uppercase;
  animation-name: move;
  animation-duration: 1.3s;
  animation-timing-function: ease-out;
}

section p {
  font-size: 1.5em;
  color: #fff;
  position: absolute;
  bottom: 20px;
  top: 94%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.6;
}

@keyframes move {
  0% {
    left: -100px;
    opacity: 0;
  }
  100% {
    left: 400px;
    opacity: 100%;
  }
}

@keyframes reset {
  0% {
    left: 400px;
    opacity: 100%;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}

.photo {
  position: absolute;
  top: 100px;
  right: 200px;
}