body {
    cursor: pointer;
    overflow: hidden;
    background-color: black; /* your background color */
}

/* Sun */
#sun {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(circle at bottom,
        rgba(242,248,247,1) 0%,
        rgba(249,249,28,1) 3%,
        rgba(247,214,46,1) 8%,
        rgba(248,200,95,1) 12%,
        rgba(201,165,132,1) 30%,
        rgba(115,130,133,1) 51%,
        rgba(46,97,122,1) 85%,
        rgba(24,75,106,1) 100%
    );
    z-index: 10;
    opacity: 0.5;
}

#sunDay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(circle at bottom,
        rgba(252,255,251,0.9) 0%,
        rgba(253,250,219,0.4) 30%,
        rgba(226,219,197,0.01) 70%,
        rgba(226,219,197,0) 100%
    );
    z-index: 999;
    opacity: 0.5;
}

/* Moon */
#moon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(circle at 40% 55%,
        rgba(249,249,250,1) 0%,
        rgba(189,255,254,1) 1%,
        rgba(8,49,78,1) 1%,
        rgba(8,26,56,1) 10%,
        rgba(4,16,46,1) 40%,
        rgba(2,8,13,1) 70%
    );
    z-index: 10001;
    opacity: 0;
}

#sunSet {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: radial-gradient(circle at bottom,
        rgba(254,255,255,0.8) 5%,
        rgba(236,255,0,1) 10%,
        rgba(253,50,41,1) 25%,
        rgba(243,0,0,1) 40%,
        rgba(93,0,0,1) 100%
    );
    z-index: 999;
    opacity: 0.3;
}

/* Sky */
#sky {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(
        to top,
        rgba(249,251,240,1) 10%,
        rgba(215,253,254,1) 20%,
        rgba(167,222,253,1) 40%,
        rgba(110,175,255,1) 100%
    );
    opacity: 0.52;
    z-index: 5;
}

/* Stars */
#starsContainer {
    perspective: 350px;
    perspective-origin: 50% 300%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 50%;
    z-index: 10000;
    opacity: 0;
    display: none;
}

#stars {
    background: url(stars.jpg) repeat;
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    bottom: 0;
    opacity: 0.5;
    transform: rotateX(-90deg);
}

/* Mountain */
#mountainRange {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 50%;
    display: none;
    z-index: 999;
}

/* Horizon */
#horizon {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top,
        rgba(212,87,43,0.9) 0%,
        rgba(246,149,52,0.8) 20%,
        rgba(24,75,106,0) 100%
    );
    opacity: 0.99;
    z-index: 5;
}

#horizonNight {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top,
        rgba(57,167,255,1) 0%,
        rgba(13,98,245,1) 20%,
        rgba(0,11,22,0.1) 60%
    );
    opacity: 0;
    z-index: 10000;
}

/* Darkness overlays */
#darknessOverlaySky,
#darknessOverlay {
    background-color: black;
    position: absolute;
    opacity: 0;
}

#darknessOverlaySky {
    top: 0;
    width: 100%;
    height: 50%;
    z-index: 9999;
}

#darknessOverlay {
    bottom: 0;
    width: 100%;
    height: 50%;
    z-index: 99;
}

/* Water */
#waterDistance {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(90deg,
        rgba(0,0,0,0) 10%,
        rgba(0,0,0,0.20) 44%,
        rgba(0,0,0,0.65) 95%
    );
    z-index: 20;
}

#water {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top,
        rgba(0,25,45,1) 0%,
        rgba(14,71,117,1) 35%,
        rgba(26,126,174,1) 70%,
        rgba(62,168,220,1) 100%
    );
    z-index: 10;
}

/* Water reflection */
#waterReflectionContainer {
    perspective: 30px;
    perspective-origin: 50% -12%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: -3%;
    width: 103%;
    height: 50%;
    z-index: 25;
}

#waterReflectionMiddle {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 55%;
    background: radial-gradient(circle at 50% 0,
        rgba(247,177,72,1) 3%,
        rgba(248,175,65,1) 6%,
        rgba(207,62,30,0.4) 35%,
        rgba(176,91,48,0.1) 45%,
        rgba(141,88,47,0) 60%
    );
    z-index: 999;
    opacity: 0.7;
    transform: rotateX(45deg);
}

#waterReflectionMiddleThin {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(69,70,61,0) 3%,
        rgba(216,100,38,0.1) 32%,
        rgba(252,176,48,0.35) 35%,
        rgba(253,215,79,1) 48%,
        rgba(253,254,225,1) 52%
    );
    z-index: 999;
    transform: rotateX(45deg);
}

/* Divider */
#division {
    height: 5px;
    width: 100%;
    position: absolute;
    top: 50%;
    background-color: transparent;
    z-index: 9999;
    cursor: ns-resize;
}

/* Coordinate Debug */
#coor {
    position: absolute;
    color: white;
    z-index: 999;
}

/* Ripple */
#oceanRipple {
    background-image: repeating-linear-gradient(
        175deg,
        rgba(165,165,165,0.08) 43%,
        rgba(175,175,175,0.08) 45%,
        rgba(235,235,235,0.08) 49%
    );
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    z-index: 10;
}