@import"https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&family=Zilla+Slab:wght@300;400;500;600;700&display=swap";#root{height:100vh}:root{font-size:calc(62.5% + .390625vw)}html{scroll-behavior:smooth}body{background-color:#000}*{transition:.3s all;font-family:Zilla Slab,Georgia,Times New Roman,Times,serif;color:#fff;font-display:swap}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}*::selection{background-color:#fff;color:#000}input:focus,input:active,input:visited,textarea:focus,textarea:active,textarea:visited{background-color:transparent;border:none;outline:none}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{border:none;-webkit-text-fill-color:black;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;transition:background-color 5000s ease-in-out 0s}input::placeholder,textarea::placeholder{color:#3f3f3f8c}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}section{padding:2vw}h1{font-size:4rem;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}h2{font-size:3rem;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}h3{font-size:1.7rem;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}h4{font-size:1.2rem;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}h5{font-size:1.429rem;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}h6,.big{font-size:1.214rem;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.small{font-size:.857rem}small{font-size:.714rem}p,label,span,input,select,option,strong,a{font-size:.9rem}strong{font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}a{display:inline-block;text-decoration:none;color:#fff}a:hover{text-decoration:underline}a,button{cursor:pointer}ul,ol{list-style:none}img{max-width:100%}img::selection{background-color:#000}.button{display:block;padding:8px 16px;width:100%;min-width:100px;max-width:200px;text-align:center;background-color:transparent;margin:auto;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:600}.button:hover{text-decoration:none}.button-primary{border:2px solid #ffffff}.button-primary:hover{background-color:#fff;color:#000}.grid{display:grid}.g-af3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:2rem}.g-af{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:20px}.full-width{width:100%}.flex{display:flex}.row{flex-direction:row}.row-reverse{flex-direction:row-reverse}.wrap{flex-wrap:wrap}.nowrap{flex-wrap:nowrap}.column{flex-direction:column}.align-center{align-items:center}.align-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-evenly{justify-content:space-evenly}.justify-around{justify-content:space-around}.by-2{width:50%}.by-3{width:30%}.hidden{display:none}.mar-1{margin:1rem 0}.project-card{overflow:hidden;outline:2px solid white}.project-card .img{position:relative;overflow:hidden;background-color:#fff}.project-card .img .button-group{top:0;right:0;bottom:0;left:0;background-color:#000000b3;position:absolute;opacity:0;pointer-events:none}.project-card .img:hover img{scale:1.05}.project-card .img:hover .button-group{opacity:1;pointer-events:all}.project-card .project-details{height:inherit;position:relative;padding:0 1vw}.project-card .project-details h3,.project-card .project-details p,.project-card .project-details div{margin-block:.5rem}.project-card .project-details p{font-size:1.1rem}.project-card .project-details .flex{gap:.5rem}.project-card .project-details .flex *{font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.project-card .project-details .technologies{flex-wrap:wrap}.project-card .project-details .technologies a{margin-top:.5rem;background-color:#fff;padding:5px 10px;color:#000;text-wrap:nowrap}.project-card .project-details .technologies a:hover{text-decoration:none}.project-card .project-details .button-group.flex:last-child{display:none}.gradient-box{width:100%;height:14rem;background:linear-gradient(to bottom right,#151c27,#2e3744);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff}.gradient-box .title{font-size:1.125rem;font-weight:600}.gradient-box .subtitle{font-size:.875rem;opacity:.8;margin-top:.25rem}.gradient-box .tech-list{display:flex;gap:.5rem;margin-top:.5rem;opacity:.7}.gradient-box .tech-list .tech-item{font-size:.75rem;background:#374151;padding:.25rem .5rem}header{position:sticky;top:0;z-index:10;margin:auto;transition:all .5s width ease-out}@keyframes reduceWidth{0%{width:100%}to{width:90%}}header.down{animation:reduceWidth .5s ease;background:#25252599;box-shadow:20px 20px 40px -6px #0003;backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px);border-radius:100px;top:1rem;width:90%}header.down *{transition:all .5s}header.down li *{font-size:1rem}header .logo{width:30%}header .logo img{width:100%;max-width:220px;min-width:180px}header nav ul li{display:inline-block;margin:0 1rem;padding:.5rem 1vw}header nav ul li a{font-size:1rem;text-transform:uppercase;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:500;position:relative}header nav ul li a:hover{text-decoration:none}header nav ul li a .line{bottom:-1rem;left:0}header nav ul li a:hover .line{height:2px;background-color:#fff;width:100%;position:absolute;bottom:-.5rem}header .burger{position:fixed;width:30px;height:30px;display:none;flex-direction:column-reverse;justify-content:space-evenly;z-index:10;cursor:pointer;right:20px;top:20px}header .burger .line{width:100%;height:1px;background-color:#fff}@media screen and (max-width: 500px){header nav{position:absolute;right:20px;top:90%;overflow:hidden;transition:height .5s ease}@keyframes menuHeight{0%{height:0px}to{height:6.75rem}}@keyframes reverseHeight{0%{height:6.75rem}to{height:0}}header nav.open{animation:menuHeight .5s ease;height:fit-content;background:#252525cc;box-shadow:20px 20px 40px -6px #0003;backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px)}header nav.close{animation:reverseHeight .5s ease;height:0px}header nav ul li{display:block}header nav ul li a{text-align:right;width:100%}header .burger{display:flex}}#hero .text{text-align:center}#hero .text *{margin-block:2rem;text-transform:uppercase}#hero .text h1 span{font-size:calc(4rem + 3vw);font-weight:800;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin-block:0}#hero .text p{width:60%;min-width:600px;margin:auto;line-height:1.4em;font-size:1.3rem}#hero .img{max-height:25rem;overflow:hidden;margin:auto;border-radius:2rem;width:80%;background:url(https://res.cloudinary.com/qaz2dc/image/upload/v1693761903/Portfolio/hero_ejv8zd.webp) center 30% no-repeat;background-size:cover;-webkit-filter:grayscale(1);filter:grayscale(1)}#hero .img img{width:100%;opacity:0}#about{border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);align-items:center}#about .text p{font-size:1.1rem}#about .skills h3{text-align:center}#about .skills .flex{padding:1rem;gap:1rem}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#about .skills .flex div svg{font-size:3rem;transition:all .1s}#about .skills .flex div.html:hover svg{fill:#e34c26}#about .skills .flex div.css:hover svg{fill:#2965f1}#about .skills .flex div.js:hover svg{fill:#f0db4f}#about .skills .flex div.react:hover svg{fill:#61dbfb;animation:rotate 3s linear infinite}#about .skills .flex div.sass:hover svg{fill:#c69}#about .skills .flex div.git:hover svg{fill:#f34f29}#projects h2{margin-block:1rem;text-align:center}#projects h2~p{text-align:center;width:50%;margin:1rem auto}#projects .portfolio-container{padding:3vw 0}#cta{padding:3vw;width:90%;max-width:60rem;margin:2rem auto;background:#ffffff0d;box-shadow:20px 20px 40px -6px #0003;backdrop-filter:blur(4.5px);-webkit-backdrop-filter:blur(4.5px);border-radius:1.5rem}#cta h3{text-align:center;margin-bottom:1rem}@media screen and (max-width: 650px){#hero .text p{min-width:95%}}@media screen and (max-width: 400px){#hero .text h1 span{font-size:calc(3.7rem + 2.5vw)}#hero .text p{font-size:1.1rem}}@media screen and (max-width: 320px){#hero .text h1 span{font-size:calc(3.2rem + 2.5vw)}#hero .text p{font-size:1rem}}#project{padding-top:3vw}#project h1{text-align:center}#project #projects .sort{margin:auto}#project #projects .sort h3{font-weight:400}#project #projects .sort h3 svg{align-self:flex-end}#project #projects .sort .custom-select{padding:.5rem 1rem;cursor:pointer;position:relative;min-width:12rem;border:1px solid #ffffff;z-index:9}#project #projects .sort .custom-select .selected p{font-size:1.1rem}#project #projects .sort .custom-select .tags{gap:1rem;background-color:#000;position:absolute;top:110%;left:0;width:100%;overflow:hidden;height:0px;scrollbar-width:thin;scrollbar-color:#ffffff transparent}#project #projects .sort .custom-select .tags.open{height:20rem;overflow-y:auto;border:1px solid #ffffff}#project #projects .sort .custom-select .tags li{padding:.5rem 1rem;border-bottom:1px solid #ffffff}#project #projects .sort .custom-select .tags li:last-child{border-bottom:none}#project #projects .loader,#project #projects [aria-label=beat-loader]{margin:3rem auto;width:fit-content}#project #projects .portfolio-container{column-gap:2%;row-gap:2rem}#project #projects .portfolio-container .project-card{width:32%;min-width:280px}@media screen and (max-width: 911px){#project #projects .portfolio-container{column-gap:3%}#project #projects .portfolio-container .project-card{width:48.5%}}@media screen and (max-width: 601px){#project #projects .portfolio-container{column-gap:0}#project #projects .portfolio-container .project-card{width:100%}}#contact{padding:2vw}#contact h1{text-align:center}#contact form{margin:2rem auto;width:100%;max-width:40rem}#contact form input,#contact form textarea{display:block;background-color:transparent;padding:.5rem 1rem;border:2px solid #ffffff;color:#fff;font-family:Wix Madefor Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;width:100%}#contact form input::placeholder,#contact form textarea::placeholder{color:#fff9;font-weight:600}#contact form .g-af{gap:1.5rem}#contact form input[name=subject]{margin-block:1.5rem}#contact form textarea{margin-block:1.5rem;resize:none;height:10rem}#contact .success,#contact .error{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0009;padding:2vw}#contact .success .content,#contact .error .content{position:relative;width:100%;max-width:30rem;background-color:#000;height:20rem;outline:2px solid #ffffff}#contact .success .content button,#contact .error .content button{position:absolute;right:2rem;top:2rem;background:transparent;font-size:1.5rem;border:none}.date{text-transform:uppercase;letter-spacing:2vw;max-width:100%;text-align:center;margin:3rem auto 0;padding:0 2vw;white-space:nowrap;height:auto;white-space:pre;font-style:normal;font-family:Zilla Slab,Zilla Slab Placeholder,serif;line-height:1.4}footer{text-align:center;width:100%;padding:2vw}footer .icons{gap:1rem;padding-right:2vw}footer .icons a{width:1.5rem;height:1.5rem;display:flex;justify-content:center;align-items:center}footer .icons a svg{font-size:1.6rem}footer .icons a:first-child:hover svg{fill:#1d9bf0}footer .icons a:nth-child(2):hover{background-color:#fff}footer .icons a:nth-child(2):hover svg{fill:#171515}footer .icons a:last-child:hover svg{fill:#0077b5}@media screen and (max-width: 400px){.date{letter-spacing:1vw}}