html {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100vmax;
height: auto;
padding-top: 100vmax;
box-sizing: content-box;
background:
/* moon */
radial-gradient(farthest-side at 100% 0%, #258, #3690) 100% 0% / 60% 50%,
radial-gradient(circle at 70% 20%, #495b99 6%, #495b9900 6.1%),
radial-gradient(circle at 69% 21%, #fff 6%, #fff0 6.1%),
radial-gradient(at 60% 20%, #495b9988 6%, #495b9900 30%),
radial-gradient(at 75% 15%, #495b99cc 6%, #495b9900 20%),
radial-gradient(at 100% 45%, #495b9966 6%, #495b9900 20%),
/* stars */
radial-gradient(circle at 25% 15%, #fff6 0.15%, #fff0 0),
radial-gradient(circle at 50% 50%, #fff6 0.14%, #fff0 0),
radial-gradient(circle at 75% 35%, #fff6 0.15%, #fff0 0),
radial-gradient(circle at 15% 55%, #fff6 0.2%, #fff0 0),
radial-gradient(circle at 45% 5%, #fff6 0.175%, #fff0 0),
radial-gradient(circle at 13% 27%, #fff6 0.15%, #fff0 0),
radial-gradient(circle at 27% 61%, #fff6 0.14%, #fff0 0),
radial-gradient(circle at 33% 35%, #fff6 0.15%, #fff0 0),
radial-gradient(circle at 34% 34.9%, #fff6 0.16%, #fff0 0),
radial-gradient(circle at 65% 37%, #fff6 0.175%, #fff0 0),
radial-gradient(circle at 90% 70%, #fff6 0.15%, #fff0 0),
radial-gradient(circle at 86% 3%, #fff6 0.2%, #fff0 0),
radial-gradient(circle at 95% 15%, #fff6 0.175%, #fff0 0),
radial-gradient(circle at 3% 7%, #fff6 0.135%, #fff0 0),
radial-gradient(circle at 54% 57%, #fff6 0.14%, #fff0 0),
radial-gradient(circle at 43% 24%, #fff6 0.15%, #fff0 0),
/* shooting star */
radial-gradient(farthest-side at 0 0, #4050a0 40%, #3490) 0% 0% / 35% 25%,
linear-gradient(35deg, #0000 50%, #fff6 0 50.5%, #0000 0) 0% 0% / 20% 20%,
radial-gradient(circle at 20% 16.9%, #ff0c 0.075%, #ff00 0),
/* background mountains */
radial-gradient(farthest-side at 50% 100%, #0d1a45 99%, #0000 99.9%) 60% 82% / 20% 4.5%,
radial-gradient(farthest-side at 80% 100%, #0d1a45 99%, #0000 99.9%) 100% 82% / 12% 3%,
radial-gradient(farthest-side at 50% 100%, #0d1a45 99%, #0000 99.9%) 28% 82% / 40% 8.25%,
radial-gradient(farthest-side at 0 100%, #8086, #8080) 0 100% / 60% 35%,
radial-gradient(farthest-side at 0 100%, #8086, #8080) 0 75% / 60% 35%,
/* background sky and lake */
radial-gradient(at 70% 0%, #dcf5, #cab0 50%) 100% 100% / 100% 15%,
radial-gradient(100% 140% at 60% 50%, #1230, #1234) 0 85.5% / 100% 1%,
linear-gradient(#349, #cab 85vmax, #cab 0, #65a);
background-repeat: no-repeat;
}
html::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #010618;
bottom: 0;
left: 0;
mask:
linear-gradient(#000 85%, #0000 0),
radial-gradient(farthest-side at 50% 100%, #000 99.9%, #0000 0) 0 85% / 100% 2% no-repeat,
radial-gradient(farthest-side at 0% 50%, #000 99.9%, #0000 0) 0 92% / 40% 8% no-repeat,
radial-gradient(farthest-side at 0% 100%, #000 99.9%, #0000 0) 0 100% / 100% 8% no-repeat;
-webkit-mask:
linear-gradient(#000 85%, #0000 0),
radial-gradient(farthest-side at 50% 100%, #000 99.9%, #0000 0) 0 85% / 100% 2% no-repeat,
radial-gradient(farthest-side at 0% 50%, #000 99.3%, #0000 99.9%) 0 90% / 30% 6% no-repeat,
radial-gradient(farthest-side at 100% 0%, #0000 99.9%, #000 0) 0 100% / 100% 15% no-repeat;
clip-path: polygon(100.80% 83.90%, 98.30% 83.50%, 97.20% 84.20%, 95.90% 84.60%, 94.90% 84.30%, 93.70% 83.50%, 92.20% 82.70%, 90.10% 83.20%, 89.40% 83.40%, 88.30% 83.40%, 86.80% 83.10%, 85.10% 83.80%, 83% 84.20%, 81.50% 84.70%, 77.60% 85.40%, 75.50% 84.80%, 74.50% 83.40%, 72.80% 82.10%, 70.40% 81.80%, 69.30% 81.80%, 67.50% 82.60%, 66.10% 82.60%, 65.30% 81.80%, 65% 79.90%, 64.50% 78.50%, 63.40% 78.20%, 63.20% 78.80%, 62.30% 78.50%, 61.80% 80.60%, 60.40% 81.10%, 59% 81%, 58.20% 80.40%, 58.50% 81.40%, 57.20% 82%, 55.90% 82.90%, 54.20% 83.80%, 52.80% 83.80%, 51% 83.70%, 49.90% 83.60%, 46.70% 80.30%, 46.70% 77.60%, 45.90% 76.80%, 43.80% 75.40%, 41.50% 76%, 40.50% 74.50%, 40% 72.40%, 39.80% 74.30%, 38.70% 74.30%, 38.70% 73.20%, 37.10% 73.20%, 37% 74.40%, 35.70% 74.80%, 34.50% 75.90%, 29.40% 76.50%, 28.50% 75.40%, 28.80% 74.30%, 27.80% 74.80%, 26.50% 76.40%, 25.10% 76%, 23.90% 75.10%, 23% 75.80%, 21.30% 76.70%, 19.40% 76.50%, 17% 76.50%, 15.70% 76.40%, 13.10% 76.20%, 11.40% 75.40%, 10.30% 74.70%, 8.50% 75.70%, 6.10% 76%, 4.60% 75.70%, 3.50% 73.40%, 3.70% 70.30%, 2.40% 67.40%, 3.20% 66.20%, 2.60% 64.80%, 2.60% 61.10%, 3.20% 59.50%, 2.60% 55.90%, 3.10% 52.90%, 3% 49.90%, 4.10% 46.50%, 3.90% 43.20%, 2.90% 40%, 5.20% 41.40%, 6.80% 45.50%, 6.50% 43%, 8.28% 47.38%, 7.80% 43.58%, 9.62% 46.35%, 10.60% 50.95%, 10.55% 45.83%, 12.48% 46.95%, 14.03% 49.55%, 12.68% 44.68%, 16.10% 45%, 10.85% 42.88%, 13.90% 43.10%, 15.93% 43.62%, 13.50% 41.80%, 8.10% 39.90%, 10.90% 40%, 6% 37.70%, 3.60% 36.90%, 6.20% 36.90%, 8.80% 38.30%, 6.80% 35.70%, 4.10% 34.70%, 2.40% 34.90%, 5.30% 33%, 7.50% 32.90%, 5.80% 32.20%, 9.80% 31.80%, 6.60% 30.90%, 4.60% 30.90%, 6.20% 29.90%, 9.80% 29.70%, 6.90% 28.20%, 3.40% 29.10%, 5% 26.10%, 1.40% 29.20%, 0% 34%, 0% 102.50%, 102.50% 102.30%);
-webkit-clip-path: polygon(100.80% 83.90%, 98.30% 83.50%, 97.20% 84.20%, 95.90% 84.60%, 94.90% 84.30%, 93.70% 83.50%, 92.20% 82.70%, 90.10% 83.20%, 89.40% 83.40%, 88.30% 83.40%, 86.80% 83.10%, 85.10% 83.80%, 83% 84.20%, 81.50% 84.70%, 77.60% 85.40%, 75.50% 84.80%, 74.50% 83.40%, 72.80% 82.10%, 70.40% 81.80%, 69.30% 81.80%, 67.50% 82.60%, 66.10% 82.60%, 65.30% 81.80%, 65% 79.90%, 64.50% 78.50%, 63.40% 78.20%, 63.20% 78.80%, 62.30% 78.50%, 61.80% 80.60%, 60.40% 81.10%, 59% 81%, 58.20% 80.40%, 58.50% 81.40%, 57.20% 82%, 55.90% 82.90%, 54.20% 83.80%, 52.80% 83.80%, 51% 83.70%, 49.90% 83.60%, 46.70% 80.30%, 46.70% 77.60%, 45.90% 76.80%, 43.80% 75.40%, 41.50% 76%, 40.50% 74.50%, 40% 72.40%, 39.80% 74.30%, 38.70% 74.30%, 38.70% 73.20%, 37.10% 73.20%, 37% 74.40%, 35.70% 74.80%, 34.50% 75.90%, 29.40% 76.50%, 28.50% 75.40%, 28.80% 74.30%, 27.80% 74.80%, 26.50% 76.40%, 25.10% 76%, 23.90% 75.10%, 23% 75.80%, 21.30% 76.70%, 19.40% 76.50%, 17% 76.50%, 15.70% 76.40%, 13.10% 76.20%, 11.40% 75.40%, 10.30% 74.70%, 8.50% 75.70%, 6.10% 76%, 4.60% 75.70%, 3.50% 73.40%, 3.70% 70.30%, 2.40% 67.40%, 3.20% 66.20%, 2.60% 64.80%, 2.60% 61.10%, 3.20% 59.50%, 2.60% 55.90%, 3.10% 52.90%, 3% 49.90%, 4.10% 46.50%, 3.90% 43.20%, 2.90% 40%, 5.20% 41.40%, 6.80% 45.50%, 6.50% 43%, 8.28% 47.38%, 7.80% 43.58%, 9.62% 46.35%, 10.60% 50.95%, 10.55% 45.83%, 12.48% 46.95%, 14.03% 49.55%, 12.68% 44.68%, 16.10% 45%, 10.85% 42.88%, 13.90% 43.10%, 15.93% 43.62%, 13.50% 41.80%, 8.10% 39.90%, 10.90% 40%, 6% 37.70%, 3.60% 36.90%, 6.20% 36.90%, 8.80% 38.30%, 6.80% 35.70%, 4.10% 34.70%, 2.40% 34.90%, 5.30% 33%, 7.50% 32.90%, 5.80% 32.20%, 9.80% 31.80%, 6.60% 30.90%, 4.60% 30.90%, 6.20% 29.90%, 9.80% 29.70%, 6.90% 28.20%, 3.40% 29.10%, 5% 26.10%, 1.40% 29.20%, 0% 34%, 0% 102.50%, 102.50% 102.30%);
}
html::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background:
/* ship */
/* linear-gradient(#010618 0 0) 42% 91.5% / 4% 2%,
radial-gradient(45% 140% at 59% 0%, #010618 99%, #01061800 0) 40% 92% / 10% 1.5%, */
/* mountains */
linear-gradient(#0d1a45 85%, #0000 0);
background-repeat: no-repeat;
bottom: 0;
left: 0;
clip-path: polygon(102% 78%, 99% 77%, 98% 77%, 97% 76%, 95% 77%, 94% 77%, 94% 78%, 93% 79%, 93% 80%, 90% 81%, 88% 81%, 86% 81%, 84% 82%, 83% 82%, 80% 82%, 78% 81%, 77% 80%, 76% 80%, 75% 79%, 74% 80%, 73% 80%, 72% 79%, 71% 80%, 70% 81%, 69% 80%, 67% 80%, 63% 80%, 61% 80%, 61% 79%, 59% 79%, 56% 79%, 55% 78%, 54% 79%, 52% 78%, 52% 77%, 51% 78%, 50% 77%, 49% 76%, 47% 75%, 45% 74%, 43% 74%, 43% 73%, 42% 73%, 41% 74%, 41% 73%, 39% 73%, 36% 76%, -1% 78%, -2% 102%, 101% 102%);
-webkit-clip-path: polygon(102% 78%, 99% 77%, 98% 77%, 97% 76%, 95% 77%, 94% 77%, 94% 78%, 93% 79%, 93% 80%, 90% 81%, 88% 81%, 86% 81%, 84% 82%, 83% 82%, 80% 82%, 78% 81%, 77% 80%, 76% 80%, 75% 79%, 74% 80%, 73% 80%, 72% 79%, 71% 80%, 70% 81%, 69% 80%, 67% 80%, 63% 80%, 61% 80%, 61% 79%, 59% 79%, 56% 79%, 55% 78%, 54% 79%, 52% 78%, 52% 77%, 51% 78%, 50% 77%, 49% 76%, 47% 75%, 45% 74%, 43% 74%, 43% 73%, 42% 73%, 41% 74%, 41% 73%, 39% 73%, 36% 76%, -1% 78%, -2% 102%, 101% 102%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.