.header{background:linear-gradient(#121212 0 25%,#9c19e0);width:100vw;height:100vh;position:relative;overflow:hidden}.header__wrapper{flex-direction:column;justify-content:center;align-items:center;gap:1em;width:100%;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.header__wrapper .group{flex-direction:column;justify-content:center;gap:1em;display:flex}.header__wrapper .group>*{margin:0}.header__wrapper .group .my-name-is,.header__wrapper .group h1{color:#cbccda;text-shadow:0 0 10px #0000007e;letter-spacing:.09em;text-align:center;margin:0;font-size:1.5em;font-weight:400}.header__wrapper .group h4{color:#9dc;size:1.2em;width:25ch;height:1.5em}.header__wrapper .photo-wrapper{opacity:.8;aspect-ratio:1;background-color:#ccc8ce;border-radius:50%;width:150px;overflow:hidden;box-shadow:0 0 8px #00000096}.header__wrapper .photo{aspect-ratio:1;filter:grayscale(30%);background-color:#d8d8d8;background-image:url(/static/images/photo.jpg);background-position:50%;background-repeat:no-repeat;background-size:110%}.header .waves{filter:blur(2px);display:none;position:absolute;bottom:-10px}.header .waves svg{width:calc(100vw + 500px)}.header .waves svg path{fill:#000f7d;animation:cubic-bezier(.79,0,.31,1) infinite alternate move}.header .waves svg path:first-of-type{opacity:.1;z-index:100;animation-duration:10s}.header .waves svg path:nth-of-type(2){opacity:.2;animation-duration:7s}.header .waves svg path:nth-of-type(3){opacity:.3;animation-duration:5s}.header .waves svg path:nth-of-type(4){opacity:.4;animation-duration:10s}.header .waves rect{fill:#0000}@media only screen and (min-width:700px){.header .header__wrapper{aspect-ratio:5/2;background-color:#00000080;border-radius:10px;flex-direction:row;gap:3em;width:50em}.header .header__wrapper .photo-wrapper{border:3px solid #121212;width:200px}.header .header__wrapper .group{text-align:left}.header .header__wrapper .group h1,.header .header__wrapper .group .my-name-is{text-align:left;font-size:2em}.header .header__wrapper .group h1{letter-spacing:.05em}.header .header__wrapper h4{font-size:1.5em}.header .waves{display:block}}.projects{background-color:#000;width:100vw;padding-top:20px;padding-bottom:41px;position:relative}.projects:before{content:"";clip-path:polygon(50% 100%,0 0,100% 0);z-index:100;background-color:#9c19e0;width:10ch;height:20px;position:absolute;top:-1px;left:50%;transform:translate(-50%)}.projects:after{content:"";clip-path:polygon(50% 100%,0 0,100% 0);z-index:100;background-color:#000;width:10ch;height:20px;position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%)}.projects__title{letter-spacing:.05em;color:#c9c9c9;text-align:center;margin-bottom:1em;font-size:1.3em;font-weight:400}.projects .mono{color:#9dc}.projects a{color:#ff5da2}.projects .swiper{color:#c9c9c9;background-color:#121212;border:1px solid #c9c9c9;border-radius:5px;width:95%;max-width:1200px;padding:.5em;box-shadow:0 0 7px #0008}.projects .swiper img{border-radius:3px;width:100%;display:block}.projects .swiper .description{padding:1em}.projects .swiper p{letter-spacing:.05em;width:100%;margin:.5em 0}.projects .swiper .swiper-button-next,.projects .swiper .swiper-button-prev{color:#ff5da2;text-shadow:2px 2px 2px #000;font-weight:700;top:30%}.projects .swiper .swiper-pagination-bullet{background-color:#fff}.projects .carousel3D{opacity:0;padding-top:3em}.projects .carousel3D__container{perspective:1900px;width:450px;height:300px;margin:0 auto;position:relative}.projects .carousel3D__wrapper{width:100%;height:100%;transform-style:preserve-3d;transition:all .7s;position:absolute}.projects .carousel3D__wrapper .project{opacity:.3;color:#c9c9c9;background-color:#292929;border-radius:10px;width:450px;min-height:28em;padding:1.5em;transition:all .2s linear;display:block;position:absolute}.projects .carousel3D__wrapper .project__title{display:none}.projects .carousel3D__wrapper .project__image{border-radius:5px;width:100%;position:relative;overflow:hidden}.projects .carousel3D__wrapper .project__image img{filter:grayscale();width:100%;height:100%}.projects .carousel3D__wrapper .project__image video{opacity:0;width:100%;height:100%;animation-name:fade-in;animation-duration:1s;animation-delay:1s;animation-fill-mode:forwards;position:absolute;top:0;left:0}.projects .carousel3D__wrapper .project__link{text-align:center;display:block}.projects .carousel3D__wrapper .project:hover{opacity:1;cursor:pointer}.projects .carousel3D__wrapper .project--active{opacity:1;cursor:default!important}.projects .carousel3D__wrapper .disappear{animation:1s forwards disappear}.projects .carousel3D .controls{border:1px solid #1a1a1a;border-radius:10px;align-items:center;padding:.4em .7em;display:flex;position:absolute;bottom:5em;left:50%;transform:translate(-50%)}.projects .carousel3D .controls svg{transition:all .1s linear}.projects .carousel3D .controls svg polyline{fill:#fff}.projects .carousel3D .controls .arrow{color:#fff;opacity:.2;cursor:pointer}.projects .carousel3D .controls .arrow:hover{opacity:1}.projects .carousel3D .controls .dots{flex-direction:row;justify-content:center;align-items:center;display:flex}.projects .carousel3D .controls .dot{fill:#c9c9c9;opacity:.2}.projects .carousel3D .controls .dot--active{opacity:1}.projects .carousel3D .controls .delete{cursor:pointer;color:#ff5da2;opacity:.4}.projects .carousel3D .controls .delete:hover{opacity:.7}.projects .carousel3D .reset{flex-direction:column;align-items:center;gap:1em;font-size:1.2em;display:flex;position:absolute;left:50%;transform:translate(-50%)}.projects .carousel3D .reset button{font-size:inherit;cursor:pointer;background-color:#9c19e0;border:2px solid #5c0f84;border-radius:10px;padding:.5em;transition:all .1s linear}.projects .carousel3D .reset button:hover{background-color:#5c0f84}.projects .carousel3D .reset .writeAnimation{color:#9c19e0;font-family:Source Code Pro,monospace}.projects .projects-in-view{animation:1s linear forwards fade-in}.projects .projects-in-view .carousel3D__wrapper{animation:1s cubic-bezier(0,1,0,1) turn}@media only screen and (min-width:700px){.projects{min-height:900px;padding-top:60px}.projects__title{opacity:.7}.projects:before,.projects:after{visibility:hidden}}.courses{background-color:#000f7d;padding:2em 0}.courses__title{letter-spacing:.05em;color:#9dc;text-align:center;margin-bottom:2em;font-size:1.3em;font-weight:400}.courses__wrapper{flex-direction:column;gap:40px;padding:0 .5em;display:flex}.courses__wrapper .course{opacity:0;background-color:#121212;border-radius:10px;flex-direction:column;gap:1em;padding:1em;animation-duration:1s;display:flex;position:relative}.courses__wrapper .course__header{flex-direction:column;gap:.5em;display:flex}.courses__wrapper .course__title{color:#9c19e0;margin:0;font-family:Source Code Pro,monospace;font-size:1.2em}.courses__wrapper .course__date{color:#9dc}.courses__wrapper .course__description{letter-spacing:.05em;color:#c9c9c9;margin:0;line-height:1.4}.courses__wrapper .course svg{transform-origin:0;width:0;position:absolute;top:99%;left:50%;transform:rotate(90deg)}.courses__wrapper .course line{stroke:#121212;stroke-width:8px}.courses__wrapper .fade-in-course{animation-name:fade-in;animation-duration:.5s;animation-fill-mode:forwards}.courses__wrapper .fade-in-course svg{animation-name:grow-line;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:forwards}@media only screen and (min-width:700px){.courses{padding:60px 5vw}.courses__title{text-align:left;margin-left:18vw}.courses__wrapper{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:2em;display:grid}.courses__wrapper>*{position:relative}.courses__wrapper>:after{content:"";position:absolute}.courses__wrapper>:nth-of-type(4n+1):after{border:3px dashed #121212;width:2em;top:50%;left:100%}.courses__wrapper>:nth-of-type(4n+4):after{border:3px dashed #121212;width:2em;top:50%;right:100%}.courses__wrapper>:nth-of-type(4n+2):after,.courses__wrapper>:nth-of-type(4n+3):after{border:3px dashed #121212;height:2em;top:100%;left:50%}.courses__wrapper>:last-of-type:after{border:none}.courses .fade-in-course{animation:none}.courses svg{display:none}.courses .course{opacity:1;height:100%}.courses .course__description{line-height:1.6}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes on-off{0%{content:""}50%{content:"|"}to{content:""}}@keyframes grow-line{to{width:30px}}@keyframes disappear{to{opacity:0;transform:translateY(-100%)}}@keyframes turn{0%{transform:rotateY(-1000deg)}to{transform:rotateY(0)}}@keyframes blur{to{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:#0000006c}}@keyframes drop-in{0%{opacity:0;transform:translateY(-50px)translate(-50%,-50%)}to{opacity:1;transform:translateY(0)translate(-50%,-50%)}}@keyframes move{0%{transform:translate(-500px)}to{transform:translate(0,0)}}@keyframes move-right{0%{opacity:0;transform:translate(-100%)skew(70deg)}to{opacity:1;transform:translate(0)skew(0deg)}}@keyframes move-left{0%{opacity:0;transform:translate(100%)skew(70deg)}to{opacity:1;transform:translate(0)skew(0deg)}}.navbar{z-index:200;background-color:#fff;justify-content:space-between;align-items:center;width:100%;height:60px;padding-right:.5em;transition:all .3s cubic-bezier(0,1,1,1);display:flex;position:fixed;top:0;left:0;box-shadow:0 0 10px #000000c9}.navbar .progress-bar{transform-origin:0;opacity:.5;background:#9c19e0;width:100%;height:5px;transition:transform .3s linear;position:absolute;bottom:0;left:0}.navbar__link{cursor:pointer;background-color:inherit;color:gray;border:none;font-family:Source Code Pro,monospace;font-size:1em}.navbar__link:hover,.navbar .link--active{color:#000}.navbar__secondary-links{align-items:center;gap:1em;height:100%;display:flex}.navbar__secondary-links>*{cursor:pointer;color:#121212;font-size:2em;position:relative;top:5%}.navbar__secondary-links>:hover{color:#2c2c2c}.navbar--hidden{opacity:0;transform:translateY(-100%)}.navbar--visible{opacity:1;transform:translateY(0)}@media only screen and (min-width:700px){.navbar{padding-left:6%;padding-right:1em}.navbar__primary-links>*{margin-right:1.5em}.navbar__secondary-links>*{font-size:2.5em;position:static}}.about{background-color:#d79ef4;min-height:calc(100vh - 60px);padding:60px .5em}.about__title{letter-spacing:.05em;color:#121212;text-align:center;margin:0 0 1em;font-size:1.3em;font-weight:400}.about__wrapper{margin:0 auto;padding:1em}.about i{margin-bottom:1.5em;margin-left:0;font-weight:700;line-height:1.5}.about p{margin-bottom:1.5em;line-height:1.5}.about p .mono{color:#000f7d}.about .contact-button{color:#fff;cursor:pointer;background-color:#ff5da2;border:2px solid #ff4493;border-radius:5px;font-family:Source Code Pro,monospace;position:relative;overflow:hidden}.about .contact-button *{z-index:2}.about .contact-button:before,.about .contact-button:after{z-index:1;content:"";background-color:#ff4493;width:50%;height:100%;animation-duration:.4s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;display:none;position:absolute}.about .contact-button:hover{background-color:#ff5da2}.about .contact-button:hover:before{animation-name:move-right;display:block;left:0}.about .contact-button:hover:after{animation-name:move-left;display:block;right:0}.about .contact-button{justify-content:center;align-items:center;gap:1em;width:100%;height:3em;display:flex}@media only screen and (min-width:700px){.about{padding:9em 0}.about__wrapper{border-left:5px solid #00000042;width:50em;margin-top:3em;padding:0 3em}}.backdrop{cursor:pointer;-webkit-backdrop-filter:blur();backdrop-filter:blur();z-index:300;background-color:#0000;animation:.2s linear forwards blur;position:fixed;inset:0;overflow-y:scroll}.contact{z-index:500;cursor:initial;background-color:#fff;border-radius:10px;width:90vw;max-width:30em;padding:1.5em 1.5em 3em;animation:.1s linear forwards drop-in;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #000000a6}.contact .error{color:red;letter-spacing:.05em;width:100%;font-size:.9em;font-weight:700;position:absolute;top:.75em;left:2em}.contact__form{position:relative}.contact__form .red-border{border:1px solid red!important}.contact__form .group{justify-content:space-between;align-items:center;width:100%;margin-top:1em;display:flex;position:relative}.contact__form .group label{opacity:.7;background-color:#fff;transition:all .1s linear;position:absolute;top:5px;left:7px}.contact__form .group input,.contact__form .group textarea{border:1px solid #4a4a4a;border-radius:5px;width:100%;min-height:2em;padding:0 .5em;font-size:1em}.contact__form .group input:focus,.contact__form .group textarea:focus{outline:none}.contact__form .group input:focus+label,.contact__form .group textarea:focus+label,.contact__form .group .focus{opacity:1;padding:0 5px;font-size:.8em;transform:translateY(-14px)}.contact__form .group textarea{resize:none;height:10em;margin-bottom:1em;padding-top:.5em;font-family:arial}.contact__form button{color:#fff;cursor:pointer;background-color:#ff5da2;border:2px solid #ff4493;border-radius:5px;font-family:Source Code Pro,monospace;position:relative;overflow:hidden}.contact__form button:hover{background-color:#ff4493}.contact__form button{outline:none;justify-content:center;align-items:center;gap:.5em;width:100%;padding:.5em;font-size:1em;display:flex;position:absolute;bottom:-2em}.contact .sent{color:#121212;width:80%;font-family:Source Code Pro,monospace;position:absolute;top:50%;left:10%;transform:translateY(-50%)}.contact .sent>:after{color:#121212}.contact .close{color:#fff;cursor:pointer;background-color:#ff5da2;border:2px solid #ff4493;border-radius:5px;padding:.5em;font-family:Source Code Pro,monospace;position:relative;bottom:2em;left:50%;overflow:hidden;transform:translate(-50%)}.contact .close:hover{background-color:#ff4493}html,body{box-sizing:border-box;min-height:300vh;margin:0;padding:0;font-family:Raleway,sans-serif;overflow-x:hidden}body *,body :before,body :after{box-sizing:border-box}h2{font-size:1.2em}section{width:100vw}.mono{font-family:Source Code Pro,monospace}.highlight{color:#9dc;font-family:Source Code Pro,monospace}.normalize{word-spacing:-.5em}.fade-in{animation-name:fade-in;animation-duration:.5s;animation-fill-mode:forwards}.writeAnimation:after{color:#fff;content:"|";animation-name:on-off;animation-duration:1s;animation-iteration-count:infinite;position:absolute}@media only screen and (max-width:699px){.mobile{display:block}.desktop{display:none}}@media only screen and (min-width:700px){.mobile{display:none}.desktop{display:block}h2{font-size:1.5em}}