:root {
  /* Colors */
  --space-color: #0b010b;
  --sky-color: #4089e9;
  --dirt-color: #613c3c;
  --underground-sky-color: #6646e4;
  --horizon-color: #e5d38a;
  --asphalt-color: #346c00;
  --dirt-dark-color: #3b2a0c;
  --crust-color: #070707;
  --grass-transluscent-color: #a0e063;
  --underground-grass-color: #35013a;

  /* Heights */
  --space-height: 700px;
  --sky-shapes-height: 700px;
  --grass-height: 10px;
  --asphalt-height: 5px;
  --transluscent-grass-height: 5px;
  --dirt-height: 200px;
  --crust-height: 600px;
  --dark-sky-content-height: 50dvh;
  --dark-sky-shapes-height: 200px;
  --sub-grass-height: 20px;
}

@media (max-width: 600px) {
  :root {
    --space-height: 400px;
    --sky-shapes-height: 200px;
    --grass-height: 10px;
    --asphalt-height: 5px;
    --transluscent-grass-height: 5px;
    --dirt-height: 150px;
    --crust-height: 150px;
    --dark-sky-content-height: 50dvh;
    --dark-sky-shapes-height: 120px;
    --sub-grass-height: 20px;
  }
}

.above-bg {
  height: 1000px;
  background: linear-gradient(to bottom,
      var(--space-color) 0%,
      var(--space-color) 40%,
      var(--space-color) 50%,
      rgb(77, 158, 240) 70%,
      white 100%);
}

@media (max-width: 600px) {
  .above-bg {
    height: 550px;
  }
}


.below-bg {
  position: relative;
  height: 600px;
  background: linear-gradient(to bottom,
      var(--dirt-color) 0%,
      var(--dirt-dark-color) 30%,
      var(--crust-color) 45%,
      black 60%,
      #469de4 80%,
      var(--underground-sky-color) 100%);
}

@media (max-width: 600px) {
  .below-bg {
    height: 500px;
  }
}

.space {
  margin: 0;
  height: var(--space-height);
  overflow: hidden;
}

.sky-shapes {
  padding-left: var(--horizontal-padding);
  position: relative;
  margin: 0;
}

.sky-content {
  padding: var(--horizontal-padding);
  padding-bottom: calc(var(--tree-height) + var(--vertical-padding));
  margin: 0;
  background: linear-gradient(to bottom,
      white 0%,
      #4d9ef0 100%);
}

.grass {
  position: relative;
  margin: 0;
  height: var(--grass-height);
  z-index: 9998;
  background: var(--horizon-color);
}

.asphalt {
  position: relative;
  margin: 0;
  height: 5px;
  background: linear-gradient(to bottom,
      var(--asphalt-color) 0%);
}

.grass-transluscent {
  position: absolute;
  margin: 0;
  bottom: 0;
  height: var(--transluscent-grass-height);
  width: 100%;
  opacity: 1.0;
  background: linear-gradient(to bottom,
      transparent,
      var(--grass-transluscent-color) 0%);
}

.dirt {
  position: relative;
  margin: 0;
  height: var(--dirt-height);
  z-index: 9998;
}

.crust {
  position: relative;
  margin: 0;
  height: var(--crust-height);
}

.dark-sky-content {
  padding-left: var(--horizontal-padding);
  padding-right: var(--horizontal-padding);
  padding-top: var(--vertical-padding);
  padding-bottom: calc(var(--tree-height) + var(--vertical-padding));
  margin: 0;
  background: linear-gradient(to bottom,
      /* #469de4 0%, */
      var(--underground-sky-color) 0%);
  /* height: var(--dark-sky-content-height); */
  z-index: 9998;
}

@media (max-width: 600px) {
  .dark-sky-content {
    padding-right: var(--horizontal-padding);
  }
}

.dark-sky-shapes {
  /* padding-left: var(--horizontal-padding); */
  position: absolute;
  width: 100%;
  top: 60%;
  margin: 0;
}

.sub-grass {
  position: relative;
  margin: 0;
}

.sub-grass-layer {
  position: relative;
  width: 100%;
  bottom: 0%;
  height: 5px;
  background: linear-gradient(to bottom,
      var(--underground-grass-color) 0%);
}