@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";.error404 h1,.error404 h2,.error404 h3,.error404 h4,.error404 h5,.error404 h6,.error404 p,.error404 ul,.error404 li,.error404 button,.error404 a,.error404 i,.error404 input,.error404 body{margin:0;padding:0;list-style:none;border:0;-webkit-tap-highlight-color:transparent;text-decoration:none;color:inherit}body.error404{margin:0;padding:0;height:auto;font-family:"Barlow",sans-serif;background:#1e1e1e}.error404 .wrapper{grid-template-columns:1fr;justify-content:center;align-items:center;height:100vh;overflow-x:hidden}.error404 .wrapper .container{margin:0 auto;transition:all .4s ease;justify-content:center;align-items:center;height:100%}.error404 .wrapper .container .one,.error404 .wrapper .container .two,.error404 .wrapper .container .three,.error404 .wrapper .container .circle,.error404 .wrapper .container .p404{width:60%;height:60%;top:20%!important;left:20%!important;min-width:400px}.error404 .wrapper .container .one .content,.error404 .wrapper .container .two .content,.error404 .wrapper .container .three .content,.error404 .wrapper .container .circle .content,.error404 .wrapper .container .p404 .content{width:60vh;height:60vh;display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:content .8s cubic-bezier(1,0.06,0.25,1) backwards}@keyframes content{0%{width:0}}.error404 .wrapper .container .one .content .piece,.error404 .wrapper .container .two .content .piece,.error404 .wrapper .container .three .content .piece,.error404 .wrapper .container .circle .content .piece,.error404 .wrapper .container .p404 .content .piece{width:200px;height:80px;display:flex;position:absolute;border-radius:80px;z-index:1;animation:pieceLeft 8s cubic-bezier(1,0.06,0.25,1) infinite both}@keyframes pieceLeft{50%{left:80%;width:10%}}@keyframes pieceRight{50%{right:80%;width:10%}}@media screen and (max-width: 799px){.error404 .wrapper .container .one,.error404 .wrapper .container .two,.error404 .wrapper .container .three,.error404 .wrapper .container .circle,.error404 .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){.error404 .wrapper .container .one,.error404 .wrapper .container .two,.error404 .wrapper .container .three,.error404 .wrapper .container .circle,.error404 .wrapper .container .p404{min-width:280px;min-height:280px;width:60%;height:60%;top:20%!important;left:20%!important}}.error404 .wrapper .container .text{margin:40px 0;animation:text .6s 1.8s ease backwards;position:fixed;width:100%;bottom:10%;left:0}@keyframes text{0%{opacity:0;transform:translateY(40px)}}.error404 .wrapper .container .text article{bottom:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;bottom:10%;left:50%}@media screen and (max-width: 799px){.error404 .wrapper .container .text article{width:100%}}.error404 .wrapper .container .text article p{color:#fff;font-size:18px;letter-spacing:.6px;margin-bottom:40px;text-shadow:6px 6px 10px #32243e}.error404 .wrapper .container .text article button{height:40px;padding:0 30px;border-radius:50px;cursor:pointer;box-shadow:0 15px 20px rgba(54,24,79,0.5);z-index:3;color:#695681;background-color:#fff;text-transform:uppercase;font-weight:600;font-size:12px;transition:all .3s ease}.error404 .wrapper .container .text article button:hover{box-shadow:0 10px 10px -10px rgba(54,24,79,0.5);transform:translateY(5px);background:#fb8a8a;color:#fff}.error404 .wrapper .container .p404{font-size:200px;font-weight:700;letter-spacing:4px;color:#fff;display:flex!important;justify-content:center;align-items:center;position:absolute;z-index:2;animation:anime404 .6s cubic-bezier(0.3,0.8,1,1.05) both;animation-delay:1.2s}@media screen and (max-width: 799px){.error404 .wrapper .container .p404{font-size:100px}}@keyframes anime404{0%{opacity:0;transform:scale(10) skew(20deg,20deg)}}.error404 .wrapper .container .p404:nth-of-type(2){color:#36184f;z-index:1;animation-delay:1s;filter:blur(10px);opacity:.8}.error404 .wrapper .container .circle{position:absolute}.error404 .wrapper .container .circle:before{content:'';position:absolute;width:80vh;height:80vh;background-color:#000;border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 5px 20px 40px rgba(54,24,79,0.25),inset 5px 0 5px rgba(50,36,62,0.3),inset 5px 5px 20px rgba(50,36,62,0.25),2px 2px 5px rgba(255,255,255,0.2);animation:circle .8s cubic-bezier(1,0.06,0.25,1) backwards}@keyframes circle{0%{width:0;height:0}}@media screen and (max-width: 799px){.error404 .wrapper .container .circle:before{width:400px;height:400px}}.error404 .wrapper .container .one .content:before{content:'';position:absolute;width:60vh;height:60vh;background-color:#000;border-radius:100%;box-shadow:inset 5px 20px 40px rgba(54,24,79,0.25),inset 5px 0 5px rgba(50,36,62,0.3),inset 5px 5px 20px rgba(50,36,62,0.25),2px 2px 5px rgba(255,255,255,0.2);animation:circle .8s .4s cubic-bezier(1,0.06,0.25,1) backwards}@media screen and (max-width: 799px){.error404 .wrapper .container .one .content:before{width:300px;height:300px}}.error404 .wrapper .container .one .content .piece{background:linear-gradient(90deg,#8077ea 13.7%,#eb73ff 94.65%)}.error404 .wrapper .container .one .content .piece:nth-child(1){right:15%;top:18%;height:30px;width:120px;animation-delay:.5s;animation-name:pieceRight}.error404 .wrapper .container .one .content .piece:nth-child(2){left:15%;top:45%;width:150px;height:50px;animation-delay:1s;animation-name:pieceLeft}.error404 .wrapper .container .one .content .piece:nth-child(3){left:10%;top:75%;height:20px;width:70px;animation-delay:1.5s;animation-name:pieceLeft}.error404 .wrapper .container .two .content .piece{background:linear-gradient(90deg,#ffedc0 0%,#ff9d87 100%)}.error404 .wrapper .container .two .content .piece:nth-child(1){left:0;top:25%;height:40px;width:120px;animation-delay:2s;animation-name:pieceLeft}.error404 .wrapper .container .two .content .piece:nth-child(2){right:15%;top:35%;width:180px;height:50px;animation-delay:2.5s;animation-name:pieceRight}.error404 .wrapper .container .two .content .piece:nth-child(3){right:10%;top:80%;height:20px;width:160px;animation-delay:3s;animation-name:pieceRight}.error404 .wrapper .container .three .content .piece{background:#fb8a8a}.error404 .wrapper .container .three .content .piece:nth-child(1){left:25%;top:35%;height:20px;width:80px;animation-name:pieceLeft;animation-delay:3.5s}.error404 .wrapper .container .three .content .piece:nth-child(2){right:10%;top:55%;width:140px;height:40px;animation-name:pieceRight;animation-delay:4s}.error404 .wrapper .container .three .content .piece:nth-child(3){left:40%;top:68%;height:20px;width:80px;animation-name:pieceLeft;animation-delay:4.5s}.error404 .wrapper section.wrapper{display:flex;height:100vh;align-items:center;justify-content:center;padding:3rem 0;box-sizing:border-box}