tilde-town-website/vaporwave/landscape.css

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a001a;
}

div.landscape {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  max-height: 1080px;
  min-width: 800px;
  min-height: 600px;
  overflow: hidden;
  box-shadow: 0px 0px 30px #660066;
}

div.sun {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 335px,
      transparent 150px,
      #3d1452 150px,
      #001a1a),
    linear-gradient(
      transparent 55%,
      #3d1452 55% 61%,
      transparent 61% 67%,
      #3d1452 67% 73%,
      transparent 73% 79%,
      #3d1452 79% 85%,
      transparent 85% 89%,
      #3d1452 89% 93%,
      transparent 93% 96%,
      #3d1452 96% 98%,
      transparent 98%),
    radial-gradient(
      yellow,
      orangered 60%),
    linear-gradient(
      orangered 60%,
      red);
  background-position: center, 50% 187px, top center;
  background-size: 100% 100%, 300px 300px, 100% 400px;
  background-repeat: no-repeat;
  filter: blur(1px);
}

div.stars {
  position: absolute;
  width: 100%;
  height: 100%;
}

span.star {
  position: absolute;
  height: 4px;
  width: 4px;
  background: radial-gradient(circle, #705d79 1px, transparent 1px);
}

span.star.large {
  background: radial-gradient(circle, #705d79 1px, transparent 2px);
}

div.mountain-container {
  position: absolute;
  top: 450px;
  width: 47%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

div.mountain-container.flipped {
  right: 0;
  transform: rotateY(180deg);
}

div.mountain-container.background {
  top: 430px;
  width: 44%;
}

div.mountain {
  position: relative;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #77ffff 4%, transparent 8%),
    linear-gradient(to bottom left, #00cccc, #008080);
  transform: rotate(45deg);
  border: 2px solid #ccffff;
  box-shadow: 0px 0px 15px #00ffff;
}

div.mountain.size250 {
  width: 250px;
  height: 250px;
}

div.mountain.size200 {
  width: 200px;
  height: 200px;
}

div.mountain.size100 {
  width: 100px;
  height: 100px;
}

div.mountain.left {
  transform: rotate(40deg);
}

div.mountain.right {
  transform: rotate(50deg);
}

div.grid {
  position: absolute;
  height: 450px;
  width: 200%;
  background: linear-gradient(#222, black);
  transform: translate(-25%, 370px) perspective(220px) rotateX(51deg);
}

div.grid > .lines {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px),
    linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px);
  background-size: 100% 40px, 40px 100%;
}

div.grid > .lines.glow {
  background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px),
    linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px);
  background-size: 100% 40px, 40px 100%;
  filter: blur(4px);
}

div.scanlines {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 1px, rgba(0, 0, 0, 0.5) 3px);
  background-size: 100% 3px;
}