html {
    font: 10px/150% Arial, Verdana, Microsoft Yahei, "\5b8b\4f53";
}

html,
body {

    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
    overflow: hidden;
}

html,
body,
section,
div,
canvas,
p {
    margin: 0;
    padding: 0;
}


.moon-shine {
    width: 100%;
    height: 100vh;

}

.sea,
.land {
    width: 100%;
    position: absolute;
}

.sea {
    background-color: #265ae7;
    height: 20vh;
    border-radius: 0 0 100% 0;
    z-index: 20;
    bottom: 10vh;
}


.land {
    bottom: 0;
    height: 30vh;
    background-color: #b48841;
    z-index: 10;
}

.grass {
    width: 30vw;
    height: 30vh;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 80;
    border-radius: 0 0 100% 0;
    box-shadow: 20vh 20vh 0 20vh #6db441;
}


.stars {
    width: 100%;
    height: 70vh;
    position: relative;
    background: linear-gradient(180deg, #000 0%, #0c1e51 100%);
    overflow: hidden;
    z-index: 85;
}

/* 星星样式 */
.star {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    animation: twinkle ease-in-out infinite;
}

/* 星星闪烁动画 */
@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}



.moon {
    pointer-events: none;
    z-index: 90;
    position: absolute;
    top: 5rem;
    right: 10rem;
    width: 15rem;
    height: 15rem;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: inset #FFF -0.4rem 0.4rem 1.2rem 0.4rem, inset rgba(0, 0, 0, 0.2) -1.2rem 1.2rem 6rem 0.4rem, #888 0 0 2.4rem 0.1rem, #FFF 0 0 8rem 0.4rem;
}

.moon-shadow {
    width: 20rem;
    height: 10rem;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 25vh;
    right: 12rem;
    z-index: 30;
    opacity: 0.6;
    box-shadow: 0 0 4rem 2rem #fff;
}


.rabbit-ear {
    width: 1.5rem;
    height: 5rem;
    background-color: #fff;
    position: absolute;
    right: 35rem;
    bottom: -1rem;
    z-index: 60;
    border-radius: 50% 100% 0 0;
    box-shadow: 2rem 0 0 0.02rem #fff;
}



.rabbit-ear:before {
    content: "";
    width: 3rem;
    height: 1rem;
    background-color: #fff;
    position: absolute;
    right: -2rem;
    bottom: 0.5rem;
    z-index: 60;
    border-radius: 50%;
    box-shadow: 5rem 0 0 0.02rem #fff
}

.rabbit-ear:after {
    content: "";
    width: 1.5rem;
    height: 5rem;
    background-color: #fff;
    position: absolute;
    right: -5rem;
    bottom: -1rem;
    z-index: 60;
    border-radius: 50% 100% 0 0;
    box-shadow: 2rem 0 0 0.02rem #fff
}