<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">

* {
    position: relative;
    /*border: solid 1px black */
    font-family: "Lobster", "å¾®è»Ÿæ­£é»‘é«”", cursive;
}

html, body {
    color: white;
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: #2C2F36;
}

.scene {
    cursor: pointer;
    width: 700px;
    height: 500px;
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(#0e1317, #293841, #80afa3, #DED8C9);
    background-size: 100% 200%;
    background-position: 0 0;
}

.lefttopText {
    margin-left: 30px;
}
.lefttopText h1 {
    font-size: 36px;
    letter-spacing: 3px;
    margin-top: 0;
    font-weight: 300;
}
.lefttopText h5 {
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-bottom: 0;
    font-weight: 300;
}
.lefttopText p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 2px;
    opacity: 0.6;
}
.lefttopText .blueBlock {
    background-color: #a14748;
    width: 30px;
    height: 55px;
    border-radius: 0;
    box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5);
}

[class^=mountain] {
    position: absolute;
    width: 0;
    height: 0;
    border-right: solid 250px transparent;
    border-left: solid 250px transparent;
    border-bottom: solid 150px;
    border-bottom-color: #1f2b33;
    bottom: 50px;
}

.mountain3 {
    border-bottom: solid 150px #1b2328;
    bottom: 30px;
    left: 100px;
}

.mountain2 {
    left: 300px;
}

[class^=treeBack] {
    width: 0;
    height: 0;
    border-right: solid 40px transparent;
    border-left: solid 40px transparent;
    border-bottom: solid 200px;
    border-bottom-color: #050e12;
    position: absolute;
}

.treeBack1 {
    left: 350px;
    bottom: -10px;
}

.treeBack2 {
    left: 220px;
    bottom: 40px;
}

.treeBack3 {
    left: 650px;
    bottom: 70px;
}

.land {
    width: 150%;
    height: 200px;
    border-radius: 50%;
    background-color: #192128;
    position: absolute;
    bottom: -100px;
    left: -25%;
}

[class^=treeFront] {
    width: 0;
    height: 0;
    border-right: solid 40px transparent;
    border-left: solid 40px transparent;
    border-bottom: solid 200px;
    border-bottom-color: #03090b;
    position: absolute;
    bottom: 0;
}

.treeFront1 {
    left: 10px;
}

.treeFront2 {
    left: 100px;
    bottom: -150px;
}

.treeFront3 {
    left: 180px;
    bottom: -80px;
}

.treeFront4 {
    left: 500px;
    bottom: -100px;
}

.treeFront5 {
    right: 5px;
    bottom: -40px;
}

.building {
    position: absolute;
    right: 0;
    bottom: 0;
}

[class^=house] {
    position: absolute;
    bottom: 0;
    right: 0;
}

.house1 {
    background-color: transparent;
    width: 200px;
    height: 200px;
    border-radius: 0;
    right: 100px;
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.house1 .wall2 {
    transform: skew(0, 10deg);
    height: 100%;
    top: 9px;
    flex: 2;
    background-color: #2f3c44;
}
.house1 .wall2 .door {
    box-shadow: 0px 0px 1em #f5edae;
    width: 16px;
    height: 160px;
    border-radius: 8px 8px 0 0;
    background-color: #f5edae;
    position: absolute;
    bottom: 0;
    left: calc(50% - 8px);
}
.house1 .wall2 .cirWindow {
    box-shadow: 0px 0px 1em #f5edae;
    background-color: #f5edae;
    width: 20px;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: calc(50% - 13px);
}
.house1 .wall2 .attic {
    position: absolute;
    width: 0;
    height: 0;
    border-right: solid 40px transparent;
    border-left: solid 40px transparent;
    border-bottom: solid 55px;
    border-bottom-color: #2f3c44;
    top: -54px;
}
.house1 .wall1 {
    background-color: #232e38;
    height: 107%;
    flex: 3;
    transform: skew(0, -8deg);
}
.house1 .wall1 .window {
    box-shadow: 0px 0px 1em #f5edae;
    background-color: #f5edae;
    margin-top: 30px;
    width: 8px;
    height: 50px;
    border-radius: 5px;
    position: absolute;
}
.house1 .wall1 .window:nth-child(1) {
    left: 70px;
}
.house1 .wall1 .window:nth-child(2) {
    top: 1px;
    left: 40px;
}
.house1 .roof2, .house1 .roof1 {
    position: absolute;
    background-color: #100a0e;
}
.house1 .roof2 {
    box-shadow: -4px 4px 1em rgba(0, 0, 0, 0.4);
    right: 0;
    width: 140px;
    height: 70px;
    border-radius: 0;
    transform: skew(40deg, -8deg);
    top: -60px;
    right: 6px;
}
.house1 .roof1 {
    right: 0;
    width: 140px;
    height: 60px;
    border-radius: 0;
    transform: skew(-40deg, -8deg);
    top: -60px;
    right: 60px;
}

.house2 {
    width: 200px;
    height: 200px;
    border-radius: 0;
    right: 100px;
    bottom: 50px;
}
.house2 .roof {
    box-shadow: -4px 4px 1em rgba(0, 0, 0, 0.4);
    position: absolute;
    transform: skew(60deg, -8deg);
    bottom: 60px;
    right: -20px;
    width: 100px;
    height: 30px;
    border-radius: 0;
    background-color: #100a0e;
}
.house2 .pile1, .house2 .pile2 {
    box-shadow: inset -3px 0 2px #111;
    width: 10px;
    height: 90px;
    border-radius: 0;
    position: absolute;
    background-color: #1f2326;
}
.house2 .pile1 {
    bottom: -15px;
    right: -20px;
}
.house2 .pile2 {
    bottom: -30px;
    right: 40px;
}

.windmill {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    left: -20px;
    top: -20px;
    width: 200px;
    height: 500px;
    border-radius: 0;
}
.windmill .fan1, .windmill .fan2 {
    position: absolute;
    width: 56px;
    height: 310px;
    border-radius: 0;
}
.windmill .fan1 .stick, .windmill .fan2 .stick {
    position: absolute;
    width: 6px;
    height: 310px;
    border-radius: 0;
    left: calc(50% - 3px);
    background-color: #1f2326;
}
.windmill .fan1 .leaf1, .windmill .fan2 .leaf1 {
    width: 25px;
    height: 115px;
    border-radius: 0;
    background-color: #2f3c44;
}
.windmill .fan1 .leaf2, .windmill .fan2 .leaf2 {
    background-color: #2f3c44;
    width: 25px;
    height: 115px;
    border-radius: 0;
    position: absolute;
    bottom: 0;
    right: 0;
}
.windmill .fan1 {
    transform: rotate(60deg);
}
.windmill .fan2 {
    transform: rotate(150deg);
}

@-webkit-keyframes rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(270deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(270deg);
    }
}
.allStars {
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
}
@-webkit-keyframes falling {
    0%, 100% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    0% {
        transform: translate(100px, 0);
    }
    100% {
        transform: translate(0px, 200px);
    }
}
@keyframes falling {
    0%, 100% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    0% {
        transform: translate(100px, 0);
    }
    100% {
        transform: translate(0px, 200px);
    }
}
.allStars [class^=star] {
    background-color: #fff;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    -webkit-animation: falling 2s infinite;
    animation: falling 2s infinite;
}
.allStars .star1 {
    position: absolute;
    top: 12.3238545535%;
    left: 81.3419095125%;
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}
.allStars .star2 {
    position: absolute;
    top: 22.9827952812%;
    left: 13.8657382392%;
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.allStars .star3 {
    position: absolute;
    top: 32.0404671711%;
    left: 8.9045633179%;
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.allStars .star4 {
    position: absolute;
    top: -27.642588743%;
    left: 56.0108220315%;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.allStars .star5 {
    position: absolute;
    top: -24.4941763442%;
    left: 84.6418415764%;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.allStars .star6 {
    position: absolute;
    top: 40.4698221348%;
    left: 85.8943476517%;
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.allStars .star7 {
    position: absolute;
    top: 0.504242017%;
    left: 7.9570423141%;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.allStars .star8 {
    position: absolute;
    top: 41.5731485137%;
    left: 22.2376846359%;
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.allStars .star9 {
    position: absolute;
    top: -17.3920857651%;
    left: 53.097311396%;
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.allStars .star10 {
    position: absolute;
    top: 42.0020415922%;
    left: 2.6526660478%;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.allStars .star11 {
    position: absolute;
    top: 34.0456936843%;
    left: 86.5545189021%;
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.allStars .star12 {
    position: absolute;
    top: 38.8864998783%;
    left: 53.9884456287%;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
}
.allStars .star13 {
    position: absolute;
    top: 35.4934271168%;
    left: 71.0806171337%;
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.3s;
}
.allStars .star14 {
    position: absolute;
    top: -5.6000260365%;
    left: 47.0889054288%;
    -webkit-animation-delay: -1.4s;
    animation-delay: -1.4s;
}
.allStars .star15 {
    position: absolute;
    top: 48.2140107561%;
    left: 5.460291543%;
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;
}
.allStars .star16 {
    position: absolute;
    top: 15.8818927397%;
    left: 61.2491399934%;
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s;
}
.allStars .star17 {
    position: absolute;
    top: 32.1132183963%;
    left: 24.8937277954%;
    -webkit-animation-delay: -1.7s;
    animation-delay: -1.7s;
}
.allStars .star18 {
    position: absolute;
    top: -14.1198945021%;
    left: 12.2912392452%;
    -webkit-animation-delay: -1.8s;
    animation-delay: -1.8s;
}
.allStars .star19 {
    position: absolute;
    top: 44.8808553929%;
    left: 2.1231016391%;
    -webkit-animation-delay: -1.9s;
    animation-delay: -1.9s;
}
.allStars .star20 {
    position: absolute;
    top: -2.9412363861%;
    left: 37.2537907547%;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}
.allStars .star21 {
    position: absolute;
    top: 30.1919279305%;
    left: 90.6970361695%;
    -webkit-animation-delay: -2.1s;
    animation-delay: -2.1s;
}
.allStars .star22 {
    position: absolute;
    top: 14.6067564787%;
    left: 32.0460959022%;
    -webkit-animation-delay: -2.2s;
    animation-delay: -2.2s;
}
.allStars .star23 {
    position: absolute;
    top: -7.6066454885%;
    left: 77.9880577089%;
    -webkit-animation-delay: -2.3s;
    animation-delay: -2.3s;
}
.allStars .star24 {
    position: absolute;
    top: -3.3289648179%;
    left: 71.4889233563%;
    -webkit-animation-delay: -2.4s;
    animation-delay: -2.4s;
}
.allStars .star25 {
    position: absolute;
    top: 36.433478545%;
    left: 14.4826193913%;
    -webkit-animation-delay: -2.5s;
    animation-delay: -2.5s;
}
.allStars .star26 {
    position: absolute;
    top: 34.881338123%;
    left: 79.3676676927%;
    -webkit-animation-delay: -2.6s;
    animation-delay: -2.6s;
}
.allStars .star27 {
    position: absolute;
    top: 45.6590429987%;
    left: 50.6849671612%;
    -webkit-animation-delay: -2.7s;
    animation-delay: -2.7s;
}
.allStars .star28 {
    position: absolute;
    top: 18.414323347%;
    left: 68.3672615265%;
    -webkit-animation-delay: -2.8s;
    animation-delay: -2.8s;
}
.allStars .star29 {
    position: absolute;
    top: 44.6829452232%;
    left: 53.8440229534%;
    -webkit-animation-delay: -2.9s;
    animation-delay: -2.9s;
}
.allStars .star30 {
    position: absolute;
    top: -16.8124832402%;
    left: 57.7361201952%;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}

input {
    display: none;
}

.remind {
    opacity: 0.2;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.dayText {
    display: none;
}

.sun, .moon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50px;
    left: 200px;
}

.sun {
    background-color: #fff5aa;
    box-shadow: 0px 0px 40px rgba(255, 245, 170, 0.5);
    top: 400px;
    opacity: 0;
}

.moon {
    -webkit-animation: moonAppear 2s both;
    animation: moonAppear 2s both;
}

@-webkit-keyframes moonAppear {
    0% {
        box-shadow: inset 0px 0px rgba(255, 255, 255, 0.9);
    }
    100% {
        box-shadow: inset 10px -10px rgba(255, 255, 255, 0.9);
    }
}

@keyframes moonAppear {
    0% {
        box-shadow: inset 0px 0px rgba(255, 255, 255, 0.9);
    }
    100% {
        box-shadow: inset 10px -10px rgba(255, 255, 255, 0.9);
    }
}
input:checked + .scene {
    background-position: 0 100%;
}
input:checked + .scene .nightText {
    display: none;
}
input:checked + .scene .dayText {
    display: block;
}
input:checked + .scene .allStars {
    opacity: 0;
}
input:checked + .scene h1, input:checked + .scene h5, input:checked + .scene p {
    color: #222;
}
input:checked + .scene .building {
    filter: brightness(105%);
}
input:checked + .scene .moon {
    top: -100px;
    opacity: 0;
}
input:checked + .scene .sun {
    top: 50px;
    opacity: 1;
}
input:checked + .scene .blueBlock {
    background-color: #eee;
}
input:checked + .scene [class^=mountain] {
    border-bottom-color: #627C71;
}
input:checked + .scene .mountain3 {
    border-bottom-color: #577469;
}
input:checked + .scene [class^=treeBack] {
    border-bottom-color: #22403d;
}
input:checked + .scene [class^=treeFront] {
    border-bottom-color: #172a25;
}
input:checked + .scene .land {
    background-color: #dad4c4;
}
input:checked + .scene .wall1 {
    background-color: #d0c4b3;
}
input:checked + .scene .wall2, input:checked + .scene .leaf1, input:checked + .scene .leaf2 {
    background-color: #E9E2C8;
}
input:checked + .scene .attic {
    border-bottom-color: #E9E2C8;
}
input:checked + .scene .window, input:checked + .scene .cirWindow, input:checked + .scene .door {
    background-color: #6F6B5E;
    box-shadow: inset 4px 3px 0 #555;
}
input:checked + .scene .roof1, input:checked + .scene .roof2, input:checked + .scene .roof {
    background-color: #a14748;
}
input:checked + .scene .stick, input:checked + .scene .pile1, input:checked + .scene .pile2 {
    background-color: #786456;
}
input:checked + .scene .pile1, input:checked + .scene .pile2 {
    box-shadow: inset -3px 0 2px #444;
}
input:checked + .scene .windmill {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.scene, .allStars, h1, h5, p, .building, .moon, .sun, .blueBlock, [class^=mountain], .mountain3, [class^=treeBack], [class^=treeFront], .land, .wall1, .wall2, .leaf1, .leaf2, .attic, .window, .cirWindow, .door, .roof1, .roof2, .roof, .stick, .pile1, .pile2 {
    transition: 2s;
}</pre></body></html>