:root{--font-01:var(--font-sans),"Barlow",sans-serif;--font-02:var(--font-heading),"Barlow Condensed",sans-serif;--bg-01:#6b3fa0;--bg-02:#4c2893;--bg-03:#371b6d;--m-01:#fb8a8a;--m-02:#ffedc0}.wrapper-404{height:100vh;font-family:var(--font-01);background:var(--bg-01);grid-template-columns:1fr;justify-content:center;align-items:center;margin:0;padding:0;display:grid;overflow-x:hidden}.wrapper-404 .container-404{justify-content:center;align-items:center;margin:0 auto;transition:all .4s;display:flex;position:relative}.wrapper-404 .scene-404{vertical-align:middle;width:100vw;height:100vh;position:absolute}.wrapper-404 .one-404,.wrapper-404 .two-404,.wrapper-404 .three-404,.wrapper-404 .circle-404,.wrapper-404 .p404{width:60%;min-width:400px;height:60%;min-height:400px;position:absolute;top:20%!important;left:20%!important}@media screen and (max-width:799px){.wrapper-404 .one-404,.wrapper-404 .two-404,.wrapper-404 .three-404,.wrapper-404 .circle-404,.wrapper-404 .p404{width:90%;min-width:280px;height:90%;min-height:280px;top:5%!important;left:5%!important}}@media screen and (max-height:660px){.wrapper-404 .one-404,.wrapper-404 .two-404,.wrapper-404 .three-404,.wrapper-404 .circle-404,.wrapper-404 .p404{width:60%;min-width:280px;height:60%;min-height:280px;top:20%!important;left:20%!important}}.wrapper-404 .content-404{justify-content:center;align-items:center;width:600px;height:600px;animation:.8s cubic-bezier(1,.06,.25,1) backwards content;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes content{0%{width:0}}.wrapper-404 .piece-404{z-index:1;border-radius:80px;width:200px;height:80px;animation:8s cubic-bezier(1,.06,.25,1) infinite both pieceLeft;display:flex;position:absolute}@keyframes pieceLeft{0%{}50%{width:10%;left:80%}to{}}@keyframes pieceRight{0%{}50%{width:10%;right:80%}to{}}.wrapper-404 .text-404{width:60%;min-width:400px;height:40%;min-height:500px;margin:40px 0;animation:.6s 1.8s backwards text;position:absolute}@keyframes text{0%{opacity:0;transform:translateY(40px)}}@media screen and (max-width:799px){.wrapper-404 .text-404{height:80%;min-height:400px}}.wrapper-404 .text-404 article{z-index:4;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:400px;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@media screen and (max-width:799px){.wrapper-404 .text-404 article{width:100%}}.wrapper-404 .text-404 article p{color:#fff;letter-spacing:.6px;text-shadow:6px 6px 10px #371b6d99;margin-bottom:40px;font-size:18px}.wrapper-404 .text-404 article button{cursor:pointer;z-index:3;height:40px;color:var(--bg-01);text-transform:uppercase;background-color:#fff;border:none;border-radius:50px;padding:0 30px;font-size:12px;font-weight:600;transition:all .3s;box-shadow:0 15px 20px #371b6d80}.wrapper-404 .text-404 article button:hover{background:var(--m-01);color:#fff;transform:translateY(5px);box-shadow:0 10px 10px -10px #371b6d80}.wrapper-404 .p404{letter-spacing:4px;color:#fff;z-index:2;justify-content:center;align-items:center;margin:0;font-size:200px;font-weight:700;animation:.6s cubic-bezier(.3,.8,1,1.05) 1.2s both anime404;position:absolute;display:flex!important}@media screen and (max-width:799px){.wrapper-404 .p404{font-size:100px}}@keyframes anime404{0%{opacity:0;transform:scale(10)skew(20deg,20deg)}}.wrapper-404 .p404:nth-of-type(2){color:var(--bg-02);z-index:1;filter:blur(10px);opacity:.8;animation-delay:1s}.wrapper-404 .circle-404{position:absolute}.wrapper-404 .circle-404:before{content:"";background-color:#4c289340;border-radius:100%;width:800px;height:800px;animation:.8s cubic-bezier(1,.06,.25,1) backwards circle;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 5px 20px 40px #371b6d4d,inset 5px 0 5px #371b6d59,inset 5px 5px 20px #371b6d40,2px 2px 5px #ffffff26}@media screen and (max-width:799px){.wrapper-404 .circle-404:before{width:400px;height:400px}}@keyframes circle{0%{width:0;height:0}}.wrapper-404 .one-404 .content-404:before{content:"";background-color:#371b6d59;border-radius:100%;width:600px;height:600px;animation:.8s cubic-bezier(1,.06,.25,1) .4s backwards circle;position:absolute;box-shadow:inset 5px 20px 40px #371b6d4d,inset 5px 0 5px #371b6d59,inset 5px 5px 20px #371b6d40,2px 2px 5px #ffffff26}@media screen and (max-width:799px){.wrapper-404 .one-404 .content-404:before{width:300px;height:300px}}.wrapper-404 .one-404 .piece-404{background:linear-gradient(90deg,#8077ea 13.7%,#eb73ff 94.65%)}.wrapper-404 .one-404 .piece-404:first-child{width:120px;height:30px;animation-name:pieceRight;animation-delay:.5s;top:18%;right:15%}.wrapper-404 .one-404 .piece-404:nth-child(2){width:150px;height:50px;animation-name:pieceLeft;animation-delay:1s;top:45%;left:15%}.wrapper-404 .one-404 .piece-404:nth-child(3){width:70px;height:20px;animation-name:pieceLeft;animation-delay:1.5s;top:75%;left:10%}.wrapper-404 .two-404 .piece-404{background:linear-gradient(90deg,#ffedc0 0%,#ff9d87 100%)}.wrapper-404 .two-404 .piece-404:first-child{width:120px;height:40px;animation-name:pieceLeft;animation-delay:2s;top:25%;left:0%}.wrapper-404 .two-404 .piece-404:nth-child(2){width:180px;height:50px;animation-name:pieceRight;animation-delay:2.5s;top:35%;right:15%}.wrapper-404 .two-404 .piece-404:nth-child(3){width:160px;height:20px;animation-name:pieceRight;animation-delay:3s;top:80%;right:10%}.wrapper-404 .three-404 .piece-404{background:var(--m-01)}.wrapper-404 .three-404 .piece-404:first-child{width:80px;height:20px;animation-name:pieceLeft;animation-delay:3.5s;top:35%;left:25%}.wrapper-404 .three-404 .piece-404:nth-child(2){width:140px;height:40px;animation-name:pieceRight;animation-delay:4s;top:55%;right:10%}.wrapper-404 .three-404 .piece-404:nth-child(3){width:80px;height:20px;animation-name:pieceLeft;animation-delay:4.5s;top:68%;left:40%}