.lens {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0.4) 100%
  );
}
.sky {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-animation: firmament-1 30s linear infinite;
  animation: firmament-1 30s linear infinite;
}
.sky2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-animation: firmament-2 30s linear infinite;
  animation: firmament-2 30s linear infinite;
}
@-webkit-keyframes firmament-1 {
  0% {
    background: linear-gradient(
      to bottom,
      #040911 2%,
      #070e1b 31%,
      #0b182b 56%,
      #13253c 75%,
      #1c3249 89%,
      #243a4c 99%
    );
  }
  25% {
    background: linear-gradient(
      to bottom,
      #695371 2%,
      #9b6368 31%,
      #bc7161 56%,
      #ab5f53 75%,
      #944d47 89%,
      #8a4541 99%
    );
  }
  50% {
    background: linear-gradient(
      to bottom,
      #50a7fd 2%,
      #5cb2fe 31%,
      #6bbdfe 56%,
      #79c8fe 75%,
      #85d1fe 89%,
      #8dd6fe 99%
    );
  }
  75% {
    background: linear-gradient(
      to bottom,
      #012254 2%,
      #02387b 31%,
      #1e59a6 56%,
      #6379bb 75%,
      #7b537f 89%,
      #253668 99%
    );
  }
  100% {
    background: linear-gradient(
      to bottom,
      #040911 2%,
      #070e1b 31%,
      #0b182b 56%,
      #13253c 75%,
      #1c3249 89%,
      #243a4c 99%
    );
  }
}
@keyframes firmament-1 {
  0% {
    background: linear-gradient(
      to bottom,
      #040911 2%,
      #070e1b 31%,
      #0b182b 56%,
      #13253c 75%,
      #1c3249 89%,
      #243a4c 99%
    );
  }
  25% {
    background: linear-gradient(
      to bottom,
      #695371 2%,
      #9b6368 31%,
      #bc7161 56%,
      #ab5f53 75%,
      #944d47 89%,
      #8a4541 99%
    );
  }
  50% {
    background: linear-gradient(
      to bottom,
      #50a7fd 2%,
      #5cb2fe 31%,
      #6bbdfe 56%,
      #79c8fe 75%,
      #85d1fe 89%,
      #8dd6fe 99%
    );
  }
  75% {
    background: linear-gradient(
      to bottom,
      #012254 2%,
      #02387b 31%,
      #1e59a6 56%,
      #6379bb 75%,
      #7b537f 89%,
      #253668 99%
    );
  }
  100% {
    background: linear-gradient(
      to bottom,
      #040911 2%,
      #070e1b 31%,
      #0b182b 56%,
      #13253c 75%,
      #1c3249 89%,
      #243a4c 99%
    );
  }
}
@-webkit-keyframes firmament-2 {
  0% {
    background: linear-gradient(
      to bottom,
      #010104 2%,
      #0a0a12 31%,
      #1b1a1e 56%,
      #302822 75%,
      #4e2c0e 89%,
      #5e1801 99%
    );
    opacity: 0;
  }
  12.5% {
    background: linear-gradient(
      to bottom,
      #010104 2%,
      #0a0a12 31%,
      #1b1a1e 56%,
      #302822 75%,
      #4e2c0e 89%,
      #5e1801 99%
    );
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  37.5% {
    background: linear-gradient(
      to bottom,
      #898989 2%,
      #a3948b 31%,
      #997c71 56%,
      #7b5d5b 75%,
      #5a464e 89%,
      #403743 99%
    );
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  62.5% {
    background: linear-gradient(
      to bottom,
      #2b4850 2%,
      #4b6f7e 31%,
      #709da4 56%,
      #aebd9a 75%,
      #c8904d 89%,
      #4a3a30 99%
    );
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    background: linear-gradient(
      to bottom,
      #1c3a62 2%,
      #1e3e68 31%,
      #214470 56%,
      #244a7b 75%,
      #285184 89%,
      #2b558b 99%
    );
    opacity: 1;
  }
  100% {
    background: linear-gradient(
      to bottom,
      #1c3a62 2%,
      #1e3e68 31%,
      #214470 56%,
      #244a7b 75%,
      #285184 89%,
      #2b558b 99%
    );
    opacity: 0;
  }
}
@keyframes firmament-2 {
  0% {
    background: linear-gradient(
      to bottom,
      #010104 2%,
      #0a0a12 31%,
      #1b1a1e 56%,
      #302822 75%,
      #4e2c0e 89%,
      #5e1801 99%
    );
    opacity: 0;
  }
  12.5% {
    background: linear-gradient(
      to bottom,
      #010104 2%,
      #0a0a12 31%,
      #1b1a1e 56%,
      #302822 75%,
      #4e2c0e 89%,
      #5e1801 99%
    );
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  37.5% {
    background: linear-gradient(
      to bottom,
      #898989 2%,
      #a3948b 31%,
      #997c71 56%,
      #7b5d5b 75%,
      #5a464e 89%,
      #403743 99%
    );
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  62.5% {
    background: linear-gradient(
      to bottom,
      #2b4850 2%,
      #4b6f7e 31%,
      #709da4 56%,
      #aebd9a 75%,
      #c8904d 89%,
      #4a3a30 99%
    );
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  87.5% {
    background: linear-gradient(
      to bottom,
      #1c3a62 2%,
      #1e3e68 31%,
      #214470 56%,
      #244a7b 75%,
      #285184 89%,
      #2b558b 99%
    );
    opacity: 1;
  }
  100% {
    background: linear-gradient(
      to bottom,
      #1c3a62 2%,
      #1e3e68 31%,
      #214470 56%,
      #244a7b 75%,
      #285184 89%,
      #2b558b 99%
    );
    opacity: 0;
  }
}
.expanded {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.vignette {
  background: radial-gradient(
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0.4) 100%
  );
}
.one {
  background: linear-gradient(
    to bottom,
    #040911 2%,
    #070e1b 31%,
    #0b182b 56%,
    #13253c 75%,
    #1c3249 89%,
    #243a4c 99%
  );
}
.two {
  background: linear-gradient(
    to bottom,
    #010104 2%,
    #0a0a12 31%,
    #1b1a1e 56%,
    #302822 75%,
    #4e2c0e 89%,
    #5e1801 99%
  );
}
.three {
  background: linear-gradient(
    to bottom,
    #695371 2%,
    #9b6368 31%,
    #bc7161 56%,
    #ab5f53 75%,
    #944d47 89%,
    #8a4541 99%
  );
}
.four {
  background: linear-gradient(
    to bottom,
    #898989 2%,
    #a3948b 31%,
    #997c71 56%,
    #7b5d5b 75%,
    #5a464e 89%,
    #403743 99%
  );
}
.five {
  background: linear-gradient(
    to bottom,
    #50a7fd 2%,
    #5cb2fe 31%,
    #6bbdfe 56%,
    #79c8fe 75%,
    #85d1fe 89%,
    #8dd6fe 99%
  );
}
.six {
  background: linear-gradient(
    to bottom,
    #2b4850 2%,
    #4b6f7e 31%,
    #709da4 56%,
    #aebd9a 75%,
    #c8904d 89%,
    #4a3a30 99%
  );
}
.seven {
  background: linear-gradient(
    to bottom,
    #012254 2%,
    #02387b 31%,
    #1e59a6 56%,
    #6379bb 75%,
    #7b537f 89%,
    #253668 99%
  );
}
.eight {
  background: linear-gradient(
    to bottom,
    #1c3a62 2%,
    #1e3e68 31%,
    #214470 56%,
    #244a7b 75%,
    #285184 89%,
    #2b558b 99%
  );
}