<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='container'> <div class='photo'> <div class='window'> <div class='blurred'> <div class='photo'></div> </div> <div class='rain'> <div class='shadows'> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> <div class='shadow'></div> </div> <div class='drops'> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> <div class='drop'></div> </div> </div> <div class='frosted'></div> <div class='content'> <div class='card'> <img class='avatar'> <h1 class='name'>Josh W Lewis</h1> <p class='intro'> Hi, I'm Josh. I build and design software for the web. I'm currently building a new experience for teams and organizations at Heroku. </p> </div> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Lato:100,300); html, body { height: 100vh; margin: 0; padding: 0; background: #333; font-family: "Lato", sans-serif; } .container { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .photo { height: 100vh; width: 100vw; background: url("https://farm8.staticflickr.com/7238/6880444874_a691311ced_k.jpg"); background-size: cover; background-position: 50%; } .window { position: absolute; z-index: 10; top: 20vh; left: 15vw; width: 70vw; height: 60vh; overflow: hidden; border-radius: 20px; } .window .photo { position: absolute; z-index: 20; top: -20vh; left: -15vw; } .blurred { -webkit-filter: blur(12px); filter: blur(12px); } .frosted { position: relative; background: #333; height: 100%; opacity: 0.3125; border-radius: 20px; } .rain, .shadows, .drops { position: absolute; } .drop { position: absolute; border-radius: 100%; background-image: url("https://farm8.staticflickr.com/7238/6880444874_a691311ced_k.jpg"); background-position: 50%; opacity: 0.5; -webkit-filter: blur(0.5px); filter: blur(0.5px); } .shadow { position: absolute; z-index: 5; margin-left: 2px; margin-top: 1px; border-radius: 100%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } .drop:nth-child(1) { left: 13.71389vw; top: 46.31026vh; width: 4px; height: 5.2px; background-size: 4px 5.2px; background-position: 19.59127% 77.18376%; -webkit-animation: 45.21214s streaking infinite; animation: 45.21214s streaking infinite; } .shadow:nth-child(1) { left: 13.71389vw; top: 46.31026vh; width: 0px; height: 4.2px; -webkit-animation: 45.21214s streaking infinite; animation: 45.21214s streaking infinite; } .drop:nth-child(2) { left: 33.4289vw; top: 50.55998vh; width: 10px; height: 15px; background-size: 10px 15px; background-position: 47.75557% 84.26664%; -webkit-animation: 36.74868s streaking infinite; animation: 36.74868s streaking infinite; } .shadow:nth-child(2) { left: 33.4289vw; top: 50.55998vh; width: 6px; height: 14px; -webkit-animation: 36.74868s streaking infinite; animation: 36.74868s streaking infinite; } .drop:nth-child(3) { left: 61.84917vw; top: 30.51764vh; width: 6px; height: 7.63636px; background-size: 6px 7.63636px; background-position: 88.35596% 50.86273%; -webkit-animation: 45.10894s streaking infinite; animation: 45.10894s streaking infinite; } .shadow:nth-child(3) { left: 61.84917vw; top: 30.51764vh; width: 2px; height: 6.63636px; -webkit-animation: 45.10894s streaking infinite; animation: 45.10894s streaking infinite; } .drop:nth-child(4) { left: 3.27474vw; top: 33.75359vh; width: 12px; height: 13.63636px; background-size: 12px 13.63636px; background-position: 4.6782% 56.25598%; -webkit-animation: 13.42506s streaking infinite; animation: 13.42506s streaking infinite; } .shadow:nth-child(4) { left: 3.27474vw; top: 33.75359vh; width: 8px; height: 12.63636px; -webkit-animation: 13.42506s streaking infinite; animation: 13.42506s streaking infinite; } .drop:nth-child(5) { left: 14.64008vw; top: 55.39868vh; width: 8px; height: 11px; background-size: 8px 11px; background-position: 20.9144% 92.33113%; -webkit-animation: 47.04012s streaking infinite; animation: 47.04012s streaking infinite; } .shadow:nth-child(5) { left: 14.64008vw; top: 55.39868vh; width: 4px; height: 10px; -webkit-animation: 47.04012s streaking infinite; animation: 47.04012s streaking infinite; } .drop:nth-child(6) { left: 42.66676vw; top: 11.60626vh; width: 11px; height: 12.32px; background-size: 11px 12.32px; background-position: 60.95252% 19.34377%; -webkit-animation: 20.49071s streaking infinite; animation: 20.49071s streaking infinite; } .shadow:nth-child(6) { left: 42.66676vw; top: 11.60626vh; width: 7px; height: 11.32px; -webkit-animation: 20.49071s streaking infinite; animation: 20.49071s streaking infinite; } .drop:nth-child(7) { left: 41.5593vw; top: 49.26766vh; width: 8px; height: 9.71429px; background-size: 8px 9.71429px; background-position: 59.37043% 82.11277%; -webkit-animation: 49.52895s streaking infinite; animation: 49.52895s streaking infinite; } .shadow:nth-child(7) { left: 41.5593vw; top: 49.26766vh; width: 4px; height: 8.71429px; -webkit-animation: 49.52895s streaking infinite; animation: 49.52895s streaking infinite; } .drop:nth-child(8) { left: 13.86237vw; top: 47.34238vh; width: 5px; height: 6.875px; background-size: 5px 6.875px; background-position: 19.80338% 78.90397%; -webkit-animation: 26.29832s streaking infinite; animation: 26.29832s streaking infinite; } .shadow:nth-child(8) { left: 13.86237vw; top: 47.34238vh; width: 1px; height: 5.875px; -webkit-animation: 26.29832s streaking infinite; animation: 26.29832s streaking infinite; } .drop:nth-child(9) { left: 33.53871vw; top: 19.88968vh; width: 11px; height: 12.13793px; background-size: 11px 12.13793px; background-position: 47.91245% 33.14946%; -webkit-animation: 36.46987s streaking infinite; animation: 36.46987s streaking infinite; } .shadow:nth-child(9) { left: 33.53871vw; top: 19.88968vh; width: 7px; height: 11.13793px; -webkit-animation: 36.46987s streaking infinite; animation: 36.46987s streaking infinite; } .drop:nth-child(10) { left: 8.82093vw; top: 5.39876vh; width: 8px; height: 9.26316px; background-size: 8px 9.26316px; background-position: 12.60133% 8.99793%; -webkit-animation: 41.69483s streaking infinite; animation: 41.69483s streaking infinite; } .shadow:nth-child(10) { left: 8.82093vw; top: 5.39876vh; width: 4px; height: 8.26316px; -webkit-animation: 41.69483s streaking infinite; animation: 41.69483s streaking infinite; } .drop:nth-child(11) { left: 17.33623vw; top: 13.75754vh; width: 4px; height: 4.75px; background-size: 4px 4.75px; background-position: 24.76605% 22.92923%; -webkit-animation: 50.09778s streaking infinite; animation: 50.09778s streaking infinite; } .shadow:nth-child(11) { left: 17.33623vw; top: 13.75754vh; width: 0px; height: 3.75px; -webkit-animation: 50.09778s streaking infinite; animation: 50.09778s streaking infinite; } .drop:nth-child(12) { left: 65.47358vw; top: 41.3206vh; width: 10px; height: 11.42857px; background-size: 10px 11.42857px; background-position: 93.53368% 68.86766%; -webkit-animation: 7.44529s streaking infinite; animation: 7.44529s streaking infinite; } .shadow:nth-child(12) { left: 65.47358vw; top: 41.3206vh; width: 6px; height: 10.42857px; -webkit-animation: 7.44529s streaking infinite; animation: 7.44529s streaking infinite; } .drop:nth-child(13) { left: 31.11795vw; top: 21.95474vh; width: 6px; height: 8.57143px; background-size: 6px 8.57143px; background-position: 44.45421% 36.59124%; -webkit-animation: 48.97888s streaking infinite; animation: 48.97888s streaking infinite; } .shadow:nth-child(13) { left: 31.11795vw; top: 21.95474vh; width: 2px; height: 7.57143px; -webkit-animation: 48.97888s streaking infinite; animation: 48.97888s streaking infinite; } .drop:nth-child(14) { left: 1.05895vw; top: 4.44633vh; width: 13px; height: 15.05263px; background-size: 13px 15.05263px; background-position: 1.51279% 7.41055%; -webkit-animation: 1.2089s streaking infinite; animation: 1.2089s streaking infinite; } .shadow:nth-child(14) { left: 1.05895vw; top: 4.44633vh; width: 9px; height: 14.05263px; -webkit-animation: 1.2089s streaking infinite; animation: 1.2089s streaking infinite; } .drop:nth-child(15) { left: 40.384vw; top: 28.37697vh; width: 13px; height: 14.77273px; background-size: 13px 14.77273px; background-position: 57.69143% 47.29495%; -webkit-animation: 13.23631s streaking infinite; animation: 13.23631s streaking infinite; } .shadow:nth-child(15) { left: 40.384vw; top: 28.37697vh; width: 9px; height: 13.77273px; -webkit-animation: 13.23631s streaking infinite; animation: 13.23631s streaking infinite; } .drop:nth-child(16) { left: 10.07901vw; top: 56.79872vh; width: 6px; height: 6.62069px; background-size: 6px 6.62069px; background-position: 14.39859% 94.66454%; -webkit-animation: 41.5356s streaking infinite; animation: 41.5356s streaking infinite; } .shadow:nth-child(16) { left: 10.07901vw; top: 56.79872vh; width: 2px; height: 5.62069px; -webkit-animation: 41.5356s streaking infinite; animation: 41.5356s streaking infinite; } .drop:nth-child(17) { left: 28.70651vw; top: 18.78518vh; width: 8px; height: 9.09091px; background-size: 8px 9.09091px; background-position: 41.0093% 31.30863%; -webkit-animation: 15.55525s streaking infinite; animation: 15.55525s streaking infinite; } .shadow:nth-child(17) { left: 28.70651vw; top: 18.78518vh; width: 4px; height: 8.09091px; -webkit-animation: 15.55525s streaking infinite; animation: 15.55525s streaking infinite; } .drop:nth-child(18) { left: 15.74862vw; top: 13.07214vh; width: 7px; height: 9.33333px; background-size: 7px 9.33333px; background-position: 22.49802% 21.78691%; -webkit-animation: 49.47414s streaking infinite; animation: 49.47414s streaking infinite; } .shadow:nth-child(18) { left: 15.74862vw; top: 13.07214vh; width: 3px; height: 8.33333px; -webkit-animation: 49.47414s streaking infinite; animation: 49.47414s streaking infinite; } .drop:nth-child(19) { left: 14.71737vw; top: 57.22798vh; width: 10px; height: 12px; background-size: 10px 12px; background-position: 21.02482% 95.37997%; -webkit-animation: 12.11644s streaking infinite; animation: 12.11644s streaking infinite; } .shadow:nth-child(19) { left: 14.71737vw; top: 57.22798vh; width: 6px; height: 11px; -webkit-animation: 12.11644s streaking infinite; animation: 12.11644s streaking infinite; } .drop:nth-child(20) { left: 65.02691vw; top: 35.87104vh; width: 15px; height: 22.5px; background-size: 15px 22.5px; background-position: 92.89559% 59.78507%; -webkit-animation: 14.0032s streaking infinite; animation: 14.0032s streaking infinite; } .shadow:nth-child(20) { left: 65.02691vw; top: 35.87104vh; width: 11px; height: 21.5px; -webkit-animation: 14.0032s streaking infinite; animation: 14.0032s streaking infinite; } .drop:nth-child(21) { left: 34.68619vw; top: 10.58461vh; width: 7px; height: 8.90909px; background-size: 7px 8.90909px; background-position: 49.5517% 17.64101%; -webkit-animation: 2.08313s streaking infinite; animation: 2.08313s streaking infinite; } .shadow:nth-child(21) { left: 34.68619vw; top: 10.58461vh; width: 3px; height: 7.90909px; -webkit-animation: 2.08313s streaking infinite; animation: 2.08313s streaking infinite; } .drop:nth-child(22) { left: 8.27568vw; top: 22.47249vh; width: 12px; height: 13.63636px; background-size: 12px 13.63636px; background-position: 11.8224% 37.45415%; -webkit-animation: 2.40212s streaking infinite; animation: 2.40212s streaking infinite; } .shadow:nth-child(22) { left: 8.27568vw; top: 22.47249vh; width: 8px; height: 12.63636px; -webkit-animation: 2.40212s streaking infinite; animation: 2.40212s streaking infinite; } .drop:nth-child(23) { left: 33.85985vw; top: 12.85984vh; width: 10px; height: 12.5px; background-size: 10px 12.5px; background-position: 48.37121% 21.43307%; -webkit-animation: 5.31506s streaking infinite; animation: 5.31506s streaking infinite; } .shadow:nth-child(23) { left: 33.85985vw; top: 12.85984vh; width: 6px; height: 11.5px; -webkit-animation: 5.31506s streaking infinite; animation: 5.31506s streaking infinite; } .drop:nth-child(24) { left: 22.38254vw; top: 25.89422vh; width: 10px; height: 12.30769px; background-size: 10px 12.30769px; background-position: 31.97505% 43.15703%; -webkit-animation: 34.92091s streaking infinite; animation: 34.92091s streaking infinite; } .shadow:nth-child(24) { left: 22.38254vw; top: 25.89422vh; width: 6px; height: 11.30769px; -webkit-animation: 34.92091s streaking infinite; animation: 34.92091s streaking infinite; } .drop:nth-child(25) { left: 33.75874vw; top: 14.50948vh; width: 9px; height: 10.92857px; background-size: 9px 10.92857px; background-position: 48.22676% 24.18246%; -webkit-animation: 4.80874s streaking infinite; animation: 4.80874s streaking infinite; } .shadow:nth-child(25) { left: 33.75874vw; top: 14.50948vh; width: 5px; height: 9.92857px; -webkit-animation: 4.80874s streaking infinite; animation: 4.80874s streaking infinite; } .drop:nth-child(26) { left: 68.43984vw; top: 11.47433vh; width: 6px; height: 6.62069px; background-size: 6px 6.62069px; background-position: 97.7712% 19.12388%; -webkit-animation: 41.86942s streaking infinite; animation: 41.86942s streaking infinite; } .shadow:nth-child(26) { left: 68.43984vw; top: 11.47433vh; width: 2px; height: 5.62069px; -webkit-animation: 41.86942s streaking infinite; animation: 41.86942s streaking infinite; } .drop:nth-child(27) { left: 6.79468vw; top: 32.39653vh; width: 9px; height: 10.5px; background-size: 9px 10.5px; background-position: 9.70668% 53.99421%; -webkit-animation: 38.953s streaking infinite; animation: 38.953s streaking infinite; } .shadow:nth-child(27) { left: 6.79468vw; top: 32.39653vh; width: 5px; height: 9.5px; -webkit-animation: 38.953s streaking infinite; animation: 38.953s streaking infinite; } .drop:nth-child(28) { left: 4.94972vw; top: 48.93269vh; width: 14px; height: 15.75px; background-size: 14px 15.75px; background-position: 7.07103% 81.55449%; -webkit-animation: 21.27712s streaking infinite; animation: 21.27712s streaking infinite; } .shadow:nth-child(28) { left: 4.94972vw; top: 48.93269vh; width: 10px; height: 14.75px; -webkit-animation: 21.27712s streaking infinite; animation: 21.27712s streaking infinite; } .drop:nth-child(29) { left: 69.77vw; top: 56.80036vh; width: 6px; height: 6.94737px; background-size: 6px 6.94737px; background-position: 99.67143% 94.66726%; -webkit-animation: 11.98242s streaking infinite; animation: 11.98242s streaking infinite; } .shadow:nth-child(29) { left: 69.77vw; top: 56.80036vh; width: 2px; height: 5.94737px; -webkit-animation: 11.98242s streaking infinite; animation: 11.98242s streaking infinite; } .drop:nth-child(30) { left: 36.77044vw; top: 56.76388vh; width: 15px; height: 17.04545px; background-size: 15px 17.04545px; background-position: 52.52921% 94.60647%; -webkit-animation: 22.94173s streaking infinite; animation: 22.94173s streaking infinite; } .shadow:nth-child(30) { left: 36.77044vw; top: 56.76388vh; width: 11px; height: 16.04545px; -webkit-animation: 22.94173s streaking infinite; animation: 22.94173s streaking infinite; } .drop:nth-child(31) { left: 60.85346vw; top: 0.17737vh; width: 6px; height: 6.75px; background-size: 6px 6.75px; background-position: 86.93352% 0.29562%; -webkit-animation: 40.17621s streaking infinite; animation: 40.17621s streaking infinite; } .shadow:nth-child(31) { left: 60.85346vw; top: 0.17737vh; width: 2px; height: 5.75px; -webkit-animation: 40.17621s streaking infinite; animation: 40.17621s streaking infinite; } .drop:nth-child(32) { left: 39.78542vw; top: 51.18719vh; width: 10px; height: 13px; background-size: 10px 13px; background-position: 56.83631% 85.31198%; -webkit-animation: 41.4887s streaking infinite; animation: 41.4887s streaking infinite; } .shadow:nth-child(32) { left: 39.78542vw; top: 51.18719vh; width: 6px; height: 12px; -webkit-animation: 41.4887s streaking infinite; animation: 41.4887s streaking infinite; } .drop:nth-child(33) { left: 19.17308vw; top: 46.84225vh; width: 14px; height: 20px; background-size: 14px 20px; background-position: 27.39012% 78.07042%; -webkit-animation: 36.05767s streaking infinite; animation: 36.05767s streaking infinite; } .shadow:nth-child(33) { left: 19.17308vw; top: 46.84225vh; width: 10px; height: 19px; -webkit-animation: 36.05767s streaking infinite; animation: 36.05767s streaking infinite; } .drop:nth-child(34) { left: 36.58429vw; top: 17.13338vh; width: 12px; height: 13.38462px; background-size: 12px 13.38462px; background-position: 52.26327% 28.55564%; -webkit-animation: 24.04966s streaking infinite; animation: 24.04966s streaking infinite; } .shadow:nth-child(34) { left: 36.58429vw; top: 17.13338vh; width: 8px; height: 12.38462px; -webkit-animation: 24.04966s streaking infinite; animation: 24.04966s streaking infinite; } .drop:nth-child(35) { left: 6.95579vw; top: 41.45752vh; width: 13px; height: 15.78571px; background-size: 13px 15.78571px; background-position: 9.93685% 69.09587%; -webkit-animation: 48.15565s streaking infinite; animation: 48.15565s streaking infinite; } .shadow:nth-child(35) { left: 6.95579vw; top: 41.45752vh; width: 9px; height: 14.78571px; -webkit-animation: 48.15565s streaking infinite; animation: 48.15565s streaking infinite; } .drop:nth-child(36) { left: 8.78796vw; top: 48.67824vh; width: 13px; height: 15.29412px; background-size: 13px 15.29412px; background-position: 12.55423% 81.13041%; -webkit-animation: 44.45198s streaking infinite; animation: 44.45198s streaking infinite; } .shadow:nth-child(36) { left: 8.78796vw; top: 48.67824vh; width: 9px; height: 14.29412px; -webkit-animation: 44.45198s streaking infinite; animation: 44.45198s streaking infinite; } .drop:nth-child(37) { left: 59.80879vw; top: 19.77122vh; width: 9px; height: 13.5px; background-size: 9px 13.5px; background-position: 85.44114% 32.95204%; -webkit-animation: 50.676s streaking infinite; animation: 50.676s streaking infinite; } .shadow:nth-child(37) { left: 59.80879vw; top: 19.77122vh; width: 5px; height: 12.5px; -webkit-animation: 50.676s streaking infinite; animation: 50.676s streaking infinite; } .drop:nth-child(38) { left: 64.79031vw; top: 0.78562vh; width: 8px; height: 9.41176px; background-size: 8px 9.41176px; background-position: 92.55759% 1.30936%; -webkit-animation: 8.87597s streaking infinite; animation: 8.87597s streaking infinite; } .shadow:nth-child(38) { left: 64.79031vw; top: 0.78562vh; width: 4px; height: 8.41176px; -webkit-animation: 8.87597s streaking infinite; animation: 8.87597s streaking infinite; } .drop:nth-child(39) { left: 35.26894vw; top: 31.58992vh; width: 12px; height: 13.24138px; background-size: 12px 13.24138px; background-position: 50.3842% 52.64987%; -webkit-animation: 14.21395s streaking infinite; animation: 14.21395s streaking infinite; } .shadow:nth-child(39) { left: 35.26894vw; top: 31.58992vh; width: 8px; height: 12.24138px; -webkit-animation: 14.21395s streaking infinite; animation: 14.21395s streaking infinite; } .drop:nth-child(40) { left: 37.64805vw; top: 34.14003vh; width: 12px; height: 14.25px; background-size: 12px 14.25px; background-position: 53.78293% 56.90005%; -webkit-animation: 19.64382s streaking infinite; animation: 19.64382s streaking infinite; } .shadow:nth-child(40) { left: 37.64805vw; top: 34.14003vh; width: 8px; height: 13.25px; -webkit-animation: 19.64382s streaking infinite; animation: 19.64382s streaking infinite; } .drop:nth-child(41) { left: 46.24273vw; top: 7.40741vh; width: 10px; height: 11.66667px; background-size: 10px 11.66667px; background-position: 66.06105% 12.34569%; -webkit-animation: 45.62683s streaking infinite; animation: 45.62683s streaking infinite; } .shadow:nth-child(41) { left: 46.24273vw; top: 7.40741vh; width: 6px; height: 10.66667px; -webkit-animation: 45.62683s streaking infinite; animation: 45.62683s streaking infinite; } .drop:nth-child(42) { left: 30.45528vw; top: 0.62178vh; width: 5px; height: 5.75px; background-size: 5px 5.75px; background-position: 43.50755% 1.03629%; -webkit-animation: 25.95833s streaking infinite; animation: 25.95833s streaking infinite; } .shadow:nth-child(42) { left: 30.45528vw; top: 0.62178vh; width: 1px; height: 4.75px; -webkit-animation: 25.95833s streaking infinite; animation: 25.95833s streaking infinite; } .drop:nth-child(43) { left: 30.64549vw; top: 21.63565vh; width: 7px; height: 7.84px; background-size: 7px 7.84px; background-position: 43.77927% 36.05942%; -webkit-animation: 4.0204s streaking infinite; animation: 4.0204s streaking infinite; } .shadow:nth-child(43) { left: 30.64549vw; top: 21.63565vh; width: 3px; height: 6.84px; -webkit-animation: 4.0204s streaking infinite; animation: 4.0204s streaking infinite; } .drop:nth-child(44) { left: 32.13685vw; top: 13.40544vh; width: 7px; height: 7.91304px; background-size: 7px 7.91304px; background-position: 45.90978% 22.34241%; -webkit-animation: 36.07161s streaking infinite; animation: 36.07161s streaking infinite; } .shadow:nth-child(44) { left: 32.13685vw; top: 13.40544vh; width: 3px; height: 6.91304px; -webkit-animation: 36.07161s streaking infinite; animation: 36.07161s streaking infinite; } .drop:nth-child(45) { left: 31.62289vw; top: 46.84598vh; width: 9px; height: 12.85714px; background-size: 9px 12.85714px; background-position: 45.17556% 78.07664%; -webkit-animation: 22.43238s streaking infinite; animation: 22.43238s streaking infinite; } .shadow:nth-child(45) { left: 31.62289vw; top: 46.84598vh; width: 5px; height: 11.85714px; -webkit-animation: 22.43238s streaking infinite; animation: 22.43238s streaking infinite; } .drop:nth-child(46) { left: 1.42975vw; top: 19.98972vh; width: 15px; height: 16.60714px; background-size: 15px 16.60714px; background-position: 2.0425% 33.3162%; -webkit-animation: 45.39585s streaking infinite; animation: 45.39585s streaking infinite; } .shadow:nth-child(46) { left: 1.42975vw; top: 19.98972vh; width: 11px; height: 15.60714px; -webkit-animation: 45.39585s streaking infinite; animation: 45.39585s streaking infinite; } .drop:nth-child(47) { left: 53.49736vw; top: 55.23076vh; width: 14px; height: 18.2px; background-size: 14px 18.2px; background-position: 76.4248% 92.05126%; -webkit-animation: 17.94933s streaking infinite; animation: 17.94933s streaking infinite; } .shadow:nth-child(47) { left: 53.49736vw; top: 55.23076vh; width: 10px; height: 17.2px; -webkit-animation: 17.94933s streaking infinite; animation: 17.94933s streaking infinite; } .drop:nth-child(48) { left: 65.61295vw; top: 42.19731vh; width: 4px; height: 4.63158px; background-size: 4px 4.63158px; background-position: 93.73278% 70.32884%; -webkit-animation: 8.91768s streaking infinite; animation: 8.91768s streaking infinite; } .shadow:nth-child(48) { left: 65.61295vw; top: 42.19731vh; width: 0px; height: 3.63158px; -webkit-animation: 8.91768s streaking infinite; animation: 8.91768s streaking infinite; } .drop:nth-child(49) { left: 24.96761vw; top: 10.94296vh; width: 7px; height: 8.5px; background-size: 7px 8.5px; background-position: 35.66801% 18.23827%; -webkit-animation: 13.00868s streaking infinite; animation: 13.00868s streaking infinite; } .shadow:nth-child(49) { left: 24.96761vw; top: 10.94296vh; width: 3px; height: 7.5px; -webkit-animation: 13.00868s streaking infinite; animation: 13.00868s streaking infinite; } .drop:nth-child(50) { left: 24.3387vw; top: 12.55652vh; width: 8px; height: 10.66667px; background-size: 8px 10.66667px; background-position: 34.76957% 20.92753%; -webkit-animation: 30.57408s streaking infinite; animation: 30.57408s streaking infinite; } .shadow:nth-child(50) { left: 24.3387vw; top: 12.55652vh; width: 4px; height: 9.66667px; -webkit-animation: 30.57408s streaking infinite; animation: 30.57408s streaking infinite; } .drop:nth-child(51) { left: 42.31166vw; top: 44.26366vh; width: 10px; height: 15px; background-size: 10px 15px; background-position: 60.44523% 73.77277%; -webkit-animation: 13.29302s streaking infinite; animation: 13.29302s streaking infinite; } .shadow:nth-child(51) { left: 42.31166vw; top: 44.26366vh; width: 6px; height: 14px; -webkit-animation: 13.29302s streaking infinite; animation: 13.29302s streaking infinite; } .drop:nth-child(52) { left: 8.96421vw; top: 9.40402vh; width: 9px; height: 12.375px; background-size: 9px 12.375px; background-position: 12.80602% 15.67337%; -webkit-animation: 8.17967s streaking infinite; animation: 8.17967s streaking infinite; } .shadow:nth-child(52) { left: 8.96421vw; top: 9.40402vh; width: 5px; height: 11.375px; -webkit-animation: 8.17967s streaking infinite; animation: 8.17967s streaking infinite; } .drop:nth-child(53) { left: 52.76004vw; top: 41.04721vh; width: 12px; height: 13.24138px; background-size: 12px 13.24138px; background-position: 75.37148% 68.41202%; -webkit-animation: 4.37793s streaking infinite; animation: 4.37793s streaking infinite; } .shadow:nth-child(53) { left: 52.76004vw; top: 41.04721vh; width: 8px; height: 12.24138px; -webkit-animation: 4.37793s streaking infinite; animation: 4.37793s streaking infinite; } .drop:nth-child(54) { left: 17.1592vw; top: 58.75314vh; width: 5px; height: 6.5px; background-size: 5px 6.5px; background-position: 24.51314% 97.92189%; -webkit-animation: 43.74804s streaking infinite; animation: 43.74804s streaking infinite; } .shadow:nth-child(54) { left: 17.1592vw; top: 58.75314vh; width: 1px; height: 5.5px; -webkit-animation: 43.74804s streaking infinite; animation: 43.74804s streaking infinite; } .drop:nth-child(55) { left: 58.95192vw; top: 6.04349vh; width: 12px; height: 15.6px; background-size: 12px 15.6px; background-position: 84.21702% 10.07248%; -webkit-animation: 7.03232s streaking infinite; animation: 7.03232s streaking infinite; } .shadow:nth-child(55) { left: 58.95192vw; top: 6.04349vh; width: 8px; height: 14.6px; -webkit-animation: 7.03232s streaking infinite; animation: 7.03232s streaking infinite; } .drop:nth-child(56) { left: 59.38195vw; top: 49.09082vh; width: 9px; height: 10.8px; background-size: 9px 10.8px; background-position: 84.83136% 81.81803%; -webkit-animation: 42.50824s streaking infinite; animation: 42.50824s streaking infinite; } .shadow:nth-child(56) { left: 59.38195vw; top: 49.09082vh; width: 5px; height: 9.8px; -webkit-animation: 42.50824s streaking infinite; animation: 42.50824s streaking infinite; } .drop:nth-child(57) { left: 31.50318vw; top: 21.60167vh; width: 10px; height: 11.76471px; background-size: 10px 11.76471px; background-position: 45.00454% 36.00278%; -webkit-animation: 32.63223s streaking infinite; animation: 32.63223s streaking infinite; } .shadow:nth-child(57) { left: 31.50318vw; top: 21.60167vh; width: 6px; height: 10.76471px; -webkit-animation: 32.63223s streaking infinite; animation: 32.63223s streaking infinite; } .drop:nth-child(58) { left: 59.17743vw; top: 54.61811vh; width: 15px; height: 17.36842px; background-size: 15px 17.36842px; background-position: 84.53918% 91.03018%; -webkit-animation: 3.92101s streaking infinite; animation: 3.92101s streaking infinite; } .shadow:nth-child(58) { left: 59.17743vw; top: 54.61811vh; width: 11px; height: 16.36842px; -webkit-animation: 3.92101s streaking infinite; animation: 3.92101s streaking infinite; } .drop:nth-child(59) { left: 47.0165vw; top: 13.35166vh; width: 6px; height: 7.2px; background-size: 6px 7.2px; background-position: 67.16643% 22.25277%; -webkit-animation: 48.9812s streaking infinite; animation: 48.9812s streaking infinite; } .shadow:nth-child(59) { left: 47.0165vw; top: 13.35166vh; width: 2px; height: 6.2px; -webkit-animation: 48.9812s streaking infinite; animation: 48.9812s streaking infinite; } .drop:nth-child(60) { left: 39.10799vw; top: 6.67132vh; width: 9px; height: 10.5px; background-size: 9px 10.5px; background-position: 55.86856% 11.11886%; -webkit-animation: 21.65433s streaking infinite; animation: 21.65433s streaking infinite; } .shadow:nth-child(60) { left: 39.10799vw; top: 6.67132vh; width: 5px; height: 9.5px; -webkit-animation: 21.65433s streaking infinite; animation: 21.65433s streaking infinite; } .drop:nth-child(61) { left: 61.6193vw; top: 19.27687vh; width: 8px; height: 9.14286px; background-size: 8px 9.14286px; background-position: 88.02757% 32.12812%; -webkit-animation: 36.96081s streaking infinite; animation: 36.96081s streaking infinite; } .shadow:nth-child(61) { left: 61.6193vw; top: 19.27687vh; width: 4px; height: 8.14286px; -webkit-animation: 36.96081s streaking infinite; animation: 36.96081s streaking infinite; } .drop:nth-child(62) { left: 26.55874vw; top: 52.09301vh; width: 10px; height: 12.30769px; background-size: 10px 12.30769px; background-position: 37.94105% 86.82169%; -webkit-animation: 20.83282s streaking infinite; animation: 20.83282s streaking infinite; } .shadow:nth-child(62) { left: 26.55874vw; top: 52.09301vh; width: 6px; height: 11.30769px; -webkit-animation: 20.83282s streaking infinite; animation: 20.83282s streaking infinite; } .drop:nth-child(63) { left: 52.79985vw; top: 57.78034vh; width: 4px; height: 4.75px; background-size: 4px 4.75px; background-position: 75.42836% 96.30056%; -webkit-animation: 22.33483s streaking infinite; animation: 22.33483s streaking infinite; } .shadow:nth-child(63) { left: 52.79985vw; top: 57.78034vh; width: 0px; height: 3.75px; -webkit-animation: 22.33483s streaking infinite; animation: 22.33483s streaking infinite; } .drop:nth-child(64) { left: 23.5652vw; top: 34.13965vh; width: 10px; height: 11.11111px; background-size: 10px 11.11111px; background-position: 33.66458% 56.89942%; -webkit-animation: 26.65458s streaking infinite; animation: 26.65458s streaking infinite; } .shadow:nth-child(64) { left: 23.5652vw; top: 34.13965vh; width: 6px; height: 10.11111px; -webkit-animation: 26.65458s streaking infinite; animation: 26.65458s streaking infinite; } .drop:nth-child(65) { left: 41.09845vw; top: 3.15956vh; width: 8px; height: 12px; background-size: 8px 12px; background-position: 58.71208% 5.26594%; -webkit-animation: 12.31731s streaking infinite; animation: 12.31731s streaking infinite; } .shadow:nth-child(65) { left: 41.09845vw; top: 3.15956vh; width: 4px; height: 11px; -webkit-animation: 12.31731s streaking infinite; animation: 12.31731s streaking infinite; } .drop:nth-child(66) { left: 17.28908vw; top: 5.04327vh; width: 9px; height: 10.03846px; background-size: 9px 10.03846px; background-position: 24.69869% 8.40546%; -webkit-animation: 36.21172s streaking infinite; animation: 36.21172s streaking infinite; } .shadow:nth-child(66) { left: 17.28908vw; top: 5.04327vh; width: 5px; height: 9.03846px; -webkit-animation: 36.21172s streaking infinite; animation: 36.21172s streaking infinite; } .drop:nth-child(67) { left: 26.75095vw; top: 24.30441vh; width: 9px; height: 10.8px; background-size: 9px 10.8px; background-position: 38.21564% 40.50736%; -webkit-animation: 8.25645s streaking infinite; animation: 8.25645s streaking infinite; } .shadow:nth-child(67) { left: 26.75095vw; top: 24.30441vh; width: 5px; height: 9.8px; -webkit-animation: 8.25645s streaking infinite; animation: 8.25645s streaking infinite; } .drop:nth-child(68) { left: 20.49608vw; top: 37.30507vh; width: 14px; height: 16.1px; background-size: 14px 16.1px; background-position: 29.28012% 62.17511%; -webkit-animation: 21.50053s streaking infinite; animation: 21.50053s streaking infinite; } .shadow:nth-child(68) { left: 20.49608vw; top: 37.30507vh; width: 10px; height: 15.1px; -webkit-animation: 21.50053s streaking infinite; animation: 21.50053s streaking infinite; } .drop:nth-child(69) { left: 67.80365vw; top: 55.62279vh; width: 7px; height: 9.1px; background-size: 7px 9.1px; background-position: 96.86236% 92.70466%; -webkit-animation: 16.42229s streaking infinite; animation: 16.42229s streaking infinite; } .shadow:nth-child(69) { left: 67.80365vw; top: 55.62279vh; width: 3px; height: 8.1px; -webkit-animation: 16.42229s streaking infinite; animation: 16.42229s streaking infinite; } .drop:nth-child(70) { left: 27.78859vw; top: 23.68392vh; width: 5px; height: 6.36364px; background-size: 5px 6.36364px; background-position: 39.69798% 39.4732%; -webkit-animation: 38.80916s streaking infinite; animation: 38.80916s streaking infinite; } .shadow:nth-child(70) { left: 27.78859vw; top: 23.68392vh; width: 1px; height: 5.36364px; -webkit-animation: 38.80916s streaking infinite; animation: 38.80916s streaking infinite; } .drop:nth-child(71) { left: 0.43572vw; top: 4.929vh; width: 10px; height: 11.5px; background-size: 10px 11.5px; background-position: 0.62246% 8.21501%; -webkit-animation: 8.1612s streaking infinite; animation: 8.1612s streaking infinite; } .shadow:nth-child(71) { left: 0.43572vw; top: 4.929vh; width: 6px; height: 10.5px; -webkit-animation: 8.1612s streaking infinite; animation: 8.1612s streaking infinite; } .drop:nth-child(72) { left: 12.08128vw; top: 52.27536vh; width: 12px; height: 15.6px; background-size: 12px 15.6px; background-position: 17.25898% 87.1256%; -webkit-animation: 15.52798s streaking infinite; animation: 15.52798s streaking infinite; } .shadow:nth-child(72) { left: 12.08128vw; top: 52.27536vh; width: 8px; height: 14.6px; -webkit-animation: 15.52798s streaking infinite; animation: 15.52798s streaking infinite; } .drop:nth-child(73) { left: 45.82455vw; top: 58.4964vh; width: 14px; height: 18.2px; background-size: 14px 18.2px; background-position: 65.46365% 97.49399%; -webkit-animation: 48.07234s streaking infinite; animation: 48.07234s streaking infinite; } .shadow:nth-child(73) { left: 45.82455vw; top: 58.4964vh; width: 10px; height: 17.2px; -webkit-animation: 48.07234s streaking infinite; animation: 48.07234s streaking infinite; } .drop:nth-child(74) { left: 23.31116vw; top: 20.50393vh; width: 15px; height: 18.75px; background-size: 15px 18.75px; background-position: 33.30165% 34.17321%; -webkit-animation: 29.09305s streaking infinite; animation: 29.09305s streaking infinite; } .shadow:nth-child(74) { left: 23.31116vw; top: 20.50393vh; width: 11px; height: 17.75px; -webkit-animation: 29.09305s streaking infinite; animation: 29.09305s streaking infinite; } .drop:nth-child(75) { left: 10.35085vw; top: 51.98222vh; width: 5px; height: 5.68182px; background-size: 5px 5.68182px; background-position: 14.78693% 86.63704%; -webkit-animation: 34.93908s streaking infinite; animation: 34.93908s streaking infinite; } .shadow:nth-child(75) { left: 10.35085vw; top: 51.98222vh; width: 1px; height: 4.68182px; -webkit-animation: 34.93908s streaking infinite; animation: 34.93908s streaking infinite; } .drop:nth-child(76) { left: 27.83705vw; top: 8.08562vh; width: 12px; height: 13.33333px; background-size: 12px 13.33333px; background-position: 39.76721% 13.47603%; -webkit-animation: 17.54297s streaking infinite; animation: 17.54297s streaking infinite; } .shadow:nth-child(76) { left: 27.83705vw; top: 8.08562vh; width: 8px; height: 12.33333px; -webkit-animation: 17.54297s streaking infinite; animation: 17.54297s streaking infinite; } .drop:nth-child(77) { left: 30.98107vw; top: 50.36004vh; width: 14px; height: 18.66667px; background-size: 14px 18.66667px; background-position: 44.25867% 83.9334%; -webkit-animation: 44.20661s streaking infinite; animation: 44.20661s streaking infinite; } .shadow:nth-child(77) { left: 30.98107vw; top: 50.36004vh; width: 10px; height: 17.66667px; -webkit-animation: 44.20661s streaking infinite; animation: 44.20661s streaking infinite; } .drop:nth-child(78) { left: 25.87735vw; top: 7.86701vh; width: 11px; height: 12.57143px; background-size: 11px 12.57143px; background-position: 36.96764% 13.11168%; -webkit-animation: 38.74668s streaking infinite; animation: 38.74668s streaking infinite; } .shadow:nth-child(78) { left: 25.87735vw; top: 7.86701vh; width: 7px; height: 11.57143px; -webkit-animation: 38.74668s streaking infinite; animation: 38.74668s streaking infinite; } .drop:nth-child(79) { left: 69.74217vw; top: 37.89335vh; width: 5px; height: 5.75px; background-size: 5px 5.75px; background-position: 99.63167% 63.15558%; -webkit-animation: 13.85047s streaking infinite; animation: 13.85047s streaking infinite; } .shadow:nth-child(79) { left: 69.74217vw; top: 37.89335vh; width: 1px; height: 4.75px; -webkit-animation: 13.85047s streaking infinite; animation: 13.85047s streaking infinite; } .drop:nth-child(80) { left: 66.80918vw; top: 23.435vh; width: 7px; height: 7.91304px; background-size: 7px 7.91304px; background-position: 95.44169% 39.05833%; -webkit-animation: 7.90633s streaking infinite; animation: 7.90633s streaking infinite; } .shadow:nth-child(80) { left: 66.80918vw; top: 23.435vh; width: 3px; height: 6.91304px; -webkit-animation: 7.90633s streaking infinite; animation: 7.90633s streaking infinite; } .drop:nth-child(81) { left: 25.45308vw; top: 18.81677vh; width: 12px; height: 13.8px; background-size: 12px 13.8px; background-position: 36.36155% 31.36128%; -webkit-animation: 16.92352s streaking infinite; animation: 16.92352s streaking infinite; } .shadow:nth-child(81) { left: 25.45308vw; top: 18.81677vh; width: 8px; height: 12.8px; -webkit-animation: 16.92352s streaking infinite; animation: 16.92352s streaking infinite; } .drop:nth-child(82) { left: 67.3101vw; top: 58.361vh; width: 7px; height: 8.90909px; background-size: 7px 8.90909px; background-position: 96.15728% 97.26833%; -webkit-animation: 6.78985s streaking infinite; animation: 6.78985s streaking infinite; } .shadow:nth-child(82) { left: 67.3101vw; top: 58.361vh; width: 3px; height: 7.90909px; -webkit-animation: 6.78985s streaking infinite; animation: 6.78985s streaking infinite; } .drop:nth-child(83) { left: 8.3982vw; top: 15.9914vh; width: 9px; height: 10.22727px; background-size: 9px 10.22727px; background-position: 11.99742% 26.65234%; -webkit-animation: 23.63451s streaking infinite; animation: 23.63451s streaking infinite; } .shadow:nth-child(83) { left: 8.3982vw; top: 15.9914vh; width: 5px; height: 9.22727px; -webkit-animation: 23.63451s streaking infinite; animation: 23.63451s streaking infinite; } .drop:nth-child(84) { left: 40.80391vw; top: 24.06018vh; width: 15px; height: 17.5px; background-size: 15px 17.5px; background-position: 58.2913% 40.10029%; -webkit-animation: 41.08297s streaking infinite; animation: 41.08297s streaking infinite; } .shadow:nth-child(84) { left: 40.80391vw; top: 24.06018vh; width: 11px; height: 16.5px; -webkit-animation: 41.08297s streaking infinite; animation: 41.08297s streaking infinite; } .drop:nth-child(85) { left: 55.34695vw; top: 25.07477vh; width: 14px; height: 15.44828px; background-size: 14px 15.44828px; background-position: 79.06707% 41.79128%; -webkit-animation: 3.06231s streaking infinite; animation: 3.06231s streaking infinite; } .shadow:nth-child(85) { left: 55.34695vw; top: 25.07477vh; width: 10px; height: 14.44828px; -webkit-animation: 3.06231s streaking infinite; animation: 3.06231s streaking infinite; } .drop:nth-child(86) { left: 29.22607vw; top: 33.05896vh; width: 14px; height: 16.1px; background-size: 14px 16.1px; background-position: 41.75153% 55.09826%; -webkit-animation: 1.08784s streaking infinite; animation: 1.08784s streaking infinite; } .shadow:nth-child(86) { left: 29.22607vw; top: 33.05896vh; width: 10px; height: 15.1px; -webkit-animation: 1.08784s streaking infinite; animation: 1.08784s streaking infinite; } .drop:nth-child(87) { left: 42.14431vw; top: 7.88263vh; width: 12px; height: 13.28571px; background-size: 12px 13.28571px; background-position: 60.20616% 13.13771%; -webkit-animation: 12.75057s streaking infinite; animation: 12.75057s streaking infinite; } .shadow:nth-child(87) { left: 42.14431vw; top: 7.88263vh; width: 8px; height: 12.28571px; -webkit-animation: 12.75057s streaking infinite; animation: 12.75057s streaking infinite; } .drop:nth-child(88) { left: 60.26777vw; top: 48.22484vh; width: 4px; height: 4.75px; background-size: 4px 4.75px; background-position: 86.09681% 80.37474%; -webkit-animation: 14.81124s streaking infinite; animation: 14.81124s streaking infinite; } .shadow:nth-child(88) { left: 60.26777vw; top: 48.22484vh; width: 0px; height: 3.75px; -webkit-animation: 14.81124s streaking infinite; animation: 14.81124s streaking infinite; } .drop:nth-child(89) { left: 47.6163vw; top: 33.61474vh; width: 9px; height: 13.5px; background-size: 9px 13.5px; background-position: 68.02328% 56.02456%; -webkit-animation: 38.04679s streaking infinite; animation: 38.04679s streaking infinite; } .shadow:nth-child(89) { left: 47.6163vw; top: 33.61474vh; width: 5px; height: 12.5px; -webkit-animation: 38.04679s streaking infinite; animation: 38.04679s streaking infinite; } .drop:nth-child(90) { left: 39.25195vw; top: 16.17742vh; width: 15px; height: 18.21429px; background-size: 15px 18.21429px; background-position: 56.07421% 26.96236%; -webkit-animation: 4.13945s streaking infinite; animation: 4.13945s streaking infinite; } .shadow:nth-child(90) { left: 39.25195vw; top: 16.17742vh; width: 11px; height: 17.21429px; -webkit-animation: 4.13945s streaking infinite; animation: 4.13945s streaking infinite; } .drop:nth-child(91) { left: 13.44622vw; top: 35.65647vh; width: 5px; height: 6.875px; background-size: 5px 6.875px; background-position: 19.20888% 59.42745%; -webkit-animation: 23.36608s streaking infinite; animation: 23.36608s streaking infinite; } .shadow:nth-child(91) { left: 13.44622vw; top: 35.65647vh; width: 1px; height: 5.875px; -webkit-animation: 23.36608s streaking infinite; animation: 23.36608s streaking infinite; } .drop:nth-child(92) { left: 2.18554vw; top: 48.84051vh; width: 5px; height: 5.71429px; background-size: 5px 5.71429px; background-position: 3.12221% 81.40086%; -webkit-animation: 28.51515s streaking infinite; animation: 28.51515s streaking infinite; } .shadow:nth-child(92) { left: 2.18554vw; top: 48.84051vh; width: 1px; height: 4.71429px; -webkit-animation: 28.51515s streaking infinite; animation: 28.51515s streaking infinite; } .drop:nth-child(93) { left: 6.69369vw; top: 37.99377vh; width: 12px; height: 13.63636px; background-size: 12px 13.63636px; background-position: 9.56241% 63.32294%; -webkit-animation: 10.21747s streaking infinite; animation: 10.21747s streaking infinite; } .shadow:nth-child(93) { left: 6.69369vw; top: 37.99377vh; width: 8px; height: 12.63636px; -webkit-animation: 10.21747s streaking infinite; animation: 10.21747s streaking infinite; } .drop:nth-child(94) { left: 42.44664vw; top: 0.43398vh; width: 15px; height: 17.8125px; background-size: 15px 17.8125px; background-position: 60.63806% 0.72329%; -webkit-animation: 1.84607s streaking infinite; animation: 1.84607s streaking infinite; } .shadow:nth-child(94) { left: 42.44664vw; top: 0.43398vh; width: 11px; height: 16.8125px; -webkit-animation: 1.84607s streaking infinite; animation: 1.84607s streaking infinite; } .drop:nth-child(95) { left: 31.76539vw; top: 29.37122vh; width: 7px; height: 7.95455px; background-size: 7px 7.95455px; background-position: 45.37913% 48.95203%; -webkit-animation: 38.63784s streaking infinite; animation: 38.63784s streaking infinite; } .shadow:nth-child(95) { left: 31.76539vw; top: 29.37122vh; width: 3px; height: 6.95455px; -webkit-animation: 38.63784s streaking infinite; animation: 38.63784s streaking infinite; } .drop:nth-child(96) { left: 64.48736vw; top: 44.45557vh; width: 11px; height: 12.32px; background-size: 11px 12.32px; background-position: 92.1248% 74.09261%; -webkit-animation: 20.02878s streaking infinite; animation: 20.02878s streaking infinite; } .shadow:nth-child(96) { left: 64.48736vw; top: 44.45557vh; width: 7px; height: 11.32px; -webkit-animation: 20.02878s streaking infinite; animation: 20.02878s streaking infinite; } .drop:nth-child(97) { left: 57.65164vw; top: 9.19976vh; width: 8px; height: 9.33333px; background-size: 8px 9.33333px; background-position: 82.35948% 15.33293%; -webkit-animation: 40.3653s streaking infinite; animation: 40.3653s streaking infinite; } .shadow:nth-child(97) { left: 57.65164vw; top: 9.19976vh; width: 4px; height: 8.33333px; -webkit-animation: 40.3653s streaking infinite; animation: 40.3653s streaking infinite; } .drop:nth-child(98) { left: 11.31557vw; top: 7.26979vh; width: 12px; height: 14.25px; background-size: 12px 14.25px; background-position: 16.1651% 12.11631%; -webkit-animation: 28.73881s streaking infinite; animation: 28.73881s streaking infinite; } .shadow:nth-child(98) { left: 11.31557vw; top: 7.26979vh; width: 8px; height: 13.25px; -webkit-animation: 28.73881s streaking infinite; animation: 28.73881s streaking infinite; } .drop:nth-child(99) { left: 10.93843vw; top: 25.4734vh; width: 13px; height: 15.05263px; background-size: 13px 15.05263px; background-position: 15.62633% 42.45567%; -webkit-animation: 4.78081s streaking infinite; animation: 4.78081s streaking infinite; } .shadow:nth-child(99) { left: 10.93843vw; top: 25.4734vh; width: 9px; height: 14.05263px; -webkit-animation: 4.78081s streaking infinite; animation: 4.78081s streaking infinite; } .drop:nth-child(100) { left: 34.54572vw; top: 3.17081vh; width: 6px; height: 6.9px; background-size: 6px 6.9px; background-position: 49.35103% 5.28468%; -webkit-animation: 5.53359s streaking infinite; animation: 5.53359s streaking infinite; } .shadow:nth-child(100) { left: 34.54572vw; top: 3.17081vh; width: 2px; height: 5.9px; -webkit-animation: 5.53359s streaking infinite; animation: 5.53359s streaking infinite; } @-webkit-keyframes streaking { from { opacity: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 5% { opacity: 0.5; } 50% { -webkit-transform: translateY(15vh) rotateY(180deg); transform: translateY(15vh) rotateY(180deg); } to { -webkit-transform: translateY(60vh) rotateY(180deg); transform: translateY(60vh) rotateY(180deg); } } @keyframes streaking { from { opacity: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 5% { opacity: 0.5; } 50% { -webkit-transform: translateY(15vh) rotateY(180deg); transform: translateY(15vh) rotateY(180deg); } to { -webkit-transform: translateY(60vh) rotateY(180deg); transform: translateY(60vh) rotateY(180deg); } } .content { position: absolute; margin: 40px; color: white; top: 0; left: 0; height: 100%; opacity: 0.9; } .content .card { display: table-cell; vertical-align: middle; height: 100%; } .content img.avatar { content: url("http://joshwlewis.com/images/joshwlewis-36466eda.jpg"); background-repeat: no-repeat; border-radius: 50%; width: 100px; height: 100px; margin-right: 20px; -webkit-filter: grayscale(10%); filter: grayscale(10%); } .content h1 { display: inline-block; margin: 0; vertical-align: top; line-height: 100px; font-size: 70px; font-weight: 100; } .content p { margin-left: 120px; font-size: 20px; }