RubyGems - cyberweb - Versions diffs - 0.4.174 → 0.5.225 - Mend

cyberweb 0.4.174 → 0.5.225

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of cyberweb might be problematic. Click here for more details.

Files changed (625) hide show

data/examples/css/lighthouse_example/lighthouse_example.html ADDED Viewed

@@ -0,0 +1,1161 @@
+<html>
+<head>
+<title>Lighthouse Example</title>
+<style>
+html, body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+ html {
+  box-sizing: border-box;
+}
+ *, *:before, *:after {
+  box-sizing: inherit;
+}
+ * {
+  position: absolute;
+}
+ *:before, *:after {
+  content: "";
+  position: absolute;
+}
+ .scene {
+  width: 100vw;
+  height: 100vh;
+}
+ .background {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+  background-color: #29284c;
+  background-image: linear-gradient(#29284c 0%, #4c4b82 10%, #717ae1 60%, #75e2fa 90%);
+}
+ .mountains {
+  width: 100%;
+  height: 250px;
+  bottom: 65px;
+  z-index: 3;
+}
+ .mountains .mountain {
+  width: 250px;
+  height: 250px;
+  right: 50px;
+  bottom: -40px;
+  background-color: #717ae1;
+  transform: rotate(45deg);
+  border-radius: 3px;
+}
+ .mountains .mountain:after {
+  width: 100%;
+  height: 100%;
+  opacity: 0.7;
+  background-image: linear-gradient(135deg, #4c4b82 0%, #717ae1 20%, #75e2fa 40%);
+}
+ .mountains .mountain:nth-child(2) {
+  width: 240px;
+  height: 240px;
+  right: 220px;
+  z-index: 2;
+}
+ .mountains .mountain:nth-child(3) {
+  width: 260px;
+  height: 260px;
+  right: 350px;
+}
+ .mountains .mountain:nth-child(4) {
+  width: 200px;
+  height: 200px;
+  right: 130px;
+  bottom: -70px;
+  z-index: 3;
+}
+ .mountains .mountain:nth-child(4):after {
+  background-image: linear-gradient(135deg, #4c4b82 0%, #717ae1 6%, #75e2fa 20%);
+}
+ .sea {
+  width: 100%;
+  height: 170px;
+  bottom: 0;
+  left: 0;
+  background: #29284c;
+  background-image: linear-gradient(to top, #29284c 0%, #4c4b82 30%, #717ae1 60%, #75e2fa 90%);
+  z-index: 4;
+}
+ .sea .wave {
+  height: 3px;
+  background-color: #d6d9f6;
+  border-radius: 100%;
+  opacity: 0.2;
+  animation: wave 5s linear infinite;
+}
+ .sea .wave:nth-of-type(1) {
+  width: 86px;
+  bottom: 55px;
+  left: 38vw;
+  opacity: 0.5;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(2) {
+  width: 53px;
+  bottom: 150px;
+  left: 55vw;
+  opacity: 0.4;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(3) {
+  width: 142px;
+  bottom: 53px;
+  left: 66vw;
+  opacity: 0.3;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(4) {
+  width: 109px;
+  bottom: 123px;
+  left: 35vw;
+  opacity: 0.5;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(5) {
+  width: 92px;
+  bottom: 89px;
+  left: 12vw;
+  opacity: 0.5;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(6) {
+  width: 108px;
+  bottom: 48px;
+  left: 63vw;
+  opacity: 0.2;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(7) {
+  width: 71px;
+  bottom: 153px;
+  left: 75vw;
+  opacity: 0.3;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(8) {
+  width: 55px;
+  bottom: 139px;
+  left: 6vw;
+  opacity: 0.3;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(9) {
+  width: 93px;
+  bottom: 163px;
+  left: 55vw;
+  opacity: 0.1;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(10) {
+  width: 134px;
+  bottom: 58px;
+  left: 95vw;
+  opacity: 0.1;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(11) {
+  width: 102px;
+  bottom: 156px;
+  left: 23vw;
+  opacity: 0.2;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(12) {
+  width: 146px;
+  bottom: 38px;
+  left: 94vw;
+  opacity: 0.4;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(13) {
+  width: 128px;
+  bottom: 11px;
+  left: 14vw;
+  opacity: 0.4;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(14) {
+  width: 146px;
+  bottom: 43px;
+  left: 38vw;
+  opacity: 0.4;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(15) {
+  width: 123px;
+  bottom: 31px;
+  left: 40vw;
+  opacity: 0.1;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(16) {
+  width: 125px;
+  bottom: 54px;
+  left: 68vw;
+  opacity: 0.3;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(17) {
+  width: 103px;
+  bottom: 150px;
+  left: 16vw;
+  opacity: 0.2;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(18) {
+  width: 59px;
+  bottom: 49px;
+  left: 15vw;
+  opacity: 0.5;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(19) {
+  width: 89px;
+  bottom: 52px;
+  left: 94vw;
+  opacity: 0.5;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(20) {
+  width: 142px;
+  bottom: 143px;
+  left: 56vw;
+  opacity: 0.1;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(21) {
+  width: 111px;
+  bottom: 169px;
+  left: 56vw;
+  opacity: 0.1;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(22) {
+  width: 136px;
+  bottom: 163px;
+  left: 25vw;
+  opacity: 0.3;
+  animation-delay: 2s;
+}
+ .sea .wave:nth-of-type(23) {
+  width: 139px;
+  bottom: 103px;
+  left: 31vw;
+  opacity: 0.2;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(24) {
+  width: 101px;
+  bottom: 147px;
+  left: 92vw;
+  opacity: 0.5;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(25) {
+  width: 133px;
+  bottom: 154px;
+  left: 97vw;
+  opacity: 0.2;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(26) {
+  width: 134px;
+  bottom: 107px;
+  left: 58vw;
+  opacity: 0.3;
+  animation-delay: 3s;
+}
+ .sea .wave:nth-of-type(27) {
+  width: 144px;
+  bottom: 162px;
+  left: 29vw;
+  opacity: 0.1;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(28) {
+  width: 147px;
+  bottom: 81px;
+  left: 29vw;
+  opacity: 0.2;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(29) {
+  width: 141px;
+  bottom: 144px;
+  left: 64vw;
+  opacity: 0.1;
+  animation-delay: 1s;
+}
+ .sea .wave:nth-of-type(30) {
+  width: 95px;
+  bottom: 13px;
+  left: 5vw;
+  opacity: 0.1;
+  animation-delay: 2s;
+}
+ .boat {
+  width: 90px;
+  height: 90px;
+  bottom: 90px;
+  animation: boat 100s linear infinite;
+}
+ .boat:after {
+  background-image: linear-gradient(90deg, rgba(214, 217, 246, 0.7) 30%, rgba(255, 255, 255, 0) 100%);
+  width: 200px;
+  height: 8px;
+  top: 105px;
+  left: 20px;
+  border-radius: 40%;
+  z-index: -1;
+}
+ .boat:before {
+  width: 92px;
+  height: 50px;
+  left: 25px;
+  bottom: -70px;
+  background-image: linear-gradient(to bottom, rgba(41, 40, 76, 0.8) 30%, rgba(41, 40, 76, 0) 100%);
+  z-index: -1;
+  animation: boatShadow 100s linear infinite;
+}
+ .boat .base {
+  width: 110px;
+  height: 25px;
+  bottom: -20px;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
+  background-color: #4c4b82;
+}
+ .boat .sail:nth-child(1) {
+  width: 90px;
+  height: 80px;
+  left: 5px;
+  clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
+  background: linear-gradient(#b9befa 0%, #4c4b82 60%);
+}
+ .boat .sail:nth-child(2) {
+  width: 80px;
+  height: 70px;
+  left: 15px;
+  bottom: 10px;
+  transform: scaleX(-1);
+  clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
+  background: linear-gradient(#b9befa 0%, #4c4b82 60%);
+}
+ .moon {
+  width: 80px;
+  height: 80px;
+  top: 25%;
+  right: 10%;
+  border-radius: 50%;
+  z-index: 2;
+  background-color: #d6d9f6;
+  box-shadow: 0 0 10px #d6d9f6, 0 0 20px #d6d9f6, 0 0 30px #d6d9f6, 0 0 40px #d6d9f6, 0 0 50px #75e2fa, 0 0 100px #d6d9f6;
+}
+ .stars {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+ .stars .star {
+  border-radius: 50%;
+  background-color: #b9befa;
+  animation: twinkle 5s linear infinite;
+}
+ .stars .star:nth-of-type(1) {
+  width: 4px;
+  height: 4px;
+  top: 66vh;
+  left: 86vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(2) {
+  width: 3px;
+  height: 3px;
+  top: 41vh;
+  left: 47vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(3) {
+  width: 1px;
+  height: 1px;
+  top: 58vh;
+  left: 66vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(4) {
+  width: 4px;
+  height: 4px;
+  top: 78vh;
+  left: 3vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(5) {
+  width: 1px;
+  height: 1px;
+  top: 54vh;
+  left: 3vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(6) {
+  width: 1px;
+  height: 1px;
+  top: 100vh;
+  left: 38vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(7) {
+  width: 4px;
+  height: 4px;
+  top: 48vh;
+  left: 43vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(8) {
+  width: 1px;
+  height: 1px;
+  top: 66vh;
+  left: 45vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(9) {
+  width: 1px;
+  height: 1px;
+  top: 79vh;
+  left: 89vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(10) {
+  width: 2px;
+  height: 2px;
+  top: 77vh;
+  left: 87vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(11) {
+  width: 1px;
+  height: 1px;
+  top: 63vh;
+  left: 92vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(12) {
+  width: 2px;
+  height: 2px;
+  top: 26vh;
+  left: 92vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(13) {
+  width: 3px;
+  height: 3px;
+  top: 22vh;
+  left: 40vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(14) {
+  width: 4px;
+  height: 4px;
+  top: 80vh;
+  left: 95vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(15) {
+  width: 2px;
+  height: 2px;
+  top: 60vh;
+  left: 35vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(16) {
+  width: 4px;
+  height: 4px;
+  top: 17vh;
+  left: 12vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(17) {
+  width: 3px;
+  height: 3px;
+  top: 54vh;
+  left: 18vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(18) {
+  width: 1px;
+  height: 1px;
+  top: 96vh;
+  left: 18vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(19) {
+  width: 3px;
+  height: 3px;
+  top: 65vh;
+  left: 75vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(20) {
+  width: 2px;
+  height: 2px;
+  top: 29vh;
+  left: 76vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(21) {
+  width: 4px;
+  height: 4px;
+  top: 87vh;
+  left: 30vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(22) {
+  width: 3px;
+  height: 3px;
+  top: 5vh;
+  left: 8vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(23) {
+  width: 3px;
+  height: 3px;
+  top: 49vh;
+  left: 3vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(24) {
+  width: 4px;
+  height: 4px;
+  top: 62vh;
+  left: 77vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(25) {
+  width: 1px;
+  height: 1px;
+  top: 69vh;
+  left: 28vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(26) {
+  width: 1px;
+  height: 1px;
+  top: 8vh;
+  left: 68vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(27) {
+  width: 4px;
+  height: 4px;
+  top: 13vh;
+  left: 26vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(28) {
+  width: 2px;
+  height: 2px;
+  top: 75vh;
+  left: 54vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(29) {
+  width: 4px;
+  height: 4px;
+  top: 41vh;
+  left: 69vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(30) {
+  width: 3px;
+  height: 3px;
+  top: 29vh;
+  left: 76vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(31) {
+  width: 4px;
+  height: 4px;
+  top: 27vh;
+  left: 37vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(32) {
+  width: 2px;
+  height: 2px;
+  top: 86vh;
+  left: 92vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(33) {
+  width: 2px;
+  height: 2px;
+  top: 6vh;
+  left: 16vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(34) {
+  width: 1px;
+  height: 1px;
+  top: 45vh;
+  left: 47vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(35) {
+  width: 4px;
+  height: 4px;
+  top: 94vh;
+  left: 97vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(36) {
+  width: 4px;
+  height: 4px;
+  top: 56vh;
+  left: 75vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(37) {
+  width: 2px;
+  height: 2px;
+  top: 35vh;
+  left: 32vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(38) {
+  width: 4px;
+  height: 4px;
+  top: 25vh;
+  left: 27vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(39) {
+  width: 3px;
+  height: 3px;
+  top: 69vh;
+  left: 10vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(40) {
+  width: 2px;
+  height: 2px;
+  top: 42vh;
+  left: 16vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(41) {
+  width: 2px;
+  height: 2px;
+  top: 30vh;
+  left: 22vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(42) {
+  width: 4px;
+  height: 4px;
+  top: 44vh;
+  left: 93vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(43) {
+  width: 1px;
+  height: 1px;
+  top: 32vh;
+  left: 15vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(44) {
+  width: 4px;
+  height: 4px;
+  top: 4vh;
+  left: 15vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(45) {
+  width: 2px;
+  height: 2px;
+  top: 42vh;
+  left: 24vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(46) {
+  width: 1px;
+  height: 1px;
+  top: 38vh;
+  left: 30vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(47) {
+  width: 2px;
+  height: 2px;
+  top: 33vh;
+  left: 87vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(48) {
+  width: 3px;
+  height: 3px;
+  top: 52vh;
+  left: 43vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(49) {
+  width: 4px;
+  height: 4px;
+  top: 55vh;
+  left: 1vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(50) {
+  width: 4px;
+  height: 4px;
+  top: 8vh;
+  left: 49vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(51) {
+  width: 3px;
+  height: 3px;
+  top: 34vh;
+  left: 81vw;
+  animation-delay: 4s;
+}
+ .stars .star:nth-of-type(52) {
+  width: 4px;
+  height: 4px;
+  top: 3vh;
+  left: 37vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(53) {
+  width: 4px;
+  height: 4px;
+  top: 84vh;
+  left: 99vw;
+  animation-delay: 1s;
+}
+ .stars .star:nth-of-type(54) {
+  width: 1px;
+  height: 1px;
+  top: 63vh;
+  left: 52vw;
+  animation-delay: 2s;
+}
+ .stars .star:nth-of-type(55) {
+  width: 3px;
+  height: 3px;
+  top: 92vh;
+  left: 26vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(56) {
+  width: 3px;
+  height: 3px;
+  top: 83vh;
+  left: 42vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(57) {
+  width: 4px;
+  height: 4px;
+  top: 49vh;
+  left: 7vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(58) {
+  width: 1px;
+  height: 1px;
+  top: 29vh;
+  left: 52vw;
+  animation-delay: 3s;
+}
+ .stars .star:nth-of-type(59) {
+  width: 1px;
+  height: 1px;
+  top: 59vh;
+  left: 9vw;
+  animation-delay: 5s;
+}
+ .stars .star:nth-of-type(60) {
+  width: 1px;
+  height: 1px;
+  top: 72vh;
+  left: 64vw;
+  animation-delay: 2s;
+}
+ .lighthouse-group {
+  width: 50%;
+  height: 100%;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+}
+ .land {
+  width: 400px;
+  height: 60px;
+  left: -30px;
+  bottom: 0;
+  background-image: linear-gradient(to top, #29284c 80%, #717ae1 100%);
+  transform: skewX(35deg);
+  border-radius: 10px;
+}
+ .lighthouse-holder {
+  width: 100px;
+  height: 480px;
+  bottom: 80px;
+  left: 180px;
+}
+ .lighthouse-holder .shadow {
+  width: 117px;
+  height: 50px;
+  left: -32px;
+  bottom: -70px;
+  background: #29284c;
+  transform: skewX(-45deg);
+}
+ .lighthouse-holder .lighthouse {
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: perspective(600px) rotateX(20deg);
+  background-color: #d6d9f6;
+  background-image: repeating-linear-gradient(-40deg, transparent, transparent 60px, #4c4b82 60px, #4c4b82 120px);
+}
+ .lighthouse-holder .lighthouse:after {
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(90deg, rgba(214, 217, 246, 0.6) 0%, #29284c 8%, transparent 70%, rgba(214, 217, 246, 0.4) 100%);
+}
+ .lighthouse-holder .top {
+  width: 94px;
+  height: 60px;
+  left: 3px;
+  top: -15px;
+}
+ .lighthouse-holder .top .light-container {
+  height: 40px;
+  min-width: 300px;
+  width: 35vw;
+  bottom: 4px;
+  left: 40px;
+  transform-style: preserve-3d;
+  transform-origin: left bottom;
+  transform: perspective(500px) rotateY(0);
+  animation: lightRotate 20s linear infinite;
+}
+ .lighthouse-holder .top .light-container .light {
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform-origin: left center;
+  transform: perspective(500px) rotateY(-35deg);
+  background: linear-gradient(90deg, #f7f2b4 40%, rgba(255, 255, 255, 0) 100%);
+}
+ .lighthouse-holder .top .rail {
+  width: 100%;
+  height: 17px;
+  bottom: 1px;
+  border: 3px solid #29284c;
+  border-radius: 1px;
+  transform: perspective(1000px) rotateX(-35deg);
+  background-image: repeating-linear-gradient(90deg, #29284c, #29284c 3px, #9e9ebe 3px, #f7f2b4 10px);
+  background-position: -2px 0;
+}
+ .lighthouse-holder .top .middle {
+  width: 88px;
+  height: 35px;
+  left: 3px;
+  bottom: 14px;
+  border: 2px solid #29284c;
+  border-radius: 3px;
+  background-image: repeating-linear-gradient(90deg, #29284c, #29284c 4px, #9e9ebe 4px, rgba(255, 255, 255, 0) 21px);
+  background-position: -2px 0;
+}
+ .lighthouse-holder .top .middle:before {
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-color: #f7f2b4;
+  box-shadow: 0 0 10px #d6d9f6, 0 0 20px #f7f2b4, 0 0 30px #f7f2b4, 0 0 40px #f7f2b4, 0 0 70px #f7f2b4;
+}
+ .lighthouse-holder .top .roof {
+  width: 0;
+  height: 0;
+  bottom: 45px;
+  left: -3px;
+  border-left: 50px solid rgba(255, 255, 255, 0);
+  border-right: 50px solid rgba(255, 255, 255, 0);
+  border-bottom: 40px solid #29284c;
+}
+ .lighthouse-holder .top .roof:before {
+  width: 14px;
+  height: 14px;
+  bottom: -7px;
+  left: -7px;
+  background-color: #29284c;
+  border-radius: 50%;
+}
+ .lighthouse-holder .top .roof:after {
+  width: 4px;
+  height: 14px;
+  left: -2px;
+  bottom: 5px;
+  background-color: #29284c;
+  border-radius: 3px;
+}
+ .lighthouse-holder .top .roof .roof-light {
+  width: 100px;
+  height: 40px;
+  left: -50px;
+  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
+  background-image: linear-gradient(135deg, #29284c 40%, rgba(247, 242, 180, 0.5) 100%);
+}
+ .lighthouse-holder .top .glow {
+  width: 100px;
+  height: 60px;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  border-radius: 50%;
+  background-color: #f7f2b4;
+  box-shadow: 0 0 10px #f7f2b4, 0 0 20px #f7f2b4, 0 0 30px #f7f2b4, 0 0 40px #f7f2b4, 0 0 50px #f7f2b4, 0 0 60px #f7f2b4, 0 0 70px #f7f2b4, 0 0 80px #f7f2b4;
+  animation: lightGlow 20s linear infinite;
+}
+ .lighthouse-holder .windows {
+  height: 100%;
+  width: 100%;
+}
+ .lighthouse-holder .windows .window {
+  width: 15px;
+  height: 25px;
+  left: 43px;
+  background-color: #29284c;
+  border-bottom: 2px solid rgba(185, 190, 250, 0.7);
+  border-radius: 25px 25px 0 0;
+}
+ .lighthouse-holder .windows .window:nth-of-type(1) {
+  bottom: 90px;
+}
+ .lighthouse-holder .windows .window:nth-of-type(2) {
+  bottom: 180px;
+}
+ .lighthouse-holder .windows .window:nth-of-type(3) {
+  bottom: 270px;
+}
+ .lighthouse-holder .windows .window:nth-of-type(4) {
+  bottom: 360px;
+}
+ .lighthouse-holder .door {
+  width: 25px;
+  height: 40px;
+  background-color: #29284c;
+  left: 38px;
+  bottom: -2px;
+  border-radius: 2px 2px 0 0;
+}
+ .lighthouse-holder .door .stairs {
+  width: 27px;
+  height: 28px;
+  top: 34px;
+  left: -1px;
+  background-color: #29284c;
+  transform: perspective(100px) rotateX(45deg);
+  background-image: repeating-linear-gradient(to bottom, #29284c, #29284c 4px, #b9befa 4px, rgba(255, 255, 255, 0.1) 5px);
+}
+ @keyframes twinkle {
+  50% {
+    opacity: 0.3;
+  }
+}
+ @keyframes wave {
+  50% {
+    transform: translateX(-10px);
+  }
+}
+ @keyframes lightRotate {
+  25% {
+    transform: perspective(500px) rotateY(35deg);
+  }
+  75% {
+    transform: perspective(500px) rotateY(-35deg);
+  }
+}
+ @keyframes lightGlow {
+  50% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+}
+ @keyframes boat {
+  0% {
+    transform: translateX(120vw) scale(0.8);
+  }
+  80%, 100% {
+    transform: translateX(-25vw) scale(0.8);
+  }
+}
+@keyframes boatShadow {
+  0% {
+    transform: skewX(35deg) translateX(15px);
+  }
+  50%, 100% {
+    transform: skewX(-55deg) translateX(-40px);
+  }
+}
+</style>
+</head>
+<body>
+<div class="scene">
+<div class="background">
+<div class="stars">
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+<div class="star"></div>
+</div>
+<div class="moon"></div>
+<div class="mountains">
+<div class="mountain"></div>
+<div class="mountain"></div>
+<div class="mountain"></div>
+<div class="mountain"></div>
+</div>
+<div class="sea">
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="wave"></div>
+<div class="boat">
+<div class="sail"></div>
+<div class="sail"></div>
+<div class="base"></div>
+</div>
+</div>
+</div>
+<div class="lighthouse-group">
+<div class="land"></div>
+<div class="lighthouse-holder">
+<div class="shadow"></div>
+<div class="lighthouse"></div>
+<div class="top">
+<div class="light-container">
+<div class="light"></div>
+</div>
+<div class="rail"></div>
+<div class="middle"></div>
+<div class="roof">
+<div class="roof-light"></div>
+</div>
+<div class="glow"></div>
+</div>
+<div class="windows">
+<div style="margin-left: 7em; width: 700px; font-weight:bold;">
+CSS on the spotlight. \o/ (Remove this if you'd like to.)
+</div>
+<div class="window"></div>
+<div class="window"></div>
+<div class="window"></div>
+<div class="window"></div>
+</div>
+<div class="door">
+<div class="stairs"></div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>