body {
margin: 0;
}

img {
    image-rendering: pixelated;
}

body {
    margin: 0;
    overflow: hidden;
}

.sky {

    position: absolute;

    width: 3000px;
    height: 60vh;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    z-index: -10;

}

.stars {

    position: absolute;

    width: 100%;
    height: 100%;

    image-rendering: pixelated;

    pointer-events: none;
    z-index: -9;

}

.celestial-bodies {
    position: absolute;
    z-index: -8;
    left: 50%;
    transform:translateX(-50%);
}

.sun {
    width:128px;
    height:128px;
    background: rgb(255, 255, 255);

    box-shadow:
        0 0 100px rgb(255, 255, 255),
        0 0 200px rgba(255, 255, 255),
        0 0 100px rgba(255, 255, 255);
    border-radius: 50%;

}

.moon {
    width:128px;
    height:128px;

    border-radius: 50%;
    filter: 
        brightness(50%)
        saturate(50%);

}

.mountains {
    position: absolute;

    bottom: 0;
    width: 3000px;
    height: 70vh;
    left: 50%;
    transform: translateX(-50%);

    background-image: url("images/Main/Backgrounds/mountains.png");
    background-repeat: repeat-x;
    image-rendering: pixelated;
    background-size: auto 200%;

    z-index: -6;
}

.forest1 {
    position: absolute;
    bottom: 16px;
    width: 3000px;
    height: 50vh;
    left: 50%;
    transform:translateX(-50%);

    background-image: url("images/Main/Backgrounds/forest 1.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: bottom;
    image-rendering: pixelated;
    

    z-index: -5;
}

.forest2 {
    position: absolute;
    bottom: 24px;
    width: 3000px;
    height: 50vh;
    left: 50%;
    transform:translateX(-50%);

    background-image: url("images/Main/Backgrounds/forest 2.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: bottom;
    image-rendering: pixelated;
    z-index: -4;

}

.mainland {
    position:absolute;
    bottom: 0vh;
    left: 50%;
    transform:translateX(-50%);
    width: 3000px;
}

.mainstrip{
    position:absolute;
    left:0;
    bottom:0;
    width:3000px;

}

.reflection{
    position:absolute;
    left:0;
    bottom:-378px;

    width:3000px;

    transform:scaleY(-0.5);
    opacity: 0.5;
    filter: blur(1);
    z-index: -2;
}

.water {
    position:absolute;
    left:0;
    bottom:0;
    width:3000px;
    z-index: -3;
}