:root {
  --spacing-1x: 0.8rem;
  --spacing-2x: 1.6rem;
  --spacing-3x: 2.4rem;
  --earth-internal-width: 39%;
  --earth-internal-width--exploded: 39%;
  --earth-halves-distance--exploded: 17%;
  --space-color: #151525;
  --earth-atmosphere-color--start: #151525;
  --earth-atmosphere-color--end: #6dc0dc;
  --earth-crust-color: #936659;
  --earth-crust-color-contrast: #fff;
  --earth-mantle-color: #dc5823;
  --earth-mantle-color-contrast: #fff;
  --earth-outer-core-color: #e9ae2f;
  --earth-outer-core-color-contrast: #333;
  --earth-inner-core-color: #f2e1c7;
  --earth-inner-core-color-contrast: #333;
  --body-font-family: Arial, Helvetica, sans-serif;
  --heading-font-family: Georgia, "Times New Roman", Times, serif;
}

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

html {
  font-size: 62.5%;
}

body {
  font-family: var(--body-font-family);
  font-size: 1.6rem;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  font-size: 1.6rem;
  font-weight: 100;
}

h1 {
  font-size: 4.8rem;
}
h2 {
  font-size: 3rem;
}
h3 {
  font-size: 2.4rem;
}
h4 {
  font-size: 2rem;
}
h5 {
  font-size: 1.6rem;
}

.icon {
  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
}

.layer {
  border-top: 1px dotted;
  padding-bottom: var(--spacing-1x);
  padding-top: var(--spacing-1x);
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
  text-align: right;
}

.layer > * + * {
  margin-top: var(--spacing-1x);
}

.layer .layer__title {
  font-size: 2.4rem;
}

.layer--exosphere {
  min-height: 100vh;
}
.layer--thermosphere {
  min-height: 50vh;
}
.layer--mesosphere {
  min-height: 20vh;
}
.layer--stratosphere {
  min-height: 20vh;
}
.layer--troposphere {
  min-height: 10vh;
}

.section {
  padding-bottom: var(--spacing-3x);
  padding-top: var(--spacing-3x);
}

.section__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section__content {
  margin: 0 auto;
}

.section__content > * + * {
  margin-top: var(--spacing-2x);
}

.section__title,
.section__subtitle {
  color: inherit;
  display: inline-block;
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
}
.section__title + .section__subtitle {
  margin-top: var(--spacing);
  padding-top: var(--spacing);
}
.section__title {
  padding: var(--spacing-3x);
}

.intro {
  background: var(--space-color);
  color: #eee;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  overflow: hidden;
  padding-bottom: var(--spacing-3x);
  padding-top: var(--spacing-3x);
  position: relative;
}
.intro .icon--nav-arrow-down {
  bottom: 0;
  color: #fff;
  height: 2.4rem;
  width: 2.4rem;
}
.intro .section__title,
.intro .section__subtitle {
  animation: fade-in 1500ms ease-out forwards;
  font-weight: 100;
  opacity: 0;
}
.intro .section__title {
  font-size: 4.8rem;
  padding: 0;
}
.intro .section__subtitle {
  animation-delay: 100ms;
  font-family: var(--heading-font-family);
  font-size: 2.6rem;
  padding-top: var(--spacing-2x);
}
.intro .section__subtitle span {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: var(--spacing-1x);
}
.intro .section__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  text-align: center;
}

.section--atmosphere {
  background-image: linear-gradient(
    var(--space-color),
    var(--earth-atmosphere-color--end)
  );
  color: #fff;
}
.section--atmosphere .section__content {
  position: relative;
}
.section--atmosphere .section__title {
  position: sticky;
  top: 0;
}
.section--atmosphere .layer {
  border-color: #fff;
}

.section--crust {
  background-image: linear-gradient(
    var(--earth-atmosphere-color--end) 50%,
    var(--earth-crust-color) 50%
  );
  color: var(--earth-crust-color-contrast);
}
.section--crust .section__content {
  position: relative;
}
.section--crust .section__title {
  position: sticky;
  top: 0;
}
.section--crust .section__content p {
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
}
.crust-landscape img {
  display: block;
  width: 100%;
}

.section--mantle {
  background: var(--earth-mantle-color);
  color: var(--earth-mantle-color-contrast);
  padding-top: 0;
}
.section--mantle .section__content {
  position: relative;
}
.section--mantle .section__title {
  position: sticky;
  top: 0;
}
.section--mantle .layer {
  border-color: rgba(0, 0, 0, 0.5);
  padding-bottom: var(--spacing-3x);
  padding-top: var(--spacing-3x);
}

.section--outer-core {
  background: var(--earth-outer-core-color);
  color: var(--earth-outer-core-color-contrast);
  min-height: 25vh;
  padding-top: 0;
}
.section--outer-core .section__content {
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
  position: relative;
}
.section--outer-core .section__title {
  padding-left: 0;
  padding-right: 0;
  position: sticky;
  top: 0;
}

.section--inner-core {
  background: var(--earth-inner-core-color);
  color: var(--earth-inner-core-color-contrast);
  min-height: 25vh;
  padding-top: 0;
}
.section--inner-core .section__content {
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
  position: relative;
}
.section--inner-core .section__title {
  padding-left: 0;
  padding-right: 0;
  position: sticky;
  top: 0;
}

.section--credits .section__content {
  padding-left: var(--spacing-3x);
  padding-right: var(--spacing-3x);
}
.section--credits .section__title {
  padding-left: 0;
  padding-right: 0;
  position: sticky;
  top: 0;
}

.earth-exploded-view {
  align-items: center;
  display: flex;
  padding: var(--spacing-3x);
  justify-content: center;
}

.earth {
  aspect-ratio: 1;
  animation: earth-enter 4s ease-out;
  height: auto;
  position: relative;
  width: 50vh;
  max-width: 50vw;
  z-index: 2;
}

.left-hemisphere,
.right-hemisphere {
  height: 100%;
  position: absolute;
  text-align: center;
  transition: all 0.5s ease-out;
  width: 100%;
}

.left-hemisphere .crust,
.right-hemisphere .crust {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.globe {
  animation: slide-right 20s linear infinite forwards;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 200%;
}

.left-hemisphere {
  clip-path: url(#earth-left-hemisphere-clip-path);
}

.right-hemisphere {
  clip-path: url(#earth-right-hemisphere-clip-path);
  left: 30%;
}
.right-hemisphere .globe {
  left: -30%;
}
.right-hemisphere .crust::after {
  background: radial-gradient(
    circle at 0% 45%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.3) 53%,
    rgba(0, 0, 0, 0.8) 60%,
    rgba(0, 0, 0, 0.9) 62%
  );
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.space {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.space .stars {
  animation: stars-enter 5s ease-out;
  height: 100%;
  left: 0;
  position: relative;
  width: 100%;
}
.stars i {
  animation: star-blink 1s linear infinite alternate;
  background: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 5%;
  top: 5%;
  left: calc(10% + (80% * random()));
  top: calc(10% + (80% * random()));
  height: 2px;
  width: 2px;
}

.stars i:nth-child(1) {
  animation-delay: 319ms;
  animation-duration: 1411ms;
  left: 35%;
  top: 46%;
}
.stars i:nth-child(2) {
  animation-delay: 116ms;
  animation-duration: 1704ms;
  left: 69%;
  top: 54%;
}
.stars i:nth-child(3) {
  animation-delay: 360ms;
  animation-duration: 1161ms;
  left: 47%;
  top: 70%;
}
.stars i:nth-child(4) {
  animation-delay: 1056ms;
  animation-duration: 791ms;
  left: 78%;
  top: 64%;
}
.stars i:nth-child(5) {
  animation-delay: 108ms;
  animation-duration: 925ms;
  left: 70%;
  top: 56%;
}
.stars i:nth-child(6) {
  animation-delay: 99ms;
  animation-duration: 1414ms;
  left: 20%;
  top: 41%;
}
.stars i:nth-child(7) {
  animation-delay: 270ms;
  animation-duration: 1434ms;
  left: 8%;
  top: 48%;
}
.stars i:nth-child(8) {
  animation-delay: 132ms;
  animation-duration: 840ms;
  left: 25%;
  top: 8%;
}
.stars i:nth-child(9) {
  animation-delay: 223ms;
  animation-duration: 1355ms;
  left: 90%;
  top: 75%;
}
.stars i:nth-child(10) {
  animation-delay: 328ms;
  animation-duration: 1365ms;
  left: 82%;
  top: 26%;
}
.stars i:nth-child(11) {
  animation-delay: 500ms;
  animation-duration: 1204ms;
  left: 17%;
  top: 62%;
}
.stars i:nth-child(12) {
  animation-delay: 488ms;
  animation-duration: 473ms;
  left: 42%;
  top: 2%;
}
.stars i:nth-child(13) {
  animation-delay: 489ms;
  animation-duration: 640ms;
  left: 86%;
  top: 40%;
}
.stars i:nth-child(14) {
  animation-delay: 375ms;
  animation-duration: 1830ms;
  left: 47%;
  top: 90%;
}
.stars i:nth-child(15) {
  animation-delay: 33ms;
  animation-duration: 1944ms;
  left: 68%;
  top: 76%;
}

.internal {
  border-radius: 50%;
  height: 100%;
  left: calc(50% - calc(var(--earth-internal-width) / 2));
  overflow: hidden;
  position: absolute;
  pointer-events: none;
  transform: scaleX(var(--earth-internal-width));
  transform-origin: 0;
  transition: all 0.5s ease-out;
  width: 100%;
  z-index: 2;
}

.mantle,
.outer-core,
.inner-core {
  border-radius: 50%;
}

.mantle svg,
.outer-core svg,
.inner-core svg {
  position: absolute;
  left: 0;
  opacity: 0.05;
  top: 0;
}

.mantle {
  animation: rotate 30s linear infinite forwards;
  background: var(--earth-mantle-color);
  height: 100%;
  position: absolute;
  width: 100%;
}

.outer-core {
  animation: rotate 2s linear infinite forwards;
  background: var(--earth-outer-core-color);
  height: 50%;
  left: 25%;
  position: absolute;
  top: 25%;
  width: 50%;
}

.inner-core {
  background: var(--earth-inner-core-color);
  height: 25%;
  left: 40%;
  top: 37.5%;
  position: absolute;
  width: 25%;
}
.inner-core svg {
  opacity: 0.5;
}

.earth:hover .left-hemisphere {
  transform: translateX(calc(var(--earth-halves-distance--exploded) * -1));
}
.earth:hover .right-hemisphere {
  transform: translateX(var(--earth-halves-distance--exploded));
}
.earth:hover .internal {
  left: calc(50% - calc(var(--earth-internal-width--exploded) / 2));
  transform: scaleX(var(--earth-internal-width--exploded));
}

@keyframes star-blink {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes stars-enter {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes earth-enter {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}