@import "https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap";@import "https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap";html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:#0000}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]::-moz-focus-inner{border-style:none;padding:0}[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring{outline:1px dotted buttontext}[type=button]:-moz-focusring{outline:1px dotted buttontext}[type=reset]:-moz-focusring{outline:1px dotted buttontext}[type=submit]:-moz-focusring{outline:1px dotted buttontext}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template,[hidden]{display:none}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{background-color:#111;line-height:1.5}a{color:#fff;text-decoration:none}ul{list-style:none}body{color:#fff;font-family:Ubuntu,sans-serif;font-size:1.6rem}.logo{font-family:EB Garamond,serif;transition:all .3s}.logo:hover{transform:scale(1.1)rotate(5deg)}.blue-text{color:#19b5fe}.yellow-text{color:#fdbb00}.green-text{color:#28c66a}.project-title-xl{margin-bottom:2.4rem;font-family:EB Garamond,serif;font-size:4.8rem}@media (width<=500px){.project-title-xl{font-size:3.2rem}}.move-top{animation:.7s .7s backwards move-top;display:inline-block}.move-bottom{animation:1s backwards move-bottom;display:inline-block}.shake{z-index:-1;transition:all .3s;animation:2s infinite alternate shake;position:absolute;transform:scale(1.2)}.move-left{animation:.5s move-left}@keyframes shake{to{transform:translateY(-8px)}}@keyframes move-left{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes move-bottom{0%{opacity:0;transform:translateY(-150%)}to{transform:translateY(0)}}@keyframes move-top{0%{opacity:0;transform:translateY(150%)}to{transform:translateY(0)}}.btn{cursor:pointer;color:#fff;border:0;padding:1.2rem 2.4rem;transition:all .3s;display:inline-block;position:relative}.btn-flash:hover:after{opacity:0;pointer-events:none;transform:scale(1.3)}.btn:after{content:"";z-index:-1;width:100%;height:100%;transition:all .3s;position:absolute;bottom:0;left:0}.btn:active{transform:translateY(2px)scale(.98)}.btn-blue{z-index:1;background-color:#19b5fe;overflow:hidden}.btn-blue:after{transform-origin:0 100%;background-color:#252525;transform:scaleY(0)}.btn-blue:hover:after{transform:scaleY(1)}.btn-shadow{box-shadow:0 4px 10px #0006}.btn-shadow:hover{box-shadow:0 8px 15px #0006}.btn-blue{letter-spacing:2px;border-radius:3px;padding:1.2rem 3.2rem}.btn-blue-to-yellow{z-index:1;background-color:#19b5fe;border-radius:3px;padding:1.2rem 3.2rem}.btn-blue-to-yellow:after{transform-origin:0 100%;background-color:#fdbb00;border-radius:3px;transform:scaleY(0)}.btn-blue-to-yellow:hover{color:#252525}.btn-blue-to-yellow:hover:after{transform:scaleY(1)}.container{width:90%;max-width:1100px;margin:0 auto}.thin-container{width:90%;max-width:800px;margin:0 auto}.mask{overflow:hidden}.my-skills{width:100%;height:40rem;display:flex}.my-skills .tabs{background-color:#19b5fe;flex:1;padding:1.2rem 0}.my-skills .tabs .tab{padding:2.4rem 3.2rem;font-weight:700;transition:all .3s}.my-skills .tabs .tab.active,.my-skills .tabs .tab:hover{background-color:#252525}.my-skills .tab-content{background-color:#252525;flex:1;padding:3.2rem}.my-skills .tab-content .tab-text{margin-bottom:3.2rem}.my-skills .icon-list .icon-techno{margin-right:2rem}.lds-ellipsis{width:80px;height:30px;display:inline-block;position:relative}.lds-ellipsis div{background:#fff;border-radius:50%;width:13px;height:13px;animation-timing-function:cubic-bezier(0,1,1,0);position:absolute;top:10px}.lds-ellipsis div:first-child{animation:.6s infinite lds-ellipsis1;left:8px}.lds-ellipsis div:nth-child(2){animation:.6s infinite lds-ellipsis2;left:8px}.lds-ellipsis div:nth-child(3){animation:.6s infinite lds-ellipsis2;left:32px}.lds-ellipsis div:nth-child(4){animation:.6s infinite lds-ellipsis3;left:56px}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}.popover{background-color:#111;border-radius:5px;width:200px;padding:1.2rem;font-size:1.2rem;position:absolute;left:50%;transform:translate(-50%,15px)}.popover:before{content:"";border-bottom:10px solid #111;border-left:10px solid #0000;border-right:10px solid #0000;width:0;height:0;position:absolute;top:0;left:50%;transform:translate(-50%,-100%)}.popover .learn-soon{text-align:center;margin-top:1rem;font-size:1.4rem}.popover .lds-ellipsis{margin:0 auto}.accordion-title{background-color:#19b5fe;justify-content:space-between;padding:1.6rem;display:flex;position:relative}.accordion-title:after{content:"";border-top:1rem solid #19b5fe;border-left:1rem solid #0000;border-right:1rem solid #0000;width:0;height:0;display:none;position:absolute;bottom:0;left:1.2rem;transform:translateY(100%)}.accordion-title.active:after{display:block}.accordion-title span{display:inline-block}.accordion-content{background-color:#252525;min-height:15rem;padding:1.2rem}.accordion-content-paragraph{margin-bottom:2.4rem}.accordion-content .icon-list{grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));margin-bottom:1.6rem;display:grid}.project-preview{border-radius:5px;max-width:500px;margin-bottom:6.4rem;position:relative}.project-preview .project-card .project-img{border-radius:5px;width:100%}.project-preview .project-cta{flex-direction:column;justify-content:space-between;min-height:12rem;display:flex;position:absolute;top:3rem;right:0;transform:translate(80%)}.project-preview .project-cta .project-title{font-size:2.4rem}.project-preview .project-cta .project-live{margin:.8rem 0 2.4rem;font-size:1.6rem;font-weight:400;position:relative}.project-preview .project-cta .project-live:after{content:"";background-color:#fff;width:5rem;height:1px;position:absolute;bottom:0;left:0}.project-preview .project-cta .project-live:hover{color:#28c66a}.project-preview .project-cta .project-live:hover:after{background-color:#28c66a}.project-preview:nth-child(2n){margin-left:auto}.project-preview:nth-child(2n) .project-cta{left:0;right:unset;transform:translate(-80%)}@media (width<=700px){.project-preview{background-color:#252525;border-radius:5px 5px 0 0;margin:3.2rem 0;position:static}.project-preview .project-card .project-img{border-radius:5px 5px 0 0}.project-preview:nth-child(2n){margin-left:0}.project-preview:nth-child(2n) .project-cta{transform:translate(0)}.project-preview .project-cta{max-width:fit-content;padding:.8rem 1.6rem 1.6rem;display:block;position:static;transform:translate(0)}.project-preview .project-cta .project-live{max-width:300px;display:block}}.external-link{position:relative}.external-link:hover:after{height:10px}.external-link:after{content:"";background-color:#19b5fe;width:100%;height:3px;transition:all .2s ease-in-out;position:absolute;bottom:-3px;left:0;transform:rotate(1deg)}.square-link{z-index:1;color:#fff;cursor:pointer;background-color:#0000;border:1px solid #fff;padding:1.6rem;transition:all .3s;position:relative;overflow:hidden}.square-link:hover{color:#252525}.square-link:hover:after{transform:scaleX(1)rotate(0)}.square-link:after{content:"";z-index:-1;transform-origin:0 100%;background-color:#fdbb00;width:100%;height:100%;transition:all .3s;position:absolute;top:0;left:0;transform:scaleX(0)rotate(10deg)}.input{border:0;border-radius:3px;outline:none;width:100%;margin-bottom:1.6rem;padding:1.6rem 1.2rem}.header{z-index:99;justify-content:space-between;align-items:center;height:50px;padding:3.2rem 0;display:flex}.header .logo{font-size:3.2rem;font-weight:700}.header .menu{justify-content:space-between;width:30%;display:flex}.header .menu-link{margin-right:1rem}.header .menu-link .link{color:#fff;transition:all .3s}.header .menu-link .link:hover{color:#19b5fe}.header .toggle-btn{cursor:pointer;flex-direction:column;justify-content:space-between;width:40px;height:3.2rem;display:none}.header .toggle-btn .line{background-color:#fff;width:50%;height:3px;transition:all .3s}.header .toggle-btn .line-1{margin-left:auto}.header .toggle-btn .line-2,.header .toggle-btn:hover .line{width:100%}@media (width<=800px){.header .menu{display:none}.header .toggle-btn{display:flex}}.responsive-nav{z-index:10;background-color:#19b5fe;width:100%;transition:all .3s;position:fixed;bottom:0;left:0}.responsive-nav .responsive-nav-menu{background-color:#019be3;justify-content:space-between;align-items:center;display:flex}.responsive-nav .responsive-nav-menu .responsive-menu-item{flex:1}.responsive-nav .responsive-nav-menu .responsive-menu-item .responsive-menu-link{color:#fff;text-align:center;width:100%;padding:.8rem;transition:all .3s;display:inline-block}.responsive-nav .responsive-nav-menu .responsive-menu-item .responsive-menu-link span{display:block}.responsive-nav .responsive-nav-menu .responsive-menu-item .responsive-menu-link .fi-icon{fill:#fff;width:2.4rem}.responsive-nav .responsive-nav-menu .responsive-menu-item .responsive-menu-link:hover{background-color:#19b5fe}@media (width>=800px){.responsive-nav{display:none}}.right-nav{z-index:9;color:#252525;opacity:0;background-color:#fff;width:70%;height:calc(100vh - 70px);padding:3.2rem 0;transition:all .3s;display:none;position:fixed;top:0;right:0;transform:translate(100%)}.right-nav.active{opacity:1;transform:translate(0)}.right-nav-menu{margin-top:10rem}.right-nav-menu-link a{text-align:right;padding:2.4rem 6.4rem;font-size:2rem;font-weight:700;transition:all .3s;display:block}.right-nav-menu-link a:hover{background-color:#cbeeff}.right-nav a{color:#252525}.right-nav .close-btn{cursor:pointer;font-size:3rem;position:absolute;top:20px;right:20px}@media (width<=768px){.right-nav{display:block}}@media (orientation:landscape){.right-nav-menu{margin-top:1rem}}.ellipse-1{top:10%;left:10%}.ellipse-2{bottom:10%;right:10%}.triangle{bottom:20%;left:50%}.rect-1{top:20%;right:40%;transform:rotate(80deg)}.rect-2{top:50%;right:40%;transform:rotate(40deg)}.rect-3{bottom:30%;left:20%;transform:rotate(-40deg)}.rect-4{top:10%;right:20%}.vector{bottom:10%;left:20%}@media (width<=500px){.rect-2,.rect-3,.vector{display:none}.triangle{left:10%}}.home{justify-content:space-between;width:100%;height:calc(100vh - 50px);display:flex}.home .home-text{margin-top:15rem}.home .home-text .author-name{color:#888;margin-bottom:.2rem;font-size:2.4rem}.home .home-text .author-job{margin-bottom:1.6rem}.home .home-text .long-green-line{background-color:#28c66a;width:70px;height:1px;margin-left:1.6rem;display:inline-block}.home .home-text .author-welcome{margin-bottom:1.6rem;font-size:3.2rem;line-height:1.2}.home .home-text .author-message{margin-bottom:1.6rem}.home .svg-shape{margin-top:12rem}@media (width<=800px){.home .home-text,.home .svg-shape{margin-top:5rem}.home .svg-shape svg{width:250px}}@media (width<=600px){.home{display:block}.home .home-text{margin-top:2rem}.home .home-text .author-name{font-size:2.4rem}.home .home-text .author-welcome{font-size:3.2rem}.home .home-text .author-message{font-size:1.4rem}.home .svg-shape{justify-content:center;margin:2rem auto;display:flex}.home .svg-shape svg{width:250px}}.porfolio{min-height:100vh}.text-project{margin-top:6.4rem}.text-project p{opacity:.9;margin:1rem 0;font-size:1.8rem;line-height:32px}@media (width<=800px){.porfolio{margin-bottom:15rem}}.skills{min-height:100vh}.skills-text{margin-top:10rem}.skills-title{font-size:2.4rem}.skills .my-skills{margin-top:5rem}.skills .icon-techno{cursor:pointer;display:inline-block;position:relative}.skills .my-skills-accordions{display:none}@media (width<=800px){.skills{margin-bottom:15rem}.skills-text{margin-top:5rem}.skills .icon-techno .popover,.skills .my-skills{display:none}.skills .my-skills-accordions{display:block}}.spotysound{min-height:80vh;margin-bottom:15rem}.spotysound .work-project-title{margin:6.4rem 0;font-size:4.8rem;font-weight:400}.spotysound .project-images{justify-content:center;margin-top:4.8rem;display:flex}.spotysound .project-images .img-container img{width:100%}.spotysound .project-images .img-container:first-child{margin-right:4rem}.spotysound .what-i-learned{margin:6.4rem 0}.spotysound .what-i-learned .img-container{width:90%;margin:0 auto}.spotysound .what-i-learned .img-container img{width:100%}.spotysound .what-i-learned a{margin-top:1.6rem}@media screen and (width<=768px){.spotysound .project-images .img-container{width:50%}}.contact{min-height:80vh;margin-bottom:15rem}.contact h1{text-align:center}.contact .contact-form h3{letter-spacing:1px;margin-bottom:1.2rem;font-size:2.4rem;font-weight:400}.contact .contact-form{background-color:#19b5fe;max-width:500px;margin:1.6rem auto;padding:4.8rem 3.2rem}.contact .contact-form .field{margin-bottom:.8rem}.contact .contact-form .field .input{box-shadow:0 2px 5px #0006}.contact .contact-form .field .input.error-input{border:2px solid red}.contact .contact-form .field .input:focus{box-shadow:0 4px 35px #0006}.contact .contact-form .error{font-style:italic}.contact .contact-form .btn{margin-top:.8rem}.contact .social{text-align:center;margin-top:4.8rem}.contact .social a:not(:last-child){margin-right:2.4rem}@media screen and (width<=500px){.contact h1{text-align:left;font-size:2.6rem}}.page-404{justify-content:space-between;align-items:center;min-height:80vh;display:flex}.page-404 .text-404{flex:1;margin-bottom:6.4rem}.page-404 .text-404 h2{margin-bottom:3.2rem;font-size:4.8rem;font-weight:400}.page-404 .img-container{flex:1}.page-404 .img-container svg{width:100%}@media (width<=800px){.page-404 .text-404 h2{font-size:3.2rem}}@media (width<=600px){.page-404{min-height:90vh;margin-top:3.2rem;margin-bottom:10rem;display:block}.page-404 .text-404{height:auto;margin-bottom:1.6rem}}