:root {
  --green-900: #112719;
  --green-700: #153631;
  --green-500: #51B172;
  --spacing-4: 0.4rem;
  --spacing-8: 0.8rem;
  --spacing-12: 1.2rem;
  --spacing-16: 1.6rem;
  --spacing-20: 2rem;
  --spacing-24: 2.4rem;
  --spacing-32: 3.2rem;
  --spacing-40: 4rem;
  --spacing-48: 4.8rem;
  --spacing-64: 6.4rem;
  --spacing-72: 7.2rem;
  --spacing-80: 8rem;
  --spacing-88: 8.8rem;
  --spacing-96: 9.6rem;
  --spacing-128: 12.8rem;
}

html {
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-size: 62.5%;
  overflow: hidden;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background-color: black;
}
body.christmas-padding {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.camdata {
  display: flex;
  flex-direction: column;
  color: white;
}
.camdata__location, .camdata__time, .camdata__weather, .camdata__channel {
  height: 9.55rem;
  transform: translateX(-100vw);
}
.camdata__wrapper {
  display: flex;
}
.camdata__location {
  padding-inline: var(--spacing-32) var(--spacing-64);
  padding-block: var(--spacing-16);
  background-color: var(--green-700);
  font-size: 5.2rem;
  font-weight: bold;
  animation: 1s ease-in-out 3s slideOut;
  animation-fill-mode: forwards;
}
.camdata__time {
  display: flex;
  gap: var(--spacing-24);
  align-items: center;
  position: relative;
  padding-inline: var(--spacing-32) var(--spacing-64);
  padding-block: var(--spacing-16);
  background-color: var(--green-900);
  font-size: 5.2rem;
  animation: 1s ease-in-out 3s slideOut;
  animation-fill-mode: forwards;
}
.camdata__time:before {
  content: "\a";
  border-style: solid;
  border-width: 9.55rem 2.5rem 0px 0;
  border-color: transparent var(--green-900) transparent transparent;
  position: absolute;
  left: -2.5rem;
  top: 0;
}
.camdata__time .icon {
  height: 4.8rem;
  fill: currentColor;
}
.camdata__weather {
  display: flex;
  gap: var(--spacing-24);
  align-items: center;
  position: relative;
  padding-inline: var(--spacing-32);
  padding-block: var(--spacing-16);
  background-color: var(--green-500);
  font-size: 5.2rem;
  animation: 1s ease-in-out 3.05s slideOut;
  animation-fill-mode: forwards;
}
.camdata__weather:before {
  content: "\a";
  border-style: solid;
  border-width: 9.55rem 2.5rem 0px 0;
  border-color: transparent var(--green-500) transparent transparent;
  position: absolute;
  left: -2.5rem;
  top: 0;
}
.camdata__weather .icon {
  height: 4.8rem;
  fill: currentColor;
}
.camdata__weather .symbol {
  font-size: 1.6rem;
}
.camdata__channel {
  display: flex;
  gap: var(--spacing-24);
  align-items: center;
  position: relative;
  padding-inline: var(--spacing-32);
  padding-block: var(--spacing-16);
  background-color: white;
  color: var(--green-900);
  font-size: 3.2rem;
  font-weight: bold;
  animation: 1s ease-in-out 3.1s slideOut;
  animation-fill-mode: forwards;
}
.camdata__channel .icon {
  height: 4.8rem;
  font-size: 4.8rem;
  fill: currentColor;
}
.camdata__description {
  display: inline-flex;
  height: 6.2rem;
  padding: 0 var(--spacing-128);
  transform: translateY(-6.2rem);
  opacity: 0;
  z-index: -1;
  animation: 1s ease-in-out 4.1s popDown;
  animation-fill-mode: forwards;
}
.camdata__description .description-wrapper {
  position: relative;
  padding-inline: var(--spacing-32);
  padding-block: var(--spacing-12);
  background-color: white;
  color: var(--green-900);
  font-size: 3.2rem;
  font-weight: bold;
}
.camdata__description .description-wrapper .description {
  opacity: 0;
  animation: 1s ease-in-out 4.2s showText;
  animation-fill-mode: forwards;
}
.camdata__description .description-wrapper:before {
  content: "\a";
  border-style: solid;
  border-width: 6.2rem 0 0 2.5rem;
  border-color: white transparent transparent transparent;
  position: absolute;
  left: -2.5rem;
  top: 0;
}
.camdata__description .description-wrapper:after {
  content: "\a";
  border-style: solid;
  border-width: 0 0 6.2rem 2.5rem;
  border-color: transparent transparent transparent white;
  position: absolute;
  right: -2.5rem;
  top: 0;
}
.camdata .content-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  opacity: 0;
  animation: 2.4s ease-in-out 4s showText;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__location,
.camdata--end-animation .camdata__time,
.camdata--end-animation .camdata__weather,
.camdata--end-animation .camdata__channel {
  transform: translateX(0vw);
}
.camdata--end-animation .content-wrapper {
  opacity: 1;
  animation: 1s ease-in-out 0.5s hideText;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__location {
  animation: 1s ease-in-out 2.3s slideIn;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__time {
  animation: 1s ease-in-out 2.2s slideIn;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__weather {
  animation: 1s ease-in-out 2.1s slideIn;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__channel {
  animation: 1s ease-in-out 2s slideIn;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__description {
  transform: translateY(0);
  opacity: 1;
  animation: 1s ease-in-out 0.5s popUp;
  animation-fill-mode: forwards;
}
.camdata--end-animation .camdata__description .description {
  opacity: 1;
  animation: 1s ease-in-out 0s hideText;
  animation-fill-mode: forwards;
}

.ornament-top-right {
  position: absolute;
  right: -13rem;
  top: -11rem;
}

.ornament-bottom-right {
  position: absolute;
  right: -4rem;
  bottom: -10rem;
  width: 8rem;
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: 4rem 6rem;
  transform-box: fill-box;
}

.ornament-bottom-left {
  position: absolute;
  left: 1rem;
  top: 7rem;
  width: 5rem;
  animation: swing ease-in-out 1.2s infinite alternate;
  transform-origin: top;
  transform-box: fill-box;
}

.iss-location {
  width: 40rem;
  height: 48rem;
  transform: translateX(-100vw);
  display: flex;
  flex-direction: column;
  animation: 1s ease-in-out 3s slideInRight;
  animation-fill-mode: forwards;
}
.iss-location--end-animation {
  transform: translateX(0vw);
  animation: 1s ease-in-out 3s slideOutRight;
  animation-fill-mode: forwards;
}
.iss-location__description {
  padding-inline: var(--spacing-32);
  padding-block: var(--spacing-16);
  color: white;
  background-color: var(--green-500);
  font-size: 2rem;
  font-weight: bold;
}

@keyframes slideOut {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0vw);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-100vw);
  }
}
@keyframes slideInRight {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0vw);
  }
}
@keyframes slideOutRight {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(100vw);
  }
}
@keyframes popDown {
  0% {
    transform: translateY(-6.2rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes popUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-6.2rem);
    opacity: 0;
  }
}
@keyframes showText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideText {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes swing {
  0% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

/*# sourceMappingURL=main.css.map */