body{ font-family: "Lucida Console", Monaco, monospace; overflow: hidden; background-color: black !important; background: radial-gradient(15px 5px at 25% 0, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%), radial-gradient(15px 5px at 75% 100%, transparent 0%, transparent 80%, rgba(255, 255, 255, 0.06) 80%, rgba(255, 255, 255, 0.06) 99%, transparent 99%, transparent 100%), radial-gradient(10px 3px at 25% 0, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%), radial-gradient(10px 3px at 75% 100%, transparent 0%, transparent 70%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 99%, transparent 99%, transparent 100%), radial-gradient(30px 8px at 25% 0, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), radial-gradient(30px 8px at 75% 100%, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.02) 99%, transparent 99%, transparent 100%), #c4cbc3; background-size: 60px 40px, 60px 40px, 40px 24px, 40px 24px, 120px 64px, 120px 64px; /*background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;*/ -webkit-animation: wave 5s linear infinite; animation: wave 5s linear infinite; } a {color: blue;} a:hover {color: red; text-decoration: none;} a:visited {color: blue;} @-webkit-keyframes wave { 0% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; } 20% { background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%; } 40% { background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%; } 60% { background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%; } 80% { background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%; } 0% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; } } @keyframes wave { 0% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; } 20% { background-position: 51% 48%, 51% 48%, 53% 52%, 53% 52%, 48% 47%, 48% 47%; } 40% { background-position: 49% 51%, 49% 51%, 48% 51%, 48% 51%, 54% 50%, 54% 50%; } 60% { background-position: 53% 54%, 53% 54%, 46% 54%, 46% 54%, 53% 46%, 53% 46%; } 80% { background-position: 51% 52%, 51% 52%, 49% 49%, 49% 49%, 49% 48%, 49% 48%; } 0% { background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%; } } .sprite { position: absolute; width: 102px; height: 148px; z-index: 101; } .sprite-d { transform: scale(1.5); position: absolute; left: 1045px; top: 417px; width: 53px; height: 33px; margin-top: 40px; z-index: 101; } .right { background-image: url(../media/imgs/standing-right.png); } .walk-right { background-image: url(../media/imgs/walk-right.png); -webkit-animation: walk .7s steps(6) infinite; -moz-animation: walk .7s steps(6) infinite; -ms-animation: walk .7s steps(6) infinite; -o-animation: walk .7s steps(6) infinite; animation: walk .7s steps(6) infinite; } @-webkit-keyframes walk { from { background-position: 0px; } to { background-position: -612px; } } @-moz-keyframes walk { from { background-position: 0px; } to { background-position: -612px; } } @-ms-keyframes walk { from { background-position: 0px; } to { background-position: -612px; } } @-o-keyframes walk { from { background-position: 0px; } to { background-position: -612px; } } @-keyframes walk { from { background-position: 0px; } to { background-position: -612px; } } .right-d { background-image: url(../img/dw.png) !important; } .walk-right-d { background-image: url(../img/dw.png) !important; -webkit-animation: walkd .9s steps(10) infinite !important; -moz-animation: walkd .9s steps(10) infinite !important; -ms-animation: walkd .9s steps(10) infinite !important; -o-animation: walkd .9s steps(10) infinite !important; animation: walkd .9s steps(10) infinite !important; } @-webkit-keyframes walkd { from { background-position-y: 0px; } to { background-position-y: -340px; } } @-moz-keyframes walkd { from { background-position-y: 0px; } to { background-position-y: -340px; } } @-ms-keyframes walkd { from { background-position-y: 0px; } to { background-position-y: -340px; } } @-o-keyframes walkd { from { background-position-y: 0px; } to { background-position-y: -340px; } } @-keyframes walkd { from { background-position-y: 0px; } to { background-position-y: -340px; } } .txt {color: white; position: absolute; color: #00db00; z-index: 101; } .ptxt {color: white; position: absolute; z-index: 101; font-size: 17px; background: yellow; text-align: center; padding: 3px;} #t1{ top: 287px; left: 70px; width: 690px; } #t2{ /*display: none;*/ width: 320px; left: 700px; top: 580px; } #t3{ left: 100px; width: 240px; top: 820px; } #t4{ left: 1122px; width: 290px; top: 922px; } #t5{ left: 70px; width: 766px; top: 1400px; } #t6{ left: 950px; width: 1500px; top: 1670px; } #t7{ left: 2550px; width: 446px; top: 1420px; } #t8{ left: 2272px; width: 334px; top: 961px; } #t8{ left: 2322px; width: 254px; top: 970px; } #t9{ left: 1910px; width: 1050px; top: 759px; } #t10{ left: 2162px; width: 800px; top: 120px; } #t13{ left: 430px; width: 1200px; top: -1000px; } #p1{ left: 1009px; top: 453px; width: 80px; } #p2{ left: 1164px; top: 695px; width: 80px; } #p3{ left: 217px; top: 30px; width: 140px; } #p4{ left: 1690px; top: 607px; width: 130px; } #p5{ left: 520px; top: 465px; width: 180px; } #p6{ left: 301px; top: 525px; width: 140px; } #p7{ left: 400px; top: 620px; width: 120px; } #p8{ left: 2632px; top: 1134px; width: 120px; } #p9{ left: 1842px; top: 304px; width: 120px; } #p10{ left: 1070px; top: 260px; width: 180px; } #p11{ left: 971px; top: 85px; width: 110px; } #p12{ left: 1457px; top: 226px; } #p13{ left: 1276px; top: 90px; } #p14{ left: 1570px; top: 183px; } #p15{ left: 1537px; top: 370px; } #p16{ left: 370px; top: 943px; } #p17{ left: 694px; top: 951px; } #p18{ left: 432px; top: 1186px; } #p19{ left: 859px; top: 862px; } #p20{ left: 902px; top: 1003px; } #p21{ left: 663px; top: 919px; } #p22{ left: 558px; top: 1037px; } #p23{ left: 611px; top: 1105px; } #p24{ left: 1239px; top: 502px; } #p25{ left: 1441px; top: 984px; } #p26{ left: 1449px; top: 1289px; } #p27{ left: 1776px; top: 45px; } #p28{ left: 1838px; top: 1505px; width: 240px; } #p29{ left: 1907px; top: 1047px; } #p30{ left: 1685px; top: 847px; } #p31{ left: 1024px; top: 1502px; } #p32{ left: 1413px; top: 1524px; } #p33{ left: 2481px; top: 474px; } #p34{ left: 2105px; top: 1179px; } #p35{ left: 2627px; top: 1044px;; } #p36{ left: 365px; top: 111px; } #p37{ left: 2659px; top: 632px; } #p38{ left: 996px; top: 1384px; } #p39{ left: 2156px; top: 533px; } #p40{ left: 1911px; top: 1231px; } #p41{ left: 1456px; top: 732px; } #p42{ left: 1904px; top: 157px; } #p43{ left: 1382px; top: 1470px; } #p44{left: 2557px; top: 490px; } #p45{left: 436px; top: 754px; } #p46{left: 2255px; top: 1344px; } #pxxx{ left: 932.417px; top: -782.233px; width: 132px; } .l{ transform: scale(0.1); position: absolute; z-index: 10; } #l1{ left: 1423.92px; top: -341.083px; } #l2{ transform: scale(0.1); position: absolute; left: 1288.68px; top: -616.9px; } #l3{ transform: scale(0.1); position: absolute; left: 1053.92px; top: -417.083px; } #l4{ transform: scale(0.1); position: absolute; left: 594.117px; top: -526.25px; } #l5{ transform: scale(0.18); position: absolute; left: 806.917px; top: -779.083px; } #projl1{ left: 1672.02px; top: -127.3px; } #projl2{ left: 1536.12px; top: -402.467px; } #projl3{ left: 1299.6px; top: -203.633px; } #projl4{ left: 840.567px; top: -311.15px; } .pulse{ transform: scale(1.7); width: 30px; height: 30px; position: absolute; z-index: 1;} .pulsate { position: absolute; animation: pulsate 2s ease-out; animation-iteration-count: infinite; opacity: 0.0; /* you dont need the stuff below, but its what I used to create the loading circle */ border: 2px solid red; border-radius: 30px; height: 18px; width: 18px; display: inline-block; margin-top: 20px; text-align: center; } .pulsate2 { position: absolute; animation: pulsate 2s ease-out; animation-iteration-count: infinite; opacity: 0.0; /* you dont need the stuff below, but its what I used to create the loading circle */ border: 1px solid red; border-radius: 30px; height: 18px; width: 18px; display: inline-block; margin-top: 20px; text-align: center; } .pulsate3 { position: absolute; animation: pulsate 3s ease-out; animation-iteration-count: infinite; opacity: 0.0; /* you dont need the stuff below, but its what I used to create the loading circle */ border: 2px solid red; border-radius: 100px; height: 100px; width: 100px; display: inline-block; margin-top: 20px; text-align: center; } #pulse1{animation-delay: 0.0s;} #pulse2{animation-delay: 0.66s;} #pulse3{animation-delay: 1.33s;} @-webkit-keyframes pulsate { 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(3, 3); opacity: 0.0;} } /* ----------- BLACK HOLE ----------- */ #black_hole{ left: 1165.87px; top: -816.283px; transform: scale(5); z-index: 0; } #black_hole2{ transform: scale(6); left: 2319px; top: -398px; } } .bh{ transform: scale(5,5) !important; z-index: -1; } .black_hole { border-color: #00fc33 !important; } #bh1{animation-delay: 0.33s;} #bh2{animation-delay: 0.66s;} #proj1{ left: 456px; top: 591px; } #proj2{ left: 584px; top: 1006px; } #proj3{ left: 928px; top: 974px; } #proj4{ left: 382.5px; top: 83px; } #proj5{ left: 2200px; top: 506px; } #proj6{ left: 1927px; top: 1202px; } #proj7{ left: 1489px; top: 706px; } #ifr1{ width: 100%; height: 700px } #ttwwk{ cursor: pointer !important; } .blink_me2 { font-size: 60px; position: absolute; left: 373px; top: -187px; color: white; font-weight: bold; text-decoration: none; animation: blinkerr 0.5s linear infinite; } @keyframes blinkerr { 50% { color: red; } }