:root {
  --stalactite-t1-height: 300px;
  --stalactite-t1-left: 10px;
  --stalactite-t1-top: 0%;

  --stalactite-t2-height: 200px;
  --stalactite-t2-left: 70%;
  --stalactite-t2-top: 0%;

  --stalactite-b1-height: 150px;
  --stalactite-b1-left: 0%;
  --stalactite-b1-bottom: 0%;

  --magic-carpet-width: 125px;
  --magic-carpet-top-limit: -10px;

  --stalactite-b2-height: 200px;
  --stalactite-b2-left: 72%;
  --stalactite-b2-bottom: 0%;

  --sun-dark-height: 125px;
}

@media (max-width: 600px) {
  :root {
    --stalactite-t1-height: 150px;
    --stalactite-t1-left: 10px;
    --stalactite-t1-top: 0%;

    --stalactite-t2-height: 200px;
    --stalactite-t2-left: 90%;
    --stalactite-t2-top: 0%;

    --magic-carpet-width: 75px;
    --magic-carpet-left: 50%;
    --magic-carpet-bottom: -30%;
    --magic-carpet-top-limit: -10px;

    --stalactite-b1-height: 90px;
    --stalactite-b1-left: 0%;
    --stalactite-b1-bottom: 0%;

    --stalactite-b2-height: 130px;
    --stalactite-b2-left: 72%;
    --stalactite-b2-bottom: 0%;

    --sun-dark-height: 75px;
    --sun-dark-top: 0%;
    --sun-dark-left: 48%;
  }
}

.ceiling-container {
  display: flex;
  justify-content: space-between;
  ;
  width: 100%;
}

.stalactite-t1 {
  height: var(--stalactite-t1-height);
}

.stalactite-t2 {
  height: var(--stalactite-t2-height);
}

@keyframes floatCarpet {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(var(--magic-carpet-top-limit));
  }

  100% {
    transform: translatey(0px);
  }
}

.carpet-holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.magic-carpet {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: var(--magic-carpet-width);
  height: calc(var(--magic-carpet-width) * 0.9);
  animation: floatCarpet 4s ease-in-out infinite;
}

.stalactite-b1 {
  position: absolute;
  height: var(--stalactite-b1-height);
  bottom: var(--stalactite-b1-bottom);
  left: var(--stalactite-b1-left);
}

.stalactite-b2 {
  position: absolute;
  height: var(--stalactite-b2-height);
  bottom: var(--stalactite-b2-bottom);
  left: var(--stalactite-b2-left);
}

:root {
  --skeleton-1-left: 100px;
  --skeleton-1-bottom: 0%;
  --skeleton-1-height: 75px;

  --skeleton-2-left: 80%;
  --skeleton-2-bottom: 0%;
  --skeleton-2-height: 100px;

  --skeleton-3-left: 40%;
  --skeleton-3-bottom: 0%;
  --skeleton-3-height: 150px;
}

@media (max-width: 600px) {
  :root {
    --skeleton-1-left: 50px;
    --skeleton-1-bottom: 0%;
    --skeleton-1-height: 50px;

    --skeleton-2-left: 80%;
    --skeleton-2-bottom: 0%;
    --skeleton-2-height: 75px;

    --skeleton-3-left: 40%;
    --skeleton-3-bottom: 0%;
    --skeleton-3-height: 100px;
  }
}

.skeleton1 {
  position: absolute;
  left: var(--skeleton-1-left);
  bottom: var(--skeleton-1-bottom);
  height: var(--skeleton-1-height);
}

.skeleton2 {
  position: absolute;
  height: var(--skeleton-2-height);
  left: var(--skeleton-2-left);
  bottom: var(--skeleton-2-bottom);
}

.skeleton3 {
  position: absolute;
  height: var(--skeleton-3-height);
  left: var(--skeleton-3-left);
  bottom: var(--skeleton-3-bottom);
}

h2.underground {
  color: #ff92f2;
}

.dunes {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url('../../../assets/image/dunes.png');
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 100%;
  filter: hue-rotate(10deg);
  pointer-events: none;
  /* Optional: lets clicks pass through */
}

@media (max-width: 600px) {
  .dunes {
    height: 50px;
  }
}