html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url("./loop/18.png");
  background-color: #282828;
  background-position: center center;
  background-size: cover;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 300;
}
#background {
  pointer-events: none;
}
#background,
#background:after,
#loop,
#loop img {
  position: absolute;
  height: 100%;
  width: 100%;
}
#loop img {
  opacity: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
#loop img.active {
  opacity: 1;
}
#background::after {
  content: "";
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#28282800),
    color-stop(95%, #282828)
  );
  background: -o-linear-gradient(left, #28282800 0%, #282828 95%);
  background: linear-gradient(90deg, #28282800 0%, #282828 95%);
}
#content {
  position: absolute;
  right: 10%;
  width: 33%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
#content > * {
  margin: 0.5rem 0;
  -webkit-animation: fade 1s ease-out forwards;
  animation: fade 1s ease-out forwards;
  opacity: 0;
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transform: translateY(-3rem);
  -ms-transform: translateY(-3rem);
  transform: translateY(-3rem);
}
#content .links {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#content .links a {
  padding: 8px;
  color: #000;
  background-color: #fff;
  border-radius: 50%;
}
#content .links a:hover {
  opacity: 0.8;
}
#content .links a + a {
  margin-left: 1rem;
}
#content .links a svg {
  display: block;
  width: 1.25rem;
}

@-webkit-keyframes fade {
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fade {
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media screen and (max-width: 992px) {
  #content {
    width: 80%;
    right: 10%;
    bottom: 2rem;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
  }
  #background:after {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#28282800),
      color-stop(95%, #282828)
    );
    background: -o-linear-gradient(top, #28282800 0%, #282828 95%);
    background: linear-gradient(180deg, #28282800 0%, #282828 95%);
  }
}

@media screen and (max-width: 600px) {
  body {
    font-size: 18px;
    background-position: -280px center;
  }
  #content {
    width: 80%;
    right: 10%;
    bottom: 2rem;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
  }
  #background:after {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#28282800),
      color-stop(95%, #282828)
    );
    background: -o-linear-gradient(top, #28282800 0%, #282828 95%);
    background: linear-gradient(180deg, #28282800 0%, #282828 95%);
  }
  #loop img {
    -o-object-position: -280px 0;
    object-position: -280px 0;
  }
}