:root {
  /* Colors */
  --white: #dbdad8;

  --sky-dark: #6a7d8d;
  --sky-mid: #8593ad;
  --sky-light: #c1c2c7;
  --sky-bright: #cbc2c0;

  --fog-dark: #8b96a8;

  --mountain-dark: #506874;
  --mountain-bright: #a2a9b9;

  --rock-dark: #2a2a29;
  --rock-mid: #2a2c2a;
  --rock-bright: #5f5d4e;
}

/* Reset */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Body background */
body {
  background-color: var(--white);
}

/* General art setup */
.canvas {
  position: relative; /* anchors all the child layers */
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* clip anything outside canvas */
}

/* Layers */
.sky {
  position: absolute;
  width: 100%;
  height: 50dvh;
  height: 50vh;
  background: linear-gradient(
    to bottom right,
    var(--sky-dark),
    var(--sky-bright)
  );
  z-index: 0;
}

/* Objects */
.mountains {
  position: absolute;
  background-color: var(--white);
}

/* Mountain layers */
.mountains--far {
  top: 30%;
  width: 100%;
  height: 20%;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(80, 104, 116, 0.6), /* mountain-dark with alpha */
    var(--mountain-bright)
  );
  clip-path: polygon(
    0% 7%, 15% 35%, 30% 2.5%, 32% 0%, 33% 1.5%, 34% 2%,
    38% 10%, 42% 15%, 55% 43%, 60% 45%, 75% 38%, 78% 38%,
    80% 38%, 85% 35%, 100% 45%, 100% 100%, 0% 100%
  );
}

.mountains--mid {
  top: 42%;
  width: 100%;
  height: 15%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(80, 104, 116, 0.9),
    var(--mountain-bright)
  );
  clip-path: polygon(
    0% 40%, 14% 35%, 24% 20%, 38% 1%, 40% 0%, 43% 2%,
    90% 100%, 100% 100%, 100% 100%, 0% 100%
  );
}

.mountains--close {
  top: 45%;
  width: 100%;
  height: 30%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--mountain-dark),
    var(--white)
  );
  clip-path: polygon(
    0% 0%, 50% 20%, 100% 0%, 100% 100%, 0% 100%
  );
}

/* Fog layers */
.fog {
  position: absolute;
  width: 100%;
}

.fog--far {
  top: 52%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(219, 218, 216, 0) 0%,
    rgba(219, 218, 216, 0.2) 1%,
    rgba(219, 218, 216, 0.5) 2%,
    rgba(219, 218, 216, 0.9) 4%,
    var(--fog-dark) 20%
  );
  z-index: 3;
}

/* Rocks */
.rock {
  position: absolute;
  width: 18%;
  height: 28%;
  background: linear-gradient(to bottom, #6d6c68, #2f2e2d);
}

.rocks {
  position: absolute;
  width: 100%;
  overflow: hidden;
}

.rocks--far {
  top: 55%;
  height: 20%;
  width: 10%;
  left: 10%;
  z-index: 4;
  background: linear-gradient(
    to bottom left,
    var(--rock-bright),
    var(--rock-mid)
  );
  transform: rotate(-3deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.rocks--mid {
  top: 55%;
  height: 30%;
  width: 20%;
  left: 75%;
  z-index: 5;
  background: linear-gradient(
    to bottom left,
    var(--rock-bright),
    var(--rock-mid)
  );
  transform: rotate(1deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.rocks--close {
  top: 62%;
  height: 30%;
  width: 50%;
  left: 2%;
  z-index: 5;
  background: linear-gradient(
    to bottom left,
    var(--rock-bright),
    var(--rock-mid)
  );
  transform: rotate(-2deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.rocks--fg {
  top: 80%;
  height: 100%;
  z-index: 100;
  background: linear-gradient(
    to bottom,
    var(--rock-bright) 0%,
    var(--rock-mid) 20%,
    var(--rock-dark) 90%
  );
  clip-path: polygon(
    0% 10%, 5% 9%, 8% 8.5%, 20% 4%, 26% 3%, 35% 1%,
    40% 0%, 50% 0%, 100% 5%, 100% 100%, 0% 100%
  );
}