body {
    margin: 0;
    overflow: hidden;
    padding: 0
}
.mainland {
    width: 100%;
    height: 100vh;
    overflow: hidden
}
.bg {
    width: 100%;
    height: 100%;
}
.bg2 {
    width: 100px;
    position: absolute;
    left: -30%;
}
.moon {
    width: 10%;
    position: absolute;
    top: 8%;
    left: 18%;
    transition: .8s
}
.sun {
    width: 50%;
    position: absolute;
    top: -30%;
    filter: grayscale(100);
    transition: .7s;
    left: -50%;
}
h1 {
    font-family: cursive;
    font-size: 30px;
    font-weight: 500;
    position: absolute;
    right: 6%;
    top: 5%;
    cursor: pointer;
    color: white;
    padding: 10px;
    z-index: 2
}
.cloud1 {
    width: 10%;
    position: absolute;
    top: 15%;
    left: 0%;
    animation-name: cloud11;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    opacity: .6;
    animation-timing-function: linear;
}
@keyframes cloud11 {
    0% {
        left: -10%;
    }
    100% {
        left: 100%
    }
}
.cloud2 {
    width: 29%;
    position: absolute;
    top: 1%;
    left: 0%;
    animation-name: cloud22;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: .7
}
@keyframes cloud22 {
    0% {
        left: -50%;
    }
    100% {
        left: 100%
    }
}
.cloud3 {
    opacity: .7;
    width: 30%;
    position: absolute;
    top: 1%;
    left: 0%;
    animation-name: cloud33;
    animation-duration: 39s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes cloud33 {
    0% {
        left: -90%;
    }
    100% {
        left: 100%
    }
}