* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  min-height: 100vh;
  min-width: 100vw;

  cursor: pointer;
}

.content {
  position: relative;

  height: 100%;
  width: 100%;

  overflow: hidden;

  background: linear-gradient(
          365deg,
          rgb(216, 100, 109),
          rgb(54, 54, 109) 35%,
          black
  );
}

.mountains {
  position: absolute;
  bottom: 0;
  z-index: 10;

  height: 25%;
  width: 100%;
}

.skyline {
  position: absolute;
  top: 0;
  z-index: 10;

  height: 70%;
  width: 100%;
}

.marker {
  background-color: black;
  opacity: 0.7;
}

.star {
  position: absolute;
  top: -1000px;
  left: -1000px;

  width: 0;
  height: 0;

  display: inline-block;

  background-color: white;

  border-radius: 50%;

  transition: height 0.5s ease-in,
  width 0.5s ease-in;
}

.star::before {
  content: " ";

  opacity: 0.4;
  position: absolute;
  left: -20%;
  top: -20%;

  height: 140%;
  width: 140%;

  display: inline-block;

  background-color: white;
  border-radius: 50%;
}

.star::after {
  content: " ";

  opacity: 0.1;
  position: absolute;
  left: -75%;
  top: -75%;

  height: 250%;
  width: 250%;

  display: inline-block;

  background-color: white;
  border-radius: 50%;
}

.sun {
  z-index: 100;
  position: absolute;
  top: -40px;
  left: 30%;

  width: 80px;
  height: 80px;

  display: inline-block;

  background-color: rgb(240, 108, 56);

  border-radius: 50%;

  transform-style: preserve-3d;
}

.sun::before {
  content: " ";

  opacity: 0.4;
  position: absolute;
  top: -20%;
  left: -20%;

  width: 140%;
  height: 140%;

  display: inline-block;

  background-color: rgb(240, 130, 56);

  border-radius: 50%;

  transform: translateZ(-1px);
}

.sun::after {
  content: " ";

  z-index: -1;
  opacity: 0.1;
  position: absolute;
  top: -50%;
  left: -50%;

  width: 200%;
  height: 200%;

  display: inline-block;

  background-color: rgb(240, 154, 56);

  border-radius: 50%;

  transform: translateZ(-1px);
}