:root { --ffirst: 'DynaPuff', cursive; --fsecond: 'Rubik Distressed', cursive; --fthird: 'Lobster', cursive; --ffour: 'Righteous', cursive; } a { text-decoration: none; } body::-webkit-scrollbar { background: #000; width: 7px; } body::-webkit-scrollbar-thumb { background: #000; } #algae-1 { left: 100px; } #algae-2 { left: 800px; } #algae-3 { left: 2100px; } #algae-4 { left: 2200px; } #algae-5 { left: 3500px; } #algae-6 { left: 3680px; } #algae-7 { left: 4900px; } #algae-8 { left: 5000px; } .algae-a { bottom: 0; width: 80px; height: 270px; background-image: url(../image/algae-a.png); } #alien, .algae-a, .algae-b { position: absolute; } .algae-b { background-image: url(../image/algae-b.png); bottom: 0; width: 162px; height: 252px; } #alien { left: 540px; bottom: 30px; width: 400px; height: 636px; } #alien-body { position: absolute; top: 300px; height: 310px; background-image: url(../image/gipysaurio.png); background-size: contain; background-position: center; background-repeat: no-repeat; } #alien-body, #alien-ship { left: 160px; width: 310px; } #alien-ship, #alien-steer { position: absolute; } #alien-ship { top: 515px; height: 121px; } #alien-steer { left: 160px; top: 300px; width: 310px; height: 310px; background-image: url(../image/activator.png); background-size: contain; background-repeat: no-repeat; background-position: center; } #balloon { position: absolute; width: 400px; height: 700px; background-image: url(../image/balloon.webp); } .banner { margin-bottom: 60px; } .banner-button, .banner-line { position: relative; width: 152px; height: 32px; } .banner-line { width: 440px; height: 1px; background-color: #fff; margin-bottom: 12px; } .banner-text-a { font-family: var(--ffirst); font-size: 24px; } .banner-text-a, .banner-text-b, .banner-text-c { position: relative; width: 440px; color: #fff; padding: 12px 0px; margin-bottom: 12px; } .banner-text-b { line-height: 60px; font-family: var(--fsecond); font-size: 50px; } .banner-text-c { font-family: var(--ffirst); font-size: 18px; } .banner-bottom-a, .banner-bottom-b { position: relative; left: 20px; width: 480px; height: 56px; margin-top: -1px; background-image: url(../image/banner-bottom-a.png); } .banner-bottom-b { background-image: url(../image/banner-bottom-b.png); } #banners-container, #boxes { position: absolute; left: 15%; width: 520px; } .banner-middle-a, .banner-middle-b { position: relative; left: 20px; width: 440px; padding: 20px; background-color: #333333; overflow: hidden; } .banner-middle-b { background-color: #636363; } .banner-top-a, .banner-top-b { position: relative; width: 520px; height: 23px; margin-bottom: -1px; background-image: url(../image/banner-top-a.png); } .banner-top-b { background-image: url(../image/banner-top-b.png); } body { margin: 0; background-color: #000; background-image: url(../image/starsline.png); background-attachment: fixed; } #boxes { left: 14774px; bottom: 20%; width: 700px; height: 100px; background-image: url(../image/box.webp); } #bubble { position: relative; left: -50%; width: 16px; height: 16px; background-image: url(../image/bubble.png); } #bubble-container, .building { position: absolute; } #building-1 { left: 0; bottom: 0; width: 190px; height: 500px; background-image: url(../image/building-a.webp); } #building-2 { left: 305px; bottom: 0; width: 275px; height: 495px; background-image: url(../image/building-b.webp); } #building-3 { left: 710px; bottom: 0; width: 190px; height: 500px; background-image: url(../image/building-c.webp); } .building-enemy-face-a { position: absolute; left: 25px; top: 395px; width: 65px; height: 65px; background-image: url(../image/enemy-face-a.png); } .building-enemy-face-a-eyes { position: absolute; left: 5px; top: 10px; width: 55px; height: 25px; opacity: 0; filter: alpha(opacity=0); background-image: url(../image/enemy-face-a-eyes.png); } .building-enemy-face-b { position: absolute; left: 80px; top: 375px; width: 80px; height: 80px; background-image: url(../image/enemy-face-b.png); } .building-enemy-face-b-eyes { position: absolute; left: 7px; top: 15px; width: 66px; height: 30px; opacity: 0; filter: alpha(opacity=0); background-image: url(../image/enemy-face-b-eyes.png); } #buildings-container { position: absolute; left: 4980px; bottom: 20%; width: 900px; height: 80%; } .building-leg-container-a, .building-leg-container-b { position: absolute; overflow: hidden; left: 0; top: 470px; width: 190px; height: 30px; } .building-leg-container-b { left: 70px; top: 465px; width: 150px; } .building-leg-frame-a, .building-leg-frame-b { position: absolute; left: 0; top: 0; width: 380px; height: 30px; background-image: url(../image/building-a-leg-frame.png); } .building-leg-frame-b { width: 300px; background-image: url(../image/building-b-leg-frame.png); } .chain-block { position: absolute; bottom: 0; width: 100px; height: 90px; background-image: url(../image/chain-block.webp); } .chain-block-string { position: absolute; left: 28px; bottom: 60px; width: 44px; height: 100%; background-image: url(../image/chain-block-string.png); } .chain-block-and-string-container { position: absolute; width: 100px; height: 100%; } .coral-a, .coral-b { width: 200px; height: 150px; bottom: -70%; } .coral-a { position: absolute; background-image: url(../image/coral-a.png); } .coral-b { background-image: url(../image/coral-b.png); } #coral-1 { left: 4800px; } #coral-2 { left: 5800px; } #coral-3 { left: 6800px; } .contact-confirmation-container, .coral-b, .coral-big { position: absolute; } #coral-big-1 { left: 1300px; bottom: -70%; width: 300px; height: 400px; background-image: url(../image/coral-big-a.webp); } #coral-big-2 { left: 1700px; bottom: -70%; width: 650px; height: 500px; background-image: url(../image/coral-big-b.webp); } #contact-box { position: absolute; top: 120px; margin-left: -840px; width: 940px; height: 420px; background-image: url(../image/contact-box.png); } #contact-box-email { position: absolute; left: 570px; top: 20px; width: 350px; height: 30px; background-image: url(../image/contact-box-hole-a.png); } #contact-box-email input, #contact-box-subject input { font-family: Arial; font-size: 14px; color: #fff; width: 340px; margin: 5px; border: 0; background-color: transparent; } #contact-box-email input:focus, #contact-box-message textarea:focus, #contact-box-subject input:focus { outline: 0; } #contact-box-message, #contact-box-subject { position: absolute; left: 570px; width: 350px; } #contact-box-subject { top: 65px; height: 30px; background-image: url(../image/contact-box-hole-a.png); } #contact-box-message { top: 110px; height: 170px; background-image: url(../image/contact-box-hole-b.png); } #contact-box-message textarea { font-family: Arial; font-size: 14px; color: #fff; width: 340px; height: 160px; margin: 5px; border: 0; overflow: hidden; resize: none; background-color: transparent; } #contact-button { position: absolute; top: 440px; margin-left: -510px; width: 355px; height: 100px; } #contact-center { position: absolute; height: 540px; left: 70%; bottom: 20%; } #contact-cloud-bottom { position: absolute; left: 0; top: 100%; width: 100%; height: 21px; background-image: url(../image/contact-cloud-bottom.webp); } #contact-cloud-middle { position: absolute; left: 0; top: 80%; width: 100%; height: 20%; background-color: #fff; background-image: url(../image/nubetexture.png); } #contact-cloud-seal-bottom, #contact-cloud-seal-top { position: absolute; width: 100%; height: 2px; background-color: #fff; } #contact-cloud-seal-bottom { bottom: -1px; } #contact-cloud-seal-top { top: -1px; } #contact-cloud-top { position: absolute; left: 0; bottom: 20%; width: 100%; height: 21px; background-image: url(../image/contact-cloud-top.png); } .contact-confirmation { position: relative; width: 260px; height: 190px; left: -50%; } .contact-confirmation-rectangle { position: absolute; width: 260px; height: 170px; background-color: #333; } .contact-confirmation-title-a, .contact-confirmation-title-b { position: absolute; left: 30px; top: 26px; font-family: var(--fsecond); color: #c69c6d; font-size: 35px; } .contact-confirmation-title-b { font-size: 48px; } .contact-confirmation-text-a, .contact-confirmation-text-b { position: absolute; left: 30px; top: 70px; width: 200px; font-family: var(--ffirst); font-size: 19px; line-height: 22px; color: #aaa; } .contact-confirmation-text-b { top: 82px; font-size: 24px; line-height: 24px; } .contact-confirmation-text-c, .contact-confirmation-text-d { position: absolute; font-family: var(--ffirst); font-size: 25px; color: #aaa; } .contact-confirmation-text-c { width: 200px; line-height: 25px; left: 30px; top: 82px; } .contact-confirmation-text-d { left: 72px; top: 68px; } .contact-confirmation-triangle { position: absolute; left: 120px; top: 170px; width: 20px; height: 20px; background-image: url(../image/contact-confirmation-triangle.png); } #contact-container { position: absolute; width: 100%; height: 100%; } .cloud { position: absolute; } .content-noscroll { position: absolute; width: 100%; height: 100%; overflow: hidden; } .cloud { width: 180px; height: 120px; background-image: url(../image/cloud.webp); } #cloud-1 { left: 100px; top: 20%; } #cloud-2 { left: 600px; top: 5%; } #cloud-3 { left: 1300px; top: 30%; } #cloud-4 { left: 1900px; top: 20%; } #cloud-5 { left: 10%; bottom: 550px; } #cloud-6 { left: 25%; bottom: 1200px; } #cloud-7 { left: 70%; bottom: 1400px; } #cloud-8 { left: 40%; bottom: 1800px; } #cloud-9 { left: 80%; bottom: 2000px; } #cloud-10 { left: 10%; bottom: 2600px; } #cloud-11 { left: 60%; bottom: 2450px; } #container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .crab { position: absolute; width: 130px; height: 89px; overflow: hidden; background-image: url(../image/crab.webp); } .crab-eyes { position: absolute; left: 31px; top: 41px; width: 38px; height: 19px; opacity: 0; filter: alpha(opacity=0); background-image: url(../image/crab-eyes.png); } #crab-ribbon-container-1 { top: 0; } #crab-ribbon-container-2 { top: 100px; } #crab-ribbon-container-3 { top: 200px; } #crab-ribbon-container-4 { top: 300px; } #crabs-container { position: absolute; left: 270px; top: 72px; width: 730px; height: 489px; } #crab-text-container { position: absolute; top: 100px; right: 760px; width: 480px; height: 440px; } .crane { position: absolute; bottom: 20%; width: 110px; height: 80%; background-image: url(../image/crane.webp); background-position: 0 100%; } #crane-1 { left: 7750px; } #crane-2 { left: 9000px; } #detect-container { position: absolute; background-color: #000; padding: 10px; display: inline-block; opacity: 0.8; filter: alpha(opacity=80); } .detect-name { font-weight: 700; margin-right: 10px; } .detect-name, .detect-value { font-family: arial; color: #fff; font-size: 14px; } .displaynone { display: none; } #dock-column, #dock-floor { position: absolute; left: 20470px; top: 80%; width: 2970px; } #dock-floor { height: 50px; background-image: url(../image/dock-floor.png); } #dock-column { height: 20%; background-image: url(../image/dock-column.png); } #elevation-1, #elevation-2 { left: 4380px; bottom: 20%; width: 400px; height: 120px; } #elevation-2 { left: 6080px; } #elevation-3, #elevation-4 { left: 17472px; bottom: 20%; width: 400px; height: 150px; } #elevation-4 { left: 19009px; } .elevation, .elevation-box { position: absolute; } .elevation-box { width: 100%; height: 100px; bottom: 0; background-image: url(../image/box.webp); } .elevation-floor { position: absolute; width: 100%; height: 50px; background-image: url(../image/floor.webp); } .enemy-face-frame-a, .enemy-face-frame-b { position: absolute; left: 0; top: 0; width: 130px; height: 65px; background-image: url(../image/enemy-face-frame-a.png); } .enemy-face-frame-b { width: 160px; height: 80px; background-image: url(../image/enemy-face-frame-b.png); } #experience-1-container { position: absolute; left: 16433px; bottom: 20%; width: 1000px; height: 80%; } #experience-2-container { width: 1000px; } #experience-2-container, #experience-3-container { position: absolute; bottom: 20%; height: 80%; } #experience-2-container { left: 17939px; } #experience-3-container { left: 19501px; width: 900px; } .experience-text-a, .experience-text-b { position: relative; width: 100%; margin-bottom: 20px; font-family: var(--ffirst); color: #fff; font-size: 35px; line-height: 35px; } .experience-text-b { font-family: var(--fsecond); font-size: 60px; line-height: 54px; } .experience-text-c { width: 100%; } .experience-text-c, .experience-text-d, .experience-text-e { position: relative; margin-bottom: 20px; font-family: Arial; color: #fff; font-size: 18px; } .experience-text-d { width: 75%; } .experience-text-e { width: 85%; } .experience-text-container { position: absolute; bottom: 125px; width: 510px; background-color: #444; padding: 40px; border-style: solid; border-width: 10px; border-color: #000; } #email-button, #fence { position: absolute; width: 485px; height: 230px; background-image: url(../image/email-button.png); } .face-left { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; filter: fliph; } .face-right { -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } #fence { width: 740px; height: 100px; background-image: url(../image/fence.png); } .firework { position: relative; left: -50%; top: -50%; width: 500px; height: 500px; background-color: transparent; } .firework-container { position: absolute; width: 500px; height: 500px; } #firework-container-1 { left: 90%; top: 30%; } #firework-container-2 { left: 10%; top: 20%; } #firework-container-3 { left: 50%; top: 10%; } #firework-container-4 { left: 90%; top: 50%; } #firework-container-5 { left: 30%; top: 15%; } #firework-container-6 { left: 90%; top: 30%; } #fireworks-container { position: absolute; width: 100%; height: 100%; } .fish, .fish-eyes { position: absolute; } .fish { width: 125px; height: 93px; overflow: hidden; background-image: url(../image/fish.webp); } .fish-eyes { left: 18px; top: 45px; width: 39px; height: 18px; opacity: 0; filter: alpha(opacity=0); background-image: url(../image/fish-eyes.png); } #fishes-container { position: absolute; left: 270px; top: 70px; width: 725px; height: 493px; } #fish-ribbon-container-1 { top: 0; } #fish-ribbon-container-2 { top: 100px; } #fish-ribbon-container-3 { top: 200px; } #fish-ribbon-container-4 { top: 300px; } #fish-text-container { position: absolute; top: 100px; right: 760px; width: 480px; height: 440px; } #floor { position: absolute; width: 100%; height: 50px; background-image: url(../image/floor.webp); } .foundation { position: absolute; top: 80%; height: 90%; background-image: url(../image/foundation.png); } #foundation-1 { left: 13320px; width: 6220px; } .gate { position: absolute; bottom: 20%; width: 320px; height: 300px; background-image: url(../image/gate.png); } #gate-1 { left: 2100px; } #gate-2 { left: 7780px; } #gate-3 { left: 14450px; } #gate-4 { left: 20418px; } .gate-text { position: absolute; top: 10px; font-family: var(--fsecond); color: #000; font-size: 60px; } #gate-text-1 { left: 37px; } #gate-text-2, #gate-text-3 { left: 32px; } #gate-text-4 { left: 29px; } .grass { position: absolute; width: 100%; height: 50px; background-image: url(../image/grass.webp); } .ground, .layer-horizontal { position: absolute; height: 100%; } .ground { width: 100%; background-image: url(../image/ground.webp); } #ground-and-grass-container-1 { position: absolute; left: 0; top: 80%; width: 8100px; height: 90%; } #ground-and-grass-container-2 { position: absolute; right: 0; bottom: 0; width: 1160px; height: 2000px; } img { border-style: none; } #javascript-banner { position: relative; left: -50%; margin-top: -115px; width: 600px; height: 230px; } #javascript-banner-container { position: absolute; left: 50%; top: 50%; } #javascript-banner-left { position: absolute; left: 0; top: 0; width: 80px; height: 230px; background-image: url(../image/javascript-banner-left.png); } #javascript-banner-middle { position: absolute; left: 79px; top: 0; width: 440px; height: 190px; background-color: #f7941d; } #javascript-banner-right { position: absolute; left: 518px; top: 0; width: 80px; height: 230px; background-image: url(../image/javascript-banner-right.png); } #javascript-banner-text-a, #javascript-banner-text-b { position: relative; font-family: var(--fsecond); color: #fff; font-size: 39px; text-align: center; margin-top: 37px; } #javascript-banner-text-b { font-size: 72px; margin-top: -12px; } .layer-horizontal { left: 0; top: 100%; } #layer-horizontal-1 { width: 4000px; } #layer-horizontal-2 { width: 12000px; } #layer-horizontal-3 { width: 22500px; } .layer-vertical, .mountain { position: absolute; bottom: 0; width: 100%; } #layer-vertical-1 { height: 3500px; } #layer-vertical-2 { height: 6000px; } .mountain { bottom: 20%; width: 800px; height: 400px; background-image: url(../image/mountain.png); } #mountain-1 { left: 1000px; } #mountain-2 { left: 2800px; } #nba-ball { position: absolute; left: 415px; bottom: 250px; width: 70px; height: 70px; background-image: url(../image/nba-ball.png); } #nba-board-1 { left: 0; bottom: 0; } #nba-board-2 { left: 120px; bottom: 0; } #nba-board-3 { left: 240px; bottom: 0; } #nba-board-4 { left: 550px; bottom: 0; } #nba-board-5 { left: 670px; bottom: 0; } #nba-board-6 { left: 790px; bottom: 0; } .nba-board-blue, .nba-board-red { position: absolute; width: 110px; height: 140px; background-image: url(../image/nba-board-blue.png); } .nba-board-red { background-image: url(../image/nba-board-red.png); } #nba-container { position: absolute; left: 6680px; bottom: 20%; width: 900px; height: 80%; } #nba-player { position: relative; left: -50%; overflow: hidden; width: 300px; height: 280px; } #nba-player-eyes { position: absolute; left: 92px; top: 75px; width: 66px; height: 30px; opacity: 0; filter: alpha(opacity=0); background-image: url(../image/enemy-face-b-eyes.png); } #nba-player-container { position: absolute; left: 50%; bottom: 0; } #nba-player-frame { position: absolute; left: 0; top: 0; width: 1200px; height: 280px; background-image: url(../image/nba-player.png); } #nba-rim, #nba-rim-container { position: absolute; width: 280px; } #nba-rim-container { left: 310px; bottom: 0; height: 500px; } #nba-rim { height: 550px; background-image: url(../image/nba-rim.png); } .nba-text { position: relative; top: -13px; font-family: var(--fsecond); color: #000; font-size: 120px; margin-left: -50%; } .nba-text-container { position: absolute; left: 50%; } #hangar, #hangar-door { position: absolute; left: 8030px; bottom: 20%; width: 800px; height: 400px; background-image: url(../image/fabric.png); } #hangar-door { left: 100px; bottom: 0; width: 600px; height: 290px; background-color: #333; } #hangar-roof { position: absolute; width: 100%; height: 40px; background-color: #aaa; } #hangar-window { position: absolute; left: 100px; top: 90px; width: 600px; height: 100px; background-image: url(../image/hangar-window.png); } #page { left: 0; top: 0; width: 100%; } #panel { position: absolute; top: 60px; width: 100%; height: 100%; background-image: url(../image/panel.webp); } #panel-and-floor-container { position: absolute; left: 14261px; top: 80%; width: 6210px; height: 90%; background-color: #040404; overflow: hidden; } #piechart-robot-front, .piechart { position: absolute; width: 300px; height: 300px; } .piechart { overflow: hidden; } #piechart-robot { left: 160px; top: 30px; } #piechart-robot-front { left: 0; top: 0; background-image: url(../image/piechart-front.webp); } #piechart-robot-text-graphic-1 { left: 202px; top: 168px; } #piechart-robot-text-graphic-2 { left: 216px; top: 194px; } #piechart-robot-text-animation-1 { left: 10px; top: 97px; } #piechart-robot-text-animation-2 { left: 46px; top: 131px; } #piechart-robot-text-code-1 { left: 209px; top: 81px; } #piechart-robot-text-code-2 { left: 221px; top: 106px; } #piechart-alien-front, .piechart-back { position: absolute; left: 0; top: 0; width: 300px; height: 300px; } .piechart-back { background-image: url(../image/piechart-back.webp); } #piechart-alien { left: 50px; top: 130px; } #piechart-alien-front { background-image: url(../image/piechart-front.webp); } #piechart-alien-text-graphic-1 { left: 40px; top: 123px; } #piechart-alien-text-graphic-2 { left: 42px; top: 150px; } #piechart-alien-text-animation-1 { left: 191px; top: 166px; } #piechart-alien-text-animation-2 { left: 218px; top: 193px; } #piechart-alien-text-code-1 { left: 193px; top: 82px; } #piechart-alien-text-code-2 { left: 221px; top: 105px; } #piechart-squid { left: 135px; top: 20px; } #piechart-squid-front { position: absolute; left: 0; top: 0; width: 300px; height: 300px; background-image: url(../image/piechart-front.webp); } #piechart-squid-text-graphic-1 { left: 27px; top: 98px; } #piechart-squid-text-graphic-2 { left: 42px; top: 121px; } #piechart-squid-text-animation-1 { left: 200px; top: 168px; } #piechart-squid-text-animation-2 { left: 218px; top: 193px; } #piechart-squid-text-code-1 { left: 208px; top: 79px; } #piechart-squid-text-code-2 { left: 221px; top: 105px; } .piechart-text-a, .piechart-text-b { position: absolute; font-family: var(--ffour); color: #fff; font-size: 1.5rem; } .piechart-text-b { font-family: var(--ffirst); font-size: 30px; } .piechart-text-c, .piechart-text-d { position: absolute; font-family: var(--ffour); color: #fff; font-size: 1.5rem; } .piechart-text-d { font-family: var(--ffirst); font-size: 40px; } .plant, .plant-head-leaves { position: absolute; width: 160px; height: 100%; } .plant-head-leaves { height: 130px; background-image: url(../image/plant-head-leaves.png); } .plant-stalk { position: absolute; left: 49px; top: 95px; width: 56px; height: 100%; background-image: url(../image/chain.png); background-position: center; } #plant-1 { left: 180px; top: 65%; } #plant-2 { left: 360px; top: 65%; } #plant-3 { left: 540px; top: 52%; } #plant-4 { left: 720px; top: 52%; } #plants-container { position: absolute; left: 3280px; bottom: 20%; width: 900px; height: 80%; } .plant-line { width: 100%; height: 1px; background-color: #fff; } #plant-line-1 { bottom: 65%; } #plant-line-2 { bottom: 52%; } #plant-line-3 { bottom: 39%; } #plant-line-4 { bottom: 26%; } #plant-line-5 { bottom: 13%; } .plant-line, .plant-ribbon { position: absolute; } .imagenportafo { width: 100%; min-height: 440px; object-fit: contain; margin-bottom: 24px; border-radius: 32px 12px 2px 24px; } #plant-ribbon-container { position: absolute; width: 1200px; height: 40px; bottom: 70%; } #plant-ribbon-1 { left: 180px; } #plant-ribbon-2 { left: 345px; } #plant-ribbon-3 { left: 516px; } #plant-ribbon-4 { left: 722px; } .plant-ribbon-left { position: relative; float: left; width: 20px; height: 40px; margin-right: -1px; background-image: url(../image/plant-ribbon-left.png); } .plant-ribbon-middle { position: relative; float: left; height: 34px; padding-top: 6px; padding-left: 2px; padding-right: 2px; background-color: #fff; font-family: var(--fsecond); color: #000; font-size: 24px; } .plant-ribbon-right { position: relative; float: left; width: 20px; height: 40px; margin-left: -1px; background-image: url(../image/plant-ribbon-right.png); } #plant-text-1 { bottom: 66%; } #plant-text-2 { bottom: 53%; } #plant-text-3 { bottom: 40%; } #plant-text-4 { bottom: 27%; } #plant-text-5 { bottom: 14%; } #preloader, .plant-text { position: absolute; left: 0; } .plant-text { font-family: var(--ffirst); color: #fff; font-size: 20px; } #preloader { bottom: 0; width: 100%; height: 100%; } #preloader-banner { position: relative; left: -50%; margin-top: -115px; width: 600px; height: 230px; } #preloader-banner-container { position: absolute; left: 50%; top: 50%; } #preloader-banner-left { position: absolute; left: 0; top: 0; width: 80px; height: 230px; background-image: url(../image/preloader-banner-left.png); } #preloader-banner-middle { position: absolute; left: 79px; top: 0; width: 440px; height: 190px; background-color: #fff; } #preloader-banner-right { position: absolute; left: 518px; top: 0; width: 80px; height: 230px; background-image: url(../image/preloader-banner-right.png); } #preloader-banner-text-a, #preloader-banner-text-b { position: relative; font-family: var(--fsecond); color: #000; font-size: 72px; text-align: center; margin-top: 29px; } #preloader-banner-text-b { font-size: 39px; margin-top: -12px; } #preloader-dots { position: absolute; left: 194px; top: 130px; width: 53px; height: 9px; } .preloader-dots-animation { background-image: url(../image/preloader-dots-animation.gif); } .preloader-dots-static { background-image: url(../image/preloader-dots-static.png); } #robby { position: relative; left: -50%; width: 200px; height: 175px; overflow: hidden; } #robby-container { position: absolute; left: 50%; bottom: 100%; } #robby-eyes-close, #robby-slides { position: absolute; top: 35px; left: 90px; width: 55px; height: 25px; background-image: url(../image/robby-eyes-close.png); } #robby-slides { left: 0; top: 0; width: 1800px; height: 400px; background-image: url(../image/robby-slides.webp); } #ribbon-2-1 { left: 9390px; top: 80%; } #ribbon-2-2 { left: 10735px; top: 80%; } #ribbon-2-3 { left: 12240px; top: 80%; } #ribbon-2-4 { left: 13615px; top: 80%; } #robot, .ribbon-absolute { position: absolute; } .ribbon-container { position: absolute; width: 100%; height: 75px; top: 5%; text-align: center; } .ribbon-left { position: relative; float: left; width: 55px; height: 75px; margin-right: -1px; background-image: url(../image/ribbon-left.png); } .ribbon-middle { position: relative; float: left; height: 50px; background-color: #fff; font-family: var(--fthird); color: #000; font-size: 36px; text-align: center; } .ribbon-right { position: relative; float: left; width: 55px; height: 75px; margin-left: -1px; background-image: url(../image/ribbon-right.png); } .ribbon-relative { display: inline-block; } #robot { left: 380px; bottom: 53px; width: 620px; height: 492px; } #robot-body { position: absolute; left: 60px; top: 0; width: 500px; height: 399px; background-image: url(../image/robot-body.webp); } .robot-hand-a { position: absolute; left: 0; width: 160px; height: 137px; background-image: url(../image/robot-hand-a.png); } .robot-hand-b { left: 19px; width: 120px; background-image: url(../image/robot-hand-b.png); } .robot-hand-b, .robot-hand-c, .robot-hand-d { position: absolute; height: 137px; } .robot-hand-c { left: 14px; width: 120px; background-image: url(../image/robot-hand-c.png); } .robot-hand-d { left: 19px; width: 120px; background-image: url(../image/robot-hand-d.png); } #robot-hand-left, #robot-hand-right { position: absolute; left: 32px; top: 323px; width: 160px; height: 137px; } #robot-hand-right { left: 450px; } .sea { position: absolute; top: 90%; } #sea-1 { left: 8100px; width: 6180px; height: 80%; } #sea-2 { left: 20497px; width: 2970px; height: 10%; background-color: #808080; } #sea-floor { position: absolute; } #sea-layer-horizontal-1, .sea-seal { width: 100%; background-color: #808080; } .sea-seal { position: absolute; top: -1px; height: 2px; } #sea-layer-horizontal-1 { left: 0; height: 85%; } #sea-floor { left: 0; top: 170%; width: 22500px; height: 5%; background-color: #000; background-image: url(../image/grass.webp); } .sea-ribbon-container { position: absolute; height: 40px; right: 0; } .sea-ribbon-left { position: relative; float: left; width: 20px; height: 40px; margin-right: -1px; background-image: url(../image/sea-ribbon-left.png); } .sea-ribbon-middle { position: relative; float: left; height: 34px; padding-top: 6px; padding-left: 2px; padding-right: 2px; background-color: #fff; font-family: var(--fsecond); color: #000; font-size: 24px; } .sea-ribbon-right { position: relative; float: left; width: 20px; height: 40px; margin-left: -1px; background-image: url(../image/sea-ribbon-right.png); } .sea-wave { position: absolute; bottom: 10%; height: 6px; background-image: url(../image/sea-wave.png); } #sea-wave-1 { left: 8100px; width: 6180px; } #sea-wave-2 { left: 20469px; width: 2970px; } #skill-1-container { left: 1020px; } #skill-1-container, #skill-2-container, #skill-3-container, #skill-4-container { position: absolute; bottom: 0; width: 1000px; height: 90%; } #skill-2-container { left: 2420px; } #skill-3-container { left: 3820px; } #skill-4-container { left: 5095px; } .skill-measurement { position: absolute; bottom: 0; height: 100%; } .skill-measurement-1 { left: 270px; } .skill-measurement-2 { left: 420px; } .skill-measurement-3 { left: 570px; } .skill-measurement-4 { left: 720px; } .skill-measurement-5 { left: 870px; } .skill-measurement-header { position: absolute; padding: 6px 10px 5px; background-color: #000; font-family: var(--ffirst); color: #fff; font-size: 18px; } .skill-measurement-line { position: absolute; width: 1px; height: 100%; background-color: #000; } .scroll-or-swipe-text-container { text-shadow: 0 0 12px #000; position: absolute; bottom: -120px; width: 100%; height: 50px; font-family: var(--ffirst); color: #fff; font-size: 30px; text-align: center; opacity: 0; filter: alpha(opacity=0); } #social-bottom { position: relative; left: 20px; width: 80px; height: 21px; margin-top: -1px; background-image: url(../image/social-bottom.png); } #social-container { position: absolute; width: 120px; left: 85%; } #social-middle { position: relative; left: 20px; width: 70px; padding-top: 20px; padding-left: 10px; padding-bottom: 10px; background-color: #fff; } #social-top { position: relative; width: 120px; height: 23px; margin-bottom: -1px; background-image: url(../image/social-top.png); } .social-icon { position: relative; width: 60px; height: 60px; margin-bottom: 10px; } #splash-container, #squid { position: absolute; bottom: 20%; width: 1300px; height: 548px; } #squid { left: 430px; bottom: 10px; width: 570px; height: 600px; } #squid-body { left: 60px; top: 0; width: 450px; height: 544px; background-image: url(../image/squid-body.webp); } #squid-body, .squid-hand-close, .squid-hand-open { position: absolute; } #squid-hand-close-1 { left: 0; top: 399px; width: 80px; height: 83px; background-image: url(../image/squid-hand-close-a.png); } #squid-hand-close-2, #squid-hand-close-3 { left: 100px; top: 510px; width: 82px; height: 81px; background-image: url(../image/squid-hand-close-b.png); } #squid-hand-close-3 { left: 388px; background-image: url(../image/squid-hand-close-c.png); } #squid-hand-close-4 { left: 490px; top: 399px; width: 80px; height: 83px; background-image: url(../image/squid-hand-close-d.png); } #squid-hand-open-1 { left: 0; top: 394px; width: 85px; height: 100px; background-image: url(../image/squid-hand-open-a.png); } #squid-hand-open-2, #squid-hand-open-3 { left: 94px; top: 502px; width: 96px; height: 97px; background-image: url(../image/squid-hand-open-b.png); } #squid-hand-open-3 { left: 380px; background-image: url(../image/squid-hand-open-c.png); } #squid-hand-open-4 { left: 485px; top: 394px; width: 85px; height: 100px; background-image: url(../image/squid-hand-open-d.png); } #title-about, #title-awards-and { position: absolute; left: 2280px; bottom: 20%; width: 800px; height: 400px; background-image: url(../image/title-about.png); } #title-awards-and { left: 20687px; width: 1060px; height: 420px; background-image: url(../image/title-awards-and.png); } #title-contact { position: absolute; top: 0; margin-left: -1040px; width: 1080px; height: 540px; background-image: url(../image/title-contact.png); } #title-experience, #title-leonardi { position: absolute; left: 14827px; bottom: 20%; width: 1140px; height: 400px; background-image: url(../image/title-experience.png); } #title-leonardi { left: 200px; bottom: 0; width: 880px; height: 300px; background-image: url(../image/title-leonardi.png); } #title-publication, #title-robby { position: absolute; left: 19910px; bottom: 20%; width: 1180px; height: 300px; background-image: url(../image/title-publication.png); } #title-publication { left: 20502px; } #title-robby { left: 0; bottom: 0; width: 840px; height: 420px; background-image: url(../image/title-robby.png); } #title-skills { position: absolute; width: 820px; height: 400px; background-image: url(../image/title-skills.png); } .transparent { opacity: 0; filter: alpha(opacity=0); } #title-skills, #tree-1, #tree-2 { left: 0; bottom: 0; } #tree-2 { left: 100px; } #tree-3, #tree-4 { left: 240px; bottom: 0; } #tree-4 { left: 880px; } #tree-5, #tree-6 { left: 1186px; bottom: 0; } #tree-6 { left: 1060px; } #tree-7 { left: 2650px; bottom: 20%; } #tree-8 { left: 2750px; } #tree-10, #tree-8, #tree-9 { bottom: 20%; } #tree-9 { left: 3010px; } #tree-10 { left: 2850px; } #tree-11 { left: -100px; bottom: 0; } #tree-12 { left: 20px; bottom: 0; } #tree-13 { left: 140px; bottom: 0; } #tree-14 { left: 260px; bottom: 0; } #tree-15 { left: 380px; bottom: 0; } #tree-16 { left: 500px; bottom: 0; } #tree-17 { left: 620px; bottom: 0; } #tree-18 { left: 740px; bottom: 0; } #tree-19 { left: 860px; bottom: 0; } #tree-20 { left: -100px; bottom: 0; } #tree-21 { left: 0; bottom: 0; } #tree-22 { left: 160px; bottom: 0; } #tree-23 { left: 600px; bottom: 0; } #tree-24 { left: 700px; bottom: 0; } #tree-25 { left: 860px; bottom: 0; } .tree-bright-a { position: absolute; width: 140px; height: 95px; background-image: url(../image/tree-bright-a.png); } .tree-bright-b, .tree-bright-c { position: absolute; width: 140px; height: 185px; background-image: url(../image/tree-bright-b.png); } .tree-bright-c { width: 200px; height: 240px; background-image: url(../image/tree-bright-c.png); } .tree-bright-d, .tree-bright-e, .tree-dark-a { position: absolute; width: 200px; height: 300px; background-image: url(../image/tree-bright-d.png); } .tree-bright-e, .tree-dark-a { height: 430px; background-image: url(../image/tree-bright-e.png); } .tree-dark-a { width: 140px; height: 95px; background-image: url(../image/tree-dark-a.png); } .tree-dark-b { width: 140px; } .tree-dark-b, .tree-dark-c { position: absolute; } .tree-dark-b { height: 185px; background-image: url(../image/tree-dark-b.png); } .tree-dark-c { width: 200px; height: 240px; background-image: url(../image/tree-dark-c.png); } .tree-dark-d { position: absolute; width: 200px; height: 300px; background-image: url(../image/tree-dark-d.png); } .tree-dark-e { width: 200px; } .tree-dark-e, .turtle, .puercospin { position: absolute; } .tree-dark-e { height: 430px; background-image: url(../image/tree-dark-e.png); } .turtle { width: 125px; height: 75px; overflow: hidden; background-image: url(../image/turtle.webp); } .puercospin { width: 125px; height: 110px; overflow: hidden; background-image: url(../image/puercospin.webp); } .turtle-eyes { position: absolute; left: 3px; top: 27px; width: 39px; height: 18px; opacity: 0; filter: alpha(opacity=0); background-image: url(../image/turtle-eyes.png); } #turtle-ribbon-container-1 { top: 0; } #turtle-ribbon-container-2 { top: 100px; } #turtle-ribbon-container-3 { top: 200px; } #turtle-ribbon-container-4 { top: 300px; } #puercospin-ribbon-container-1 { top: 0; } #puercospin-ribbon-container-2 { top: 100px; } #puercospin-ribbon-container-3 { top: 200px; } #puercospin-ribbon-container-4 { top: 300px; } #puercospin-container, #turtles-container, .waterfall { position: absolute; left: 270px; top: 50px; width: 725px; height: 475px; } #turtles-container { top: 72px; } #puercospin-container { top: 72px; } #puercospin-text-container { position: absolute; top: 100px; right: 760px; width: 480px; height: 440px; } #turtle-text-container { position: absolute; top: 94px; right: 760px; width: 480px; height: 440px; } .waterfall { left: 150px; top: 0; width: 860px; height: 100%; } #waterfall-1 { background-image: url(../image/waterfall-a.png); } #waterfall-2 { background-image: url(../image/waterfall-b.png); } .window { position: absolute; width: 190px; height: 110px; background-image: url(../image/window.png); }