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

cyberweb 0.4.174 → 0.5.225

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>