@import url("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");.about{position:fixed;z-index:10;bottom:10px;right:10px;-moz-box-pack:end;justify-content:flex-end;-moz-box-align:end;align-items:flex-end;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;transition:all .2s ease}.about,.about .bg_links{width:40px;height:40px;display:-moz-box;display:flex}.about .bg_links{-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;background-color:rgba(0,0,0,.2);border-radius:100%;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:absolute}.about .logo{width:40px;height:40px;z-index:9;background-image:url(https://raw.githubusercontent.com/eliascerne/website/main/src/assets/logo_white.svg);background-size:50%;background-repeat:no-repeat;background-position:10px 7px;opacity:.9;-webkit-transition:all 1s ease .2s;-moz-transition:all 1s ease .2s;transition:all 1s ease .2s;bottom:0;right:0}.about .social{opacity:0;right:0;bottom:0}.about .social .icon{width:100%;height:100%;background-size:20px;background-repeat:no-repeat;background-position:50%;background-color:transparent;display:-moz-box;display:flex;-webkit-transition:all .2s ease,background-color .4s ease;-moz-transition:all .2s ease,background-color .4s ease;transition:all .2s ease,background-color .4s ease;opacity:0;border-radius:100%}.about .social.portfolio{-webkit-transition:all .8s ease;-moz-transition:all .8s ease;transition:all .8s ease}.about .social.portfolio .icon{background-image:url(https://raw.githubusercontent.com/eliascerne/website/main/src/assets/link.svg)}.about .social.dribbble{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}.about .social.dribbble .icon{background-image:url(https://raw.githubusercontent.com/eliascerne/website/main/src/assets/github-alt-2.svg)}.about .social.instagram{-webkit-transition:all .8s ease;-moz-transition:all .8s ease;transition:all .8s ease}.about .social.instagram .icon{background-image:url(https://raw.githubusercontent.com/eliascerne/website/main/src/assets/instagram.svg)}.about:hover{width:105px;height:105px;-webkit-transition:all .6s cubic-bezier(.64,.01,.07,1.65);-moz-transition:all .6s cubic-bezier(.64,.01,.07,1.65);transition:all .6s cubic-bezier(.64,.01,.07,1.65)}.about:hover .logo{opacity:1;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;transition:all .6s ease}.about:hover .social{opacity:1}.about:hover .social .icon{opacity:.9}.about:hover .social:hover{background-size:28px}.about:hover .social:hover .icon{background-size:65%;opacity:1}.about:hover .social.portfolio{right:0;bottom:-webkit-calc(100% - 40px);bottom:-moz-calc(100% - 40px);bottom:calc(100% - 40px);-webkit-transition:all .3s cubic-bezier(.64,.01,.07,1.65) 0s;-moz-transition:all .3s cubic-bezier(.64,.01,.07,1.65) 0s;transition:all .3s cubic-bezier(.64,.01,.07,1.65) 0s}.about:hover .social.portfolio .icon:hover{background-color:#698fb7}.about:hover .social.dribbble{bottom:45%;right:45%;-webkit-transition:all .3s cubic-bezier(.64,.01,.07,1.65) .15s;-moz-transition:all .3s cubic-bezier(.64,.01,.07,1.65) .15s;transition:all .3s cubic-bezier(.64,.01,.07,1.65) .15s}.about:hover .social.dribbble .icon:hover{background-color:#ea4c89}.about:hover .social.instagram{bottom:0;right:-webkit-calc(100% - 40px);right:-moz-calc(100% - 40px);right:calc(100% - 40px);-webkit-transition:all .3s cubic-bezier(.64,.01,.07,1.65) .25s;-moz-transition:all .3s cubic-bezier(.64,.01,.07,1.65) .25s;transition:all .3s cubic-bezier(.64,.01,.07,1.65) .25s}.about:hover .social.instagram .icon:hover{background-color:#0077b5}a,body,button,h1,h2,h3,h4,h5,h6,i,input,li,p,ul{margin:0;padding:0;list-style:none;border:0;-webkit-tap-highlight-color:transparent;text-decoration:none;color:inherit}a:focus,body:focus,button:focus,h1:focus,h2:focus,h3:focus,h4:focus,h5:focus,h6:focus,i:focus,input:focus,li:focus,p:focus,ul:focus{outline:0}body{margin:0;padding:0;height:auto;font-family:Barlow,sans-serif;background:#695681}.logo{position:fixed;z-index:5;bottom:10px;right:10px;width:40px;height:40px;display:-moz-box;display:flex;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;background:rgba(0,0,0,.1);border-radius:100%;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.logo img{width:55%;height:55%;-webkit-transform:translateY(-1px);-moz-transform:translateY(-1px);transform:translateY(-1px);opacity:.8}nav .menu{width:100%;height:80px;position:absolute;display:-moz-box;display:flex;-moz-box-align:center;align-items:center;-moz-box-pack:justify;justify-content:space-between;padding:0 5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:3}nav .menu .website_name{color:#695681;font-weight:600;font-size:20px;letter-spacing:1px;background:#fff;padding:4px 8px;border-radius:2px;opacity:.5;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;cursor:pointer}nav .menu .website_name:hover{opacity:1}nav .menu .menu_links{-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;opacity:.5}nav .menu .menu_links:hover{opacity:1}@media screen and (max-width:799px){nav .menu .menu_links{display:none}}nav .menu .menu_links .link{color:#fff;text-transform:uppercase;font-weight:500;margin-right:50px;letter-spacing:2px;position:relative;-webkit-transition:all .3s ease .2s;-moz-transition:all .3s ease .2s;transition:all .3s ease .2s}nav .menu .menu_links .link:last-child{margin-right:0}nav .menu .menu_links .link:before{content:"";position:absolute;width:0;height:4px;background:-webkit-gradient(linear,left top,right top,from(#ffedc0),to(#ff9d87));background:-webkit-linear-gradient(left,#ffedc0,#ff9d87);background:-moz-linear-gradient(left,#ffedc0 0,#ff9d87 100%);background:linear-gradient(90deg,#ffedc0,#ff9d87);bottom:-10px;border-radius:4px;-webkit-transition:all .4s cubic-bezier(.82,.02,.13,1.26);-moz-transition:all .4s cubic-bezier(.82,.02,.13,1.26);transition:all .4s cubic-bezier(.82,.02,.13,1.26);left:100%}nav .menu .menu_links .link:hover{opacity:1;color:#fb8a8a}nav .menu .menu_links .link:hover:before{width:40px;left:0}nav .menu .menu_icon{width:40px;height:40px;position:relative;display:none;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;cursor:pointer}@media screen and (max-width:799px){nav .menu .menu_icon{display:-moz-box;display:flex}}nav .menu .menu_icon .icon{width:24px;height:2px;background:#fff;position:absolute}nav .menu .menu_icon .icon:after,nav .menu .menu_icon .icon:before{content:"";width:100%;height:100%;background:inherit;position:absolute;-webkit-transition:all .3s cubic-bezier(.49,.04,0,1.55);-moz-transition:all .3s cubic-bezier(.49,.04,0,1.55);transition:all .3s cubic-bezier(.49,.04,0,1.55)}nav .menu .menu_icon .icon:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}nav .menu .menu_icon .icon:after{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}nav .menu .menu_icon:hover .icon{background:#ffedc0}nav .menu .menu_icon:hover .icon:before{-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);transform:translateY(-10px)}nav .menu .menu_icon:hover .icon:after{-webkit-transform:translateY(10px);-moz-transform:translateY(10px);transform:translateY(10px)}.wrapper{display:grid;grid-template-columns:1fr;height:100vh;overflow-x:hidden}.wrapper,.wrapper .container{-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center}.wrapper .container{margin:0 auto;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;display:-moz-box;display:flex;position:relative}.wrapper .container .scene{position:absolute;width:100vw;height:100vh;vertical-align:middle}.wrapper .container .circle,.wrapper .container .one,.wrapper .container .p404,.wrapper .container .three,.wrapper .container .two{width:60%;height:60%;top:20%!important;left:20%!important;min-width:400px;min-height:400px}.wrapper .container .circle .content,.wrapper .container .one .content,.wrapper .container .p404 .content,.wrapper .container .three .content,.wrapper .container .two .content{width:600px;height:600px;display:-moz-box;display:flex;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation:content .8s cubic-bezier(1,.06,.25,1) backwards;-moz-animation:content .8s cubic-bezier(1,.06,.25,1) backwards;animation:content .8s cubic-bezier(1,.06,.25,1) backwards}@-webkit-keyframes content{0%{width:0}}@-moz-keyframes content{0%{width:0}}@keyframes content{0%{width:0}}.wrapper .container .circle .content .piece,.wrapper .container .one .content .piece,.wrapper .container .p404 .content .piece,.wrapper .container .three .content .piece,.wrapper .container .two .content .piece{width:200px;height:80px;display:-moz-box;display:flex;position:absolute;border-radius:80px;z-index:1;-webkit-animation:pieceLeft 8s cubic-bezier(1,.06,.25,1) infinite both;-moz-animation:pieceLeft 8s cubic-bezier(1,.06,.25,1) infinite both;animation:pieceLeft 8s cubic-bezier(1,.06,.25,1) infinite both}@-webkit-keyframes pieceLeft{50%{left:80%;width:10%}}@-moz-keyframes pieceLeft{50%{left:80%;width:10%}}@keyframes pieceLeft{50%{left:80%;width:10%}}@-webkit-keyframes pieceRight{50%{right:80%;width:10%}}@-moz-keyframes pieceRight{50%{right:80%;width:10%}}@keyframes pieceRight{50%{right:80%;width:10%}}@media screen and (max-width:799px){.wrapper .container .circle,.wrapper .container .one,.wrapper .container .p404,.wrapper .container .three,.wrapper .container .two{width:90%;height:90%;top:5%!important;left:5%!important;min-width:280px;min-height:280px}}@media screen and (max-height:660px){.wrapper .container .circle,.wrapper .container .one,.wrapper .container .p404,.wrapper .container .three,.wrapper .container .two{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;-webkit-animation:text .6s ease 1.8s backwards;-moz-animation:text .6s ease 1.8s backwards;animation:text .6s ease 1.8s backwards}@-webkit-keyframes text{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}}@-moz-keyframes text{0%{opacity:0;-moz-transform:translateY(40px);transform:translateY(40px)}}@keyframes text{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);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:-moz-box;display:flex;-moz-box-orient:vertical;-moz-box-direction:normal;flex-direction:column;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;text-align:center;bottom:0;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (max-width:799px){.wrapper .container .text article{width:100%}}.wrapper .container .text article p{color:#fff;font-size:18px;letter-spacing:.6px;margin-bottom:40px;text-shadow:6px 6px 10px #32243e}.wrapper .container .text article button{height:40px;padding:0 30px;border-radius:50px;cursor:pointer;-webkit-box-shadow:0 15px 20px rgba(54,24,79,.5);box-shadow:0 15px 20px rgba(54,24,79,.5);z-index:3;color:#695681;background-color:#fff;text-transform:uppercase;font-weight:600;font-size:12px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}.wrapper .container .text article button:hover{-webkit-box-shadow:0 10px 10px -10px rgba(54,24,79,.5);box-shadow:0 10px 10px -10px rgba(54,24,79,.5);-webkit-transform:translateY(5px);-moz-transform:translateY(5px);transform:translateY(5px);background:#fb8a8a;color:#fff}.wrapper .container .p404{font-size:200px;font-weight:700;letter-spacing:4px;color:#fff;display:-moz-box!important;display:flex!important;-moz-box-pack:center;justify-content:center;-moz-box-align:center;align-items:center;position:absolute;z-index:2;-webkit-animation:anime404 .6s cubic-bezier(.3,.8,1,1.05) both;-moz-animation:anime404 .6s cubic-bezier(.3,.8,1,1.05) both;animation:anime404 .6s cubic-bezier(.3,.8,1,1.05) both;-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}@media screen and (max-width:799px){.wrapper .container .p404{font-size:100px}}@-webkit-keyframes anime404{0%{opacity:0;-webkit-transform:scale(10) skew(20deg,20deg);transform:scale(10) skew(20deg,20deg)}}@-moz-keyframes anime404{0%{opacity:0;-moz-transform:scale(10) skew(20deg,20deg);transform:scale(10) skew(20deg,20deg)}}@keyframes anime404{0%{opacity:0;-webkit-transform:scale(10) skew(20deg,20deg);-moz-transform:scale(10) skew(20deg,20deg);transform:scale(10) skew(20deg,20deg)}}.wrapper .container .p404:nth-of-type(2){color:#36184f;z-index:1;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-filter:blur(10px);filter:blur(10px);opacity:.8}.wrapper .container .circle{position:absolute}.wrapper .container .circle:before{content:"";position:absolute;width:800px;height:800px;background-color:rgba(54,24,79,.2);border-radius:100%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-box-shadow:inset 5px 20px 40px rgba(54,24,79,.25),inset 5px 0 5px rgba(50,36,62,.3),inset 5px 5px 20px rgba(50,36,62,.25),2px 2px 5px hsla(0,0%,100%,.2);box-shadow:inset 5px 20px 40px rgba(54,24,79,.25),inset 5px 0 5px rgba(50,36,62,.3),inset 5px 5px 20px rgba(50,36,62,.25),2px 2px 5px hsla(0,0%,100%,.2);-webkit-animation:circle .8s cubic-bezier(1,.06,.25,1) backwards;-moz-animation:circle .8s cubic-bezier(1,.06,.25,1) backwards;animation:circle .8s cubic-bezier(1,.06,.25,1) backwards}@-webkit-keyframes circle{0%{width:0;height:0}}@-moz-keyframes circle{0%{width:0;height:0}}@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:rgba(54,24,79,.3);border-radius:100%;-webkit-box-shadow:inset 5px 20px 40px rgba(54,24,79,.25),inset 5px 0 5px rgba(50,36,62,.3),inset 5px 5px 20px rgba(50,36,62,.25),2px 2px 5px hsla(0,0%,100%,.2);box-shadow:inset 5px 20px 40px rgba(54,24,79,.25),inset 5px 0 5px rgba(50,36,62,.3),inset 5px 5px 20px rgba(50,36,62,.25),2px 2px 5px hsla(0,0%,100%,.2);-webkit-animation:circle .8s cubic-bezier(1,.06,.25,1) .4s backwards;-moz-animation:circle .8s cubic-bezier(1,.06,.25,1) .4s backwards;animation:circle .8s cubic-bezier(1,.06,.25,1) .4s backwards}@media screen and (max-width:799px){.wrapper .container .one .content:before{width:300px;height:300px}}.wrapper .container .one .content .piece{background:-webkit-gradient(linear,left top,right top,color-stop(13.7%,#8077ea),color-stop(94.65%,#eb73ff));background:-webkit-linear-gradient(left,#8077ea 13.7%,#eb73ff 94.65%);background:-moz-linear-gradient(left,#8077ea 13.7%,#eb73ff 94.65%);background:linear-gradient(90deg,#8077ea 13.7%,#eb73ff 94.65%)}.wrapper .container .one .content .piece:first-child{right:15%;top:18%;height:30px;width:120px;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s;-webkit-animation-name:pieceRight;-moz-animation-name:pieceRight;animation-name:pieceRight}.wrapper .container .one .content .piece:nth-child(2){left:15%;top:45%;width:150px;height:50px;-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;-webkit-animation-name:pieceLeft;-moz-animation-name:pieceLeft;animation-name:pieceLeft}.wrapper .container .one .content .piece:nth-child(3){left:10%;top:75%;height:20px;width:70px;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-name:pieceLeft;-moz-animation-name:pieceLeft;animation-name:pieceLeft}.wrapper .container .two .content .piece{background:-webkit-gradient(linear,left top,right top,from(#ffedc0),to(#ff9d87));background:-webkit-linear-gradient(left,#ffedc0,#ff9d87);background:-moz-linear-gradient(left,#ffedc0 0,#ff9d87 100%);background:linear-gradient(90deg,#ffedc0,#ff9d87)}.wrapper .container .two .content .piece:first-child{left:0;top:25%;height:40px;width:120px;-webkit-animation-delay:2s;-moz-animation-delay:2s;animation-delay:2s;-webkit-animation-name:pieceLeft;-moz-animation-name:pieceLeft;animation-name:pieceLeft}.wrapper .container .two .content .piece:nth-child(2){right:15%;top:35%;width:180px;height:50px;-webkit-animation-delay:2.5s;-moz-animation-delay:2.5s;animation-delay:2.5s;-webkit-animation-name:pieceRight;-moz-animation-name:pieceRight;animation-name:pieceRight}.wrapper .container .two .content .piece:nth-child(3){right:10%;top:80%;height:20px;width:160px;-webkit-animation-delay:3s;-moz-animation-delay:3s;animation-delay:3s;-webkit-animation-name:pieceRight;-moz-animation-name:pieceRight;animation-name:pieceRight}.wrapper .container .three .content .piece{background:#fb8a8a}.wrapper .container .three .content .piece:first-child{left:25%;top:35%;height:20px;width:80px;-webkit-animation-name:pieceLeft;-moz-animation-name:pieceLeft;animation-name:pieceLeft;-webkit-animation-delay:3.5s;-moz-animation-delay:3.5s;animation-delay:3.5s}.wrapper .container .three .content .piece:nth-child(2){right:10%;top:55%;width:140px;height:40px;-webkit-animation-name:pieceRight;-moz-animation-name:pieceRight;animation-name:pieceRight;-webkit-animation-delay:4s;-moz-animation-delay:4s;animation-delay:4s}.wrapper .container .three .content .piece:nth-child(3){left:40%;top:68%;height:20px;width:80px;-webkit-animation-name:pieceLeft;-moz-animation-name:pieceLeft;animation-name:pieceLeft;-webkit-animation-delay:4.5s;-moz-animation-delay:4.5s;animation-delay:4.5s}