@import"https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap";:root{--primary: #0e7c86;--primaryh: #1fa3ad;--primaryl: #c7ecee;--accent-1: #ffd166;--accent-2: #38bdf8;--text-main: #ffffff;--wrapper-color-1: #0e7c86;--wrapper-color-2: #124559}h1,h2,h3,h4,h5,h6,p,ul,li,button,a,i,input,body{margin:0;padding:0;list-style:none;border:0;-webkit-tap-highlight-color:transparent;text-decoration:none;color:inherit}h1:focus,h2:focus,h3:focus,h4:focus,h5:focus,h6:focus,p:focus,ul:focus,li:focus,button:focus,a:focus,i:focus,input:focus,body:focus{outline:0}body{margin:0;padding:0;height:auto;font-family:Barlow,sans-serif;background:var(--primary);color:var(--text-main)}.wrapper{display:grid;grid-template-columns:1fr;justify-content:center;align-items:center;height:100vh;overflow-x:hidden;background:linear-gradient(135deg,var(--wrapper-color-1),var(--wrapper-color-2))}.wrapper .container{margin:0 auto;transition:all .4s ease;display:flex;justify-content:center;align-items:center;position:relative}.wrapper .container .scene{position:absolute;width:100vw;height:100vh;vertical-align:middle}.wrapper .container .one,.wrapper .container .two,.wrapper .container .three,.wrapper .container .circle,.wrapper .container .p404{width:60%;height:60%;top:20%!important;left:20%!important;min-width:400px;min-height:400px}.wrapper .container .one .content,.wrapper .container .two .content,.wrapper .container .three .content,.wrapper .container .circle .content,.wrapper .container .p404 .content{width:600px;height:600px;display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:content .3s cubic-bezier(1,.06,.25,1) backwards}@keyframes content{0%{width:0}}.wrapper .container .one .content .piece,.wrapper .container .two .content .piece,.wrapper .container .three .content .piece,.wrapper .container .circle .content .piece,.wrapper .container .p404 .content .piece{width:200px;height:80px;display:flex;position:absolute;border-radius:80px;z-index:1;animation:pieceLeft 3s cubic-bezier(1,.06,.25,1) infinite both;box-shadow:0 8px 24px #0b2c3a40,0 2px 8px #1fa3ad40}@keyframes pieceLeft{50%{left:80%;width:10%}}@keyframes pieceRight{50%{right:80%;width:10%}}@media screen and (max-width:799px){.wrapper .container .one,.wrapper .container .two,.wrapper .container .three,.wrapper .container .circle,.wrapper .container .p404{width:90%;height:90%;top:5%!important;left:5%!important;min-width:280px;min-height:280px}}@media screen and (max-height:660px){.wrapper .container .one,.wrapper .container .two,.wrapper .container .three,.wrapper .container .circle,.wrapper .container .p404{min-width:280px;min-height:280px;width:60%;height:60%;top:20%!important;left:20%!important}}.wrapper .container .text{width:60%;height:40%;min-width:400px;min-height:500px;position:absolute;margin:40px 0;animation:text .3s .6s ease backwards}@keyframes text{0%{opacity:0;transform:translateY(40px)}}@media screen and (max-width:799px){.wrapper .container .text{min-height:400px;height:80%}}.wrapper .container .text article{width:400px;position:absolute;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;bottom:0;left:50%;transform:translate(-50%)}@media screen and (max-width:799px){.wrapper .container .text article{width:100%}}.wrapper .container .text article p{color:var(--text-main);font-size:18px;letter-spacing:.6px;margin-bottom:40px;text-shadow:6px 6px 10px rgba(11,44,58,.6)}.wrapper .container .text article button{height:40px;padding:0 30px;border-radius:50px;cursor:pointer;box-shadow:0 15px 20px #0e7c8659;z-index:3;color:#0b2c3a;background-color:var(--text-main);text-transform:uppercase;font-weight:600;font-size:12px;transition:all .2s ease;border:1px solid rgba(14,124,134,.25)}.wrapper .container .text article button:hover{box-shadow:0 10px 10px -10px #0e7c8673;transform:translateY(5px);background:var(--wrapper-color-1);color:var(--text-main);border-color:transparent}.wrapper .container .p404{font-size:200px;font-weight:700;letter-spacing:4px;color:var(--text-main);display:flex!important;justify-content:center;align-items:center;position:absolute;z-index:2;animation:anime404 .3s cubic-bezier(.3,.8,1,1.05) both;animation-delay:.4s;text-shadow:0 12px 40px rgba(11,44,58,.45)}@media screen and (max-width:799px){.wrapper .container .p404{font-size:100px}}@keyframes anime404{0%{opacity:0;transform:scale(10) skew(20deg,20deg)}}.wrapper .container .p404:nth-of-type(2){color:#0b2c3a;z-index:1;animation-delay:.3s;filter:blur(10px);opacity:.8}.wrapper .container .circle{position:absolute}.wrapper .container .circle:before{content:"";position:absolute;width:800px;height:800px;background-color:#0e7c8633;border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 60px #1fa3ad40,inset 0 0 120px #12455940,0 0 80px #00141e73;animation:circle .3s cubic-bezier(1,.06,.25,1) backwards}.wrapper .container .circle:before,.wrapper .container .one .content:before{box-shadow:inset 0 0 60px #1fa3ad40,inset 0 0 120px #12455940,0 0 80px #00141e73}@keyframes circle{0%{width:0;height:0}}@media screen and (max-width:799px){.wrapper .container .circle:before{width:400px;height:400px}}.wrapper .container .one .content:before{content:"";position:absolute;width:600px;height:600px;background-color:#1245594d;border-radius:100%;box-shadow:inset 0 0 60px #1fa3ad40,inset 0 0 120px #12455940,0 0 80px #00141e73;animation:circle .3s .1s cubic-bezier(1,.06,.25,1) backwards}@media screen and (max-width:799px){.wrapper .container .one .content:before{width:300px;height:300px}}.wrapper .container .one .content .piece{background:linear-gradient(90deg,var(--wrapper-color-1) 13.7%,var(--primaryh) 94.65%)}.wrapper .container .one .content .piece:nth-child(1){right:15%;top:18%;height:30px;width:120px;animation-delay:.2s;animation-name:pieceRight}.wrapper .container .one .content .piece:nth-child(2){left:15%;top:45%;width:150px;height:50px;animation-delay:.4s;animation-name:pieceLeft}.wrapper .container .one .content .piece:nth-child(3){left:10%;top:75%;height:20px;width:70px;animation-delay:.6s;animation-name:pieceLeft}.wrapper .container .two .content .piece{background:linear-gradient(90deg,var(--accent-1) 0%,var(--accent-2) 100%)}.wrapper .container .two .content .piece:nth-child(1){left:0%;top:25%;height:40px;width:120px;animation-delay:.8s;animation-name:pieceLeft}.wrapper .container .two .content .piece:nth-child(2){right:15%;top:35%;width:180px;height:50px;animation-delay:1s;animation-name:pieceRight}.wrapper .container .two .content .piece:nth-child(3){right:10%;top:80%;height:20px;width:160px;animation-delay:1.2s;animation-name:pieceRight}.wrapper .container .three .content .piece{background:var(--accent-2)}.wrapper .container .three .content .piece:nth-child(1){left:25%;top:35%;height:20px;width:80px;animation-name:pieceLeft;animation-delay:1.4s}.wrapper .container .three .content .piece:nth-child(2){right:10%;top:55%;width:140px;height:40px;animation-name:pieceRight;animation-delay:1.6s}.wrapper .container .three .content .piece:nth-child(3){left:40%;top:68%;height:20px;width:80px;animation-name:pieceLeft;animation-delay:1.8s}