body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color: #3f123e;
}

.main-div {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(0.0, 0.0, 0.0, 0.25);
}

.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;

  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.main-div .game-title {
    margin: 0px 0px 0px 0px;
    padding: 1% 1% 1% 1%;
    font-family: Arial;
}

.title-image {
    width: 70%;
    height: auto;
    padding-top: 1%;
    object-fit: contain;
    image-rendering: pixelated;
}

.background-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -5;
}

.background-element {
    image-rendering: pixelated;
    position: absolute;
}

.background-div .moon-img {
    scale: 5;
    top: 50%;
    left: 50%;
    transform: translate(200%, -150%);
    z-index: -1;
}

.clouds-div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.background-div .left-cloud-img {
    scale: 5;
    top: 50%;
    left: calc(50% - 1050px);
    transform: translateY(-40%);
    width: 351px;
    height: auto;
    opacity: 0.75;
}

.background-div .right-cloud-img {
    scale: 5;
    top: 50%;
    left: calc(50% + 1050px - 351px);
    transform: translateY(-40%) scaleX(-1);
    width: 351px;
    height: auto;
    opacity: 0.75;
}

.cliff-img {
    z-index: 160;
    scale: 5;
    image-rendering: pixelated;
    left: 0;
    top: calc(50% - 250px);
}

.water {
    background-color: #280c27;
    width: 100%;
    height: 100%;
    border-top: 5px solid;
    border-color: black;
    top: calc(50% + 140px);
}