:root {
    --red: #972627;
    --red-2: #c17d7d;
    --white: #e2b59a;
    --sm: #fcedbb90;
    --sm-2: #c57356;
    --sky-1: var(--red);
    --sky-2: var(--white);
    --sea-1: #645355;
    --sea-2: #9c766780;
    --sea-3: #0e3641;
    --base-1: #335e53;
    --base-2: #142c2c;
    --shine: #fff6;
    --windows: #5f3300;
    --reflex: #fff2;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

body * {
    transform-style: preserve-3d;
}

.sky {
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
    top: 0;
    z-index: -1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sea {
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, var(--sea-1), #fff0), radial-gradient(circle at 50% 0%, var(--sea-2) 30%, var(--sea-3) 50%, #fff0 100%), var(--sea-3);
    top: 50%;
    z-index: -1;
}

.content {
    width: 60vmin;
    height: 100vmin;
    background-size: contain;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sky:before,
.content:after {
    content: "";
    position: absolute;
    width: 19vmin;
    height: 19vmin;
    background: radial-gradient(circle at 50% 60%, var(--sm-2), var(--sm) 100%);
    border-radius: 100%;
    margin-top: -7.75vmin;
    box-shadow: 0 0.5vmin 0.5vmin 0 var(--sm) inset;
    clip-path: polygon(0 0, 100% 0, 100% 71%, 0 71%);
}

.content:after {
    transform: rotateX(180deg);
    transform-origin: 50% 71%;
    opacity: 0.25;
    background: linear-gradient(180deg, #fff0, var(--sm)), radial-gradient(circle at 50% 50%, #fff0, #fff0 5vmin 8.75vmin, #fff0 calc(9.25vmin + 5px) 100%);
    box-shadow: 0 -1vmin 1vmin 0 var(--sm) inset;
}

.sky:before {
    bottom: -6vmin;
}

.content * {
    position: absolute;
}

.lighthouse {
    background: #0ff0;
    width: 11vmin;
    height: 30vmin;
    margin-top: -30vmin;
    perspective: 80vmin;
}

.base {
    --rock-1: var(--base-1) 1.1vmin, #fff0 calc(1.1vmin + 3px) 100%;
    --rock-2: var(--base-1) 1vmin, #fff0 calc(1vmin + 1px) 100%;
    background:
            radial-gradient(ellipse at 14% 37%, var(--rock-2)),
            radial-gradient(ellipse at 86% 37%, var(--rock-2)),
            radial-gradient(ellipse at 19% 6%, var(--rock-1)),
            radial-gradient(ellipse at 81% 6%, var(--rock-1)),
            radial-gradient(ellipse at 63% 32%, var(--rock-1)),
            radial-gradient(ellipse at 37% 32%, var(--rock-1)),
            radial-gradient(ellipse at 76% 60%, var(--rock-1)),
            radial-gradient(ellipse at 24% 60%, var(--rock-1)),
            radial-gradient(ellipse at 98% 84%, var(--rock-1)),
            radial-gradient(ellipse at 73% 96%, var(--rock-1)),
            radial-gradient(ellipse at 50% 72%, var(--rock-1)),
            radial-gradient(ellipse at 27% 96%, var(--rock-1)),
            radial-gradient(ellipse at 2% 84%, var(--rock-1)),
            linear-gradient(180deg, var(--base-1) 0 0.25vmin, #fff0 0 100%),
            linear-gradient(90deg, #fff0 1vmin, var(--base-2) 0 calc(100% - 1vmin), #fff0 0 100%),
            linear-gradient(-119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin) 70%, #fff0 0 100%),
            linear-gradient(119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin + 1px) 70%, #fff0 0 100%),
            linear-gradient(90deg, #fff0 0 0.75vmin, var(--base-1) 0 calc(100% - 0.75vmin), #fff0 0 100%),
            linear-gradient(-119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%),
            linear-gradient(119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%);
    width: 11vmin;
    height: 3vmin;
    bottom: 0;
    border-radius: 1.55vmin 1.55vmin 0 0;
}

.base:before {
    content: "";
    background:
            linear-gradient(-95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%),
            linear-gradient(95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%);
    width: 7.5vmin;
    height: 2vmin;
    position: absolute;
    top: -2vmin;
    left: 1.75vmin;
}

.base:after {
    content: "";
    background:
            linear-gradient(-112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100% ),
            linear-gradient(112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100%),
            repeating-linear-gradient(0deg, var(--base-2) 0 0.3vmin, var(--base-1) 0 0.5vmin);
    width: 4.1vmin;
    height: 2vmin;
    position: absolute;
    top: -2vmin;
    left: 3.5vmin;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 5% 0;
    background-size: 100% 100%, 100% 100%, 90% 100%;
}

.tower {
    background:
            radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            linear-gradient(-94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%),
            linear-gradient(94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%),
            radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 17vmin, var(--red) calc(17vmin + 1px) 21vmin, var(--white) calc(21vmin + 1px) 23vmin);
    width: 6vmin;
    height: 19vmin;
    left: 2.5vmin;
    top: 6vmin;
    clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}

.top {
    background:
            linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%),
            linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%),
            linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%),
            linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%),
            conic-gradient(from -1deg at 8% 89%, #fff0 0 35%, var(--shine) 36% 100%),
            conic-gradient(from 0deg at 92% 89%, var(--shine) 0 64%, #fff0 65% 100%),
            radial-gradient(circle at 50% 1.55vmin, #fff, #fc0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%),
            radial-gradient(circle at 50% 187%, var(--white) 0 7vmin, #fff0 calc(7vmin + 1px) 7.5vmin, var(--white) calc(7.5vmin + 1px) 8.35vmin, #fff0 calc(8.35vmin + 1px) 9.5vmin, var(--white) calc(9.5vmin + 1px) 100% ),
            linear-gradient(-95deg, #fff0 0 1.4vmin, var(--shine) calc(1.4vmin + 1px) 1.65vmin, var(--red) calc(1.65vmin + 1px) 2.85vmin, #fff0 0 100%),
            linear-gradient(95deg, #fff0 0 1.4vmin, var(--shine) calc(1.4vmin + 1px) 1.65vmin, var(--red) calc(1.65vmin + 1px) 2.85vmin, #fff0 0 100%);
    width: 4.65vmin;
    height: 5.5vmin;
    left: 3.15vmin;
    top: 0.75vmin;
    border-radius: 0.5vmin;
    clip-path: polygon(0% 96%, 0% 70%, 22% 63%, 24% 53%, 7% 56%, 8% 41%, 25% 38%, 27% 17%, 15% 18%, 16% 10%, 22% 8%, 35% 6%, 54% 5%, 74% 8%, 73% 8%, 82% 10%, 83% 18%, 72% 17%, 75% 37%, 88% 41%, 89% 56%, 77% 54%, 78% 62%, 100% 70%, 100% 96%, 85% 100%, 15% 100%);
    background-repeat: no-repeat;
    background-size: 1vmin 1.1vmin, 1vmin 1.1vmin, 1vmin 1.15vmin, 0.45vmin 1.15vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: 3.45vmin 0.25vmin, 0.35vmin 0.25vmin, 0vmin 2.1vmin, 3.75vmin 2.1vmin, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

.roof {
    border: 0.65vmin solid #fff0;
    border-bottom-color: var(--red);
    left: 4.9vmin;
    top: -0.2vmin;
}

.lighthouse + .lighthouse {
    transform-origin: 50% 100%;
    transform: rotateX(180deg);
    opacity: 0.15;
}

.lighthouse + .lighthouse .tower {
    background:
            radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
            linear-gradient(-94.5deg, #fff2 0 1.65vmin, #fff0 calc(1.65vmin + 1px) 100%),
            linear-gradient(94.5deg, #fff2 0 1.5vmin, #fff0 calc(1.55vmin + 1px) 100%),
            radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 14vmin, #fff0  18vmin);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 70%, 100% 70%, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 0;
    filter: blur(2px);
}

.lighthouse + .lighthouse .tower:after {
    filter: blur(3px);
}
.lighthouse + .lighthouse .tower:before {
    opacity: 0;
}


input {
    display:none;
}

label[for=light] {
    width: 11vmin;
    cursor: pointer;
    height: 30vmin;
    margin-top: -30vmin;
    clip-path: polygon(30% 0, 70% 0, 95% 100%, 5% 100%);
}

label[for=night] {
    position: absolute;
    bottom: 3vmin;
    background: #fff;
    width: 36px;
    height: 36px;
    border-radius: 100% 1% 100% 100%;
    background: radial-gradient(circle at 90% 10%, #fff 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%), radial-gradient(circle at 68% 25%, #fff 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%), radial-gradient(circle at 85% 40%, #fff 0 0.08vmin, #fff0 calc(0.08vmin + 1px) 100%), radial-gradient(circle at 95% 20%, #fff0 0 2vmin, #fff calc(2vmin + 1px) 100%);
    cursor: pointer;
}

.light {
    width: 0.75vmin;
    height: 0.75vmin;
    background: #f600;
    border-radius: 100%;
    left: 5.1vmin;
    top: 1.95vmin;
    animation: spin 6s linear 0s infinite;
    animation-play-state: running;
    perspective: 10vmin;
}

.light:before,
.light:after {
    content: "";
    position: absolute;
    width: 30vmin;
    height: 4vmin;
    background: radial-gradient(circle at 0% 50%, #fdf8cc6e, #fff0);
    margin-top: -1.85vmin;
    clip-path: polygon(100% 0, 0 53%, 100% 100%);
    margin-left: 0.375vmin;
}

.light:after {
    transform: rotateX(60deg);
}

input#light:checked ~ .content .lighthouse .light {
    animation-play-state: paused;
}

@keyframes spin {
    25% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { transform: rotateY(360deg); }
}



/* sea reflex */
.sea:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fff4, var(--sea-1) 1%, #fff0 30%), radial-gradient(circle at 50% 0%, var(--sea-2), #024479 50%, #000);
    opacity: 0.75;
}

.sea span {
    position: absolute;
    z-index: -1;
    top: 1vmin;
    left: 1vmin;
    width: 20vmin;
    height: 0.15vmin;
    background: var(--reflex);
    border-radius: 1vmin;
    box-shadow:
            20.5vmin 0 0 var(--reflex),
            53.5vmin 0 0 var(--reflex),
            74vmin 0 0 var(--reflex),
            122.5vmin 0 0 var(--reflex);
    filter:
            drop-shadow(-14vmin 0vmin 0 #fff)
            drop-shadow(14vmin 0.85vmin 0 #fff)
            drop-shadow(-24vmin 1.85vmin 0 #fff)
            drop-shadow(-1vmin 3.5vmin 0 #fff)
            drop-shadow(6vmin 7vmin 0 #fff)
            drop-shadow(-6vmin 14vmin 0 #fff)
            drop-shadow(3vmin 28vmin 0 #fff)
            drop-shadow(3vmin 56vmin 0 #fff)
            blur(1px);
}

.sea span:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 11.5vmin;
    right: 0;
    width: 2vmin;
    height: 0.15vmin;
    background: var(--reflex);
    border-radius: 1vmin;
    box-shadow: 20.5vmin 0 0 var(--reflex), 24vmin 0 0 var(--reflex),
    33vmin 0 0 var(--reflex), 59vmin 0 0 var(--reflex), 86vmin 0 0 var(--reflex),
    89.5vmin 0 0 var(--reflex), 93vmin 0 0 var(--reflex), 102vmin 0 0 var(--reflex);
}

.sea span:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15vmin;
    right: 0;
    width: 2vmin;
    height: 0.15vmin;
    background: var(--reflex);
    border-radius: 1vmin;
    box-shadow: 24vmin 0 0 var(--reflex), 33vmin 0 0 var(--reflex),
    50vmin 0 0 var(--reflex), 71vmin 0 0 var(--reflex), 77vmin 0 0 var(--reflex),
    93vmin 0 0 var(--reflex), 102vmin 0 0 var(--reflex);
}




/* clouds */
.sky span {
    background: linear-gradient(0deg, #fff0 2vmin, #fff 0 100%);
    width: 8vmin;
    height: 8vmin;
    border-radius: 100% 120% 100% 100%;
    position: absolute;
    transform: translateX(-14vmin) translateY(-15vmin);
    opacity: 0.1;
}

.sky span:before,
.sky span:after{
    content: "";
    position: absolute;
    width: 7vmin;
    height: 5vmin;
    background: linear-gradient(0deg, #fff0 1vmin, #fff 0 100%);
    border-radius: 150% 120% 100% 100%;
    margin-left: -6vmin;
    margin-top: 2vmin;
}

.sky span:after {
    content: "";
    position: absolute;
    width: 7vmin;
    height: 3vmin;
    background: linear-gradient(0deg, #fff0 1vmin, #fff 0 100%);
    border-radius: 150% 120% 100% 200%;
    margin-left: -12vmin;
    margin-top: 4vmin;
}

.sky span:nth-child(even) {
    background: linear-gradient(0deg, #fff0 2vmin, #fff 0 100%);
    width: 5vmin;
    height: 4vmin;
    border-radius: 100% 120% 100% 100%;
    position: absolute;
    transform: translateX(5.5vmin) translateY(-17vmin);
    opacity: 0.2;
}

.sky span:nth-child(even):before {
    width: 3.75vmin;
    height: 3vmin;
    margin-left: 4.5vmin;
    margin-top: 0.1vmin;
    border-radius: 100%;
}

.sky span:nth-child(even):after {
    width: 3vmin;
    height: 2.5vmin;
    margin-left: 8vmin;
    margin-top: 0.6vmin;
    box-shadow: -9.5vmin -0.3vmin 0 -0.75vmin #fff, 1.25vmin -0.1vmin 0 -0.9vmin #fff;
    border-radius: 100% 100% 3vmin 100%;
}

.sky span:nth-child(2) {
    opacity: 0.7;
}

.sky span:nth-child(3) {
    transform: translateX(-8vmin) translateY(0.5vmin) scale(0.35);
    opacity: 0.9;
}

.sky span:nth-child(4) {
    transform: translateX(-28vmin) translateY(-5.5vmin);
    opacity: 0.4;
}

.sky span:nth-child(5) {
    transform: translateX(27vmin) translateY(-4.5vmin) scale(0.5);
}

.sky span:nth-child(6) {
    transform: translateX(27vmin) translateY(-38vmin) scale(3.75) scaleY(0.5) rotateY(180deg);
    opacity: 0.1;
}

.sky span:nth-child(7) {
    transform: translateX(-45vmin) translateY(-32vmin) scale(2.5) rotateY(180deg) scaleY(0.5);
}

.sky span:nth-child(8) {
    display: none;
}

.sky span:nth-child(9) {
    transform: translateX(50vmin) translateY(-26vmin) scale(2) scaleY(0.75);
}


/* rocks */
.sky i {
    background: var(--base-2);
    position: absolute;
    width: 10vmin;
    height: 3.5vmin;
    margin-left: -24vmin;
    border-radius: 100%;
    bottom: -2.25vmin;
    box-shadow: 0 -1px 0.15vmin 0 var(--base-1);
    z-index: 2;
}

.sky i + i {
    width: 8vmin;
    height: 4vmin;
    margin-left: -39vmin;
    bottom: -2.5vmin;
}
.sky i + i + i {
    width: 11vmin;
    height: 3.5vmin;
    margin-left: -56vmin;
    bottom: -2.2vmin;
}
.sky i + i + i + i {
    width: 9vmin;
    height: 3.5vmin;
    margin-left: 23.65vmin;
    bottom: -2.3vmin;
}
.sky i + i + i + i + i {
    width: 8vmin;
    height: 4vmin;
    margin-left: 39vmin;
    bottom: -2.5vmin;
}

.sky i + i + i + i + i + i {
    width: 11vmin;
    height: 3.75vmin;
    margin-left: 53vmin;
    bottom: -2.6vmin;
}


#night:checked ~ * {
    --sm: #fff;
    --sm-2: #7b7b7b;
    --sky-1: #060b28;
    --sky-2: #195eaa;
    --sea-1: #3264cb;
    --sea-2: #0059bb;
    --sea-3: #01072b;
    --red: #0c0926;
    --red-2: #323753;
    --white: #091140;
    --shine: #fff3;
    --base-1: #132141;
    --base-2: #06182c;
    --windows: #fc0;
}

#night:checked ~ .sky:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: repeating-conic-gradient(#FFF9 0%, #fff0 0.00002%, #fff0 0.00025%, #fff0 0.0175%);
}


/* windows */
.tower:before ,
.tower:after {
    content: "";
    position: absolute;
    background:
            linear-gradient(90deg, #fff0 0 0.3vmin, var(--white) 0 0.45vmin, #fff0 0 100%),
            linear-gradient(180deg, var(--windows) 0 0.35vmin, #fff0 0 0.45vmin, var(--windows) 0 0.75vmin, #fff0 0 0.85vmin, var(--windows) 0 100%);
    width: 0.7vmin;
    height: 1.3vmin;
    border-radius: 1vmin 1vmin 0 0;
    left: 2.6vmin;
    top: 0.5vmin;
    background-repeat: no-repeat;
    background-size: 100% 75%, 100% 100%;
    background-position: 0 100%, 0 0;
}

.tower:after {
    top: 8vmin;
}



/* labels */
label[for=night] {
    position: absolute;
    bottom: 9vmin;
    background: #0000;
    width: 36px;
    height: 36px;
    border-radius: 0%;
    --star: #fff 0 1px, #fff0 2px 100%;
    cursor: pointer;
    animation: hide-moon 0.5s ease-in-out 0s 1;
}

label[for=night]:before {
    content: "";
    position: absolute;
    bottom: 6px;
    background: #fff;
    width: 24px;
    height: 24px;
    left: 6px;
    border-radius: 100% 1% 100% 100%;
    background:
            radial-gradient(circle at 90% 10%, var(--star)),
            radial-gradient(circle at 68% 25%, var(--star)),
            radial-gradient(circle at 85% 40%, var(--star)),
            radial-gradient(circle at 95% 20%, #fff0 0 12px, #fff 13px 100%);
    cursor: pointer;
}

.footer {
    position: absolute;
    bottom: 3vmin;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.footer a {
    color: white;
}

@keyframes hide-moon {
    0% { transform: rotate(0deg) scale(0.25); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes hide-sun {
    0% { transform: rotate(0deg) scale(0.25);  }
    100% { transform: rotate(360deg) scale(1); }
}

#night:checked ~ label[for=night] {
    animation: hide-sun 0.5s ease-in-out 0s 1;
}

#night:checked ~ label[for=night]:before {
    width: 36px;
    height: 36px;
    left: 0;
    top: 0;
    border-radius: 1%;
    background:
            radial-gradient(circle at 4px 17px, var(--star)),
            radial-gradient(circle at 32px 17px, var(--star)),
            radial-gradient(circle at 18px 4px, var(--star)),
            radial-gradient(circle at 18px 32px, var(--star)),
            radial-gradient(circle at 11px 6px, var(--star)),
            radial-gradient(circle at 11px 30px, var(--star)),
            radial-gradient(circle at 6px 10px, var(--star)),
            radial-gradient(circle at 6px 25px, var(--star)),
            radial-gradient(circle at 25px 6px, var(--star)),
            radial-gradient(circle at 25px 30px, var(--star)),
            radial-gradient(circle at 30px 10px, var(--star)),
            radial-gradient(circle at 30px 25px, var(--star)),
            radial-gradient(circle at 50% 50%, #fff 0 9px, #fff0 10px 100%);
    cursor: pointer;
}