*,*:after,*:before{margin:0;padding:0;box-sizing:border-box;text-decoration:none;list-style:none}:root{--process-cyan: #01BAEF;--true-blue: #3066BE;--ghost-white: #FBFBFF;--rich-black: #040F16}html{scroll-behavior:smooth}body{font-size:100%;list-style-type:none;margin:0;background-color:var(--ghost-white)}body svg{position:absolute;top:0}body:before,body:after{position:fixed;left:0;top:0;content:"";width:100%;height:110%;z-index:-1;opacity:40%}body:before{background:#8c8c8c;filter:url(#noiseFilter)}@font-face{font-family:Amaranth-Regular;src:url(/fonts/amaranth/Amaranth-Regular.ttf) format("truetype");font-style:normal}@font-face{font-family:Amaranth-BoldItalic;src:url(/fonts/amaranth/Amaranth-BoldItalic.ttf) format("truetype");font-style:normal}@font-face{font-family:Amaranth-Bold;src:url(/fonts/amaranth/Amaranth-Bold.ttf) format("truetype");font-style:normal}@font-face{font-family:TitilliumWeb-Regular;src:url(/fonts/titillium_web/TitilliumWeb-Regular.ttf) format("truetype");font-style:normal}@font-face{font-family:TitilliumWeb-SemiBold;src:url(/fonts/titillium_web/TitilliumWeb-SemiBold.ttf) format("truetype");font-style:normal}@font-face{font-family:TitilliumWeb-Bold;src:url(/fonts/titillium_web/TitilliumWeb-Bold.ttf) format("truetype");font-style:normal}@font-face{font-family:TitilliumWeb-Black;src:url(/fonts/titillium_web/TitilliumWeb-Black.ttf) format("truetype");font-style:normal}@font-face{font-family:Cabin-Regular;src:url(/fonts/cabin/Cabin-Regular.ttf) format("truetype");font-style:normal}@font-face{font-family:Cabin-Medium;src:url(/fonts/cabin/Cabin-Medium.ttf) format("truetype");font-style:normal}@font-face{font-family:Cabin-SemiBold;src:url(/fonts/cabin/Cabin-SemiBold.ttf) format("truetype");font-style:normal}@font-face{font-family:Cabin-Bold;src:url(/fonts/cabin/Cabin-Bold.ttf) format("truetype");font-style:normal}@font-face{font-family:Lato-Regular;src:url(../../fonts/Lato-Regular.ttf);font-weight:400;font-style:normal}@font-face{font-family:Lato-Light;src:url(/fonts/Lato-Light.ttf);font-weight:400;font-style:normal}@font-face{font-family:Lato-Thin;src:url(/fonts/Lato-Thin.ttf);font-weight:400;font-style:normal}@font-face{font-family:Lato-Bold;src:url(/fonts/Lato-Bold.ttf);font-weight:400;font-style:normal}@font-face{font-family:Lato-Black;src:url(/fonts/Lato-Black.ttf);font-weight:400;font-style:normal}::-webkit-scrollbar{display:none}.icon{content:"";background:#fff;height:25px;width:25px;position:relative;z-index:1;display:flex;background-repeat:no-repeat;background-size:contain;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-user{-webkit-mask-image:url(/svg/circle-user-regular.svg);mask-image:url(/svg/circle-user-regular.svg)}.icon-code{-webkit-mask-image:url(/svg/code-solid.svg);mask-image:url(/svg/code-solid.svg)}.icon-letter{-webkit-mask-image:url(/svg/envelope-open-regular.svg);mask-image:url(/svg/envelope-open-regular.svg)}.icon-lightbulb{-webkit-mask-image:url(/svg/lightbulb-regular.svg);mask-image:url(/svg/lightbulb-regular.svg)}.icon-linkedin{-webkit-mask-image:url(/svg/linkedin.svg);mask-image:url(/svg/linkedin.svg)}.icon-github{-webkit-mask-image:url(/svg/github.svg);mask-image:url(/svg/github.svg)}.icon-react{-webkit-mask-image:url(/svg/IconReact.svg);mask-image:url(/svg/IconReact.svg)}.icon-nextjs{-webkit-mask-image:url(/svg/IconNextjs.svg);mask-image:url(/svg/IconNextjs.svg)}.icon-nestjs{-webkit-mask-image:url(/svg/IconNestjs.svg);mask-image:url(/svg/IconNestjs.svg)}.icon-node{-webkit-mask-image:url(/svg/IconNode.svg);mask-image:url(/svg/IconNode.svg)}.icon-less{-webkit-mask-image:url(/svg/IconLess.svg);mask-image:url(/svg/IconLess.svg)}.icon-sass{-webkit-mask-image:url(/svg/IconSass.svg);mask-image:url(/svg/IconSass.svg)}.icon-orm{-webkit-mask-image:url(/svg/IconOrm.svg);mask-image:url(/svg/IconOrm.svg)}.icon-typeorm{-webkit-mask-image:url(/svg/IconTypeorm.svg);mask-image:url(/svg/IconTypeorm.svg)}.icon-postgres{-webkit-mask-image:url(/svg/IconPostgresql.svg);mask-image:url(/svg/IconPostgresql.svg)}.icon-mongo{-webkit-mask-image:url(/svg/IconMongoDB.svg);mask-image:url(/svg/IconMongoDB.svg)}.icon-git{-webkit-mask-image:url(/svg/IconGit.svg);mask-image:url(/svg/IconGit.svg)}.icon-redux{-webkit-mask-image:url(/svg/IconRedux.svg);mask-image:url(/svg/IconRedux.svg)}.blob-cont{position:fixed;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:-2;height:100vh;max-height:100vh;width:100vw}.blob{border-radius:100%;filter:blur(60px)}.cyan{background-color:var(--process-cyan);position:absolute;height:450px;width:450px;animation:cyan 20s infinite ease}.ghost{background:linear-gradient(var(--rich-black),var(--ghost-white),var(--process-cyan));position:absolute;height:400px;width:450px;animation:ghost 20s infinite ease}.blue{background-color:var(--true-blue);position:absolute;height:350px;width:300px;animation:blue 20s infinite linear}.Section{padding:40px 80px}.Section h1{font-family:Amaranth-Bold;font-size:56px;color:var(--rich-black);margin-top:20px}.Section h2{width:max-content;font-family:Amaranth-Regular;font-size:40px;background:linear-gradient(to right,#01baef,#3066be,#01baef);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.Aboutme{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.Aboutme span{font-family:TitilliumWeb-SemiBold;font-size:20px;margin:16px 0}.Aboutme p{max-width:600px;font-family:TitilliumWeb-Regular;font-size:18px;color:#040f16;text-align:center;margin-top:20px}.Aboutme img{width:400px;height:400px;aspect-ratio:1/1;object-fit:cover;animation:fade .5s}.Aboutme .Links{height:30px;width:350px;display:flex;align-items:center;justify-content:space-between;margin-top:20px}.Aboutme .Links a{height:100%;width:150px;background:none;border:2px solid var(--rich-black);padding:15px 0;display:flex;align-items:center;justify-content:center;gap:6px;font-family:TitilliumWeb-SemiBold;font-size:16px;color:var(--rich-black);transition:all .25s}.Aboutme .Links a .icon-linkedin{width:19px;height:19px;background:var(--rich-black)}.Aboutme .Links a .icon-github{width:20px;height:20px;background:var(--rich-black)}.Aboutme .Links a:hover{background:#040f1680;border:2px solid rgba(4,15,22,.15);color:var(--ghost-white)}.Aboutme .Links a:hover .icon{background:var(--ghost-white)}.Skills,.Projects,.Contact{display:flex;flex-direction:column;align-items:center}.Skills-content{width:50%;margin:40px 0;display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px}.Card-skill{width:150px;height:150px;display:flex;background:linear-gradient(to right,#151515 2px,transparent 2px) 0 0,linear-gradient(to right,#151515 2px,transparent 2px) 0 100%,linear-gradient(to left,#151515 2px,transparent 2px) 100% 0,linear-gradient(to left,#151515 2px,transparent 2px) 100% 100%,linear-gradient(to bottom,#151515 2px,transparent 2px) 0 0,linear-gradient(to bottom,#151515 2px,transparent 2px) 100% 0,linear-gradient(to top,#151515 2px,transparent 2px) 0 100%,linear-gradient(to top,#151515 2px,transparent 2px) 100% 100%;background-repeat:no-repeat;background-size:20px 20px;background-color:#040f1606;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-family:TitilliumWeb-SemiBold;font-size:18px;line-height:18px;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);cursor:pointer;transition:background .25s}.Card-skill:hover{background:#040f1680;color:var(--ghost-white);text-shadow:0px 0px 1px var(--ghost-white)}.Card-skill:hover .icon{background:var(--ghost-white)}.Card-skill .icon{background:var(--rich-black);transition:all .25s}.Card-skill .icon-react,.Card-skill .icon-redux{width:40px;height:40px}.Card-skill .icon-nextjs,.Card-skill .icon-nestjs{width:35px;height:35px}.Card-skill .icon-sass{width:50px;height:40px;bottom:-5px}.Card-skill .icon-less{width:55px;height:55px;margin-bottom:-15px}.Card-skill .icon-node{width:35px;height:38px}.Card-skill .icon-mongo{width:38px;height:40px}.Card-skill .icon-postgres{width:40px;height:40px}.Card-skill .icon-git,.Card-skill .icon-orm{width:38px;height:40px}.Card-skill .icon-typeorm{width:38px;height:40px;margin-bottom:-2.5px}.Projects .Project-content{position:relative;width:80%;height:65vh;margin:40px}.Projects .Project-content .container-general{position:relative;width:100%;height:100%}.Projects .Project-content .container-general .gallery-wrap{position:relative;display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden}.Projects .Project-content .container-general .gallery-wrap .item{position:relative;flex:1;cursor:pointer;transition:all .8s ease}.Projects .Project-content .container-general .gallery-wrap .item img{width:100%;height:100%;object-fit:cover;transition:all .5s}.Projects .Project-content .container-general .gallery-wrap .item:after{content:"";position:absolute;z-index:1000;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(transparent 0%,#040f1640 21%)}.Projects .Project-content .container-general .gallery-wrap .item .item-title{position:absolute;width:100%;z-index:1000;top:0;left:0;margin-top:250px;font-family:Amaranth-Regular;font-size:24px;color:var(--ghost-white);text-shadow:0 0 1px var(--rich-black);text-align:center;transition:all .25s}.Projects .Project-content .container-general .gallery-wrap .item .item-info{position:absolute;z-index:1000;width:100%;padding:0 10%;top:400px;left:0;font-family:TitilliumWeb-Regular;font-size:18px;color:var(--ghost-white);text-align:center;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);opacity:0}.Projects .Project-content .container-general .gallery-wrap .item:hover{flex:7}.Projects .Project-content .container-general .gallery-wrap .item:hover .item-info{top:320px;opacity:1;transition:top .6s,opacity .8s cubic-bezier(.33,.66,.66,1);transition-delay:.5s}.Projects .Project-content .container-general .gallery-wrap .item:hover:after{background:linear-gradient(transparent 0%,#040f1680 80%)}.Contact .Contact-content{width:600px;height:360px;margin-top:40px}.Contact .Contact-content .Form-container{width:100%;height:100%;background:linear-gradient(to right,#151515 2px,transparent 2px) 0 0,linear-gradient(to right,#151515 2px,transparent 2px) 0 100%,linear-gradient(to left,#151515 2px,transparent 2px) 100% 0,linear-gradient(to left,#151515 2px,transparent 2px) 100% 100%,linear-gradient(to bottom,#151515 2px,transparent 2px) 0 0,linear-gradient(to bottom,#151515 2px,transparent 2px) 100% 0,linear-gradient(to top,#151515 2px,transparent 2px) 0 100%,linear-gradient(to top,#151515 2px,transparent 2px) 100% 100%;background-repeat:no-repeat;background-size:20px 20px;background-color:#040f1606;padding:20px}.Contact .Contact-content .Form-container .btn-container{display:flex;justify-content:center}.Input-container{position:relative;width:100%;height:40px;margin:20px 0}.Input-container ::placeholder{color:transparent}.Input-container .input{position:absolute;top:0;left:0;height:100%;width:100%;background:none;border:2px solid var(--rich-black);padding:10px;font-family:TitilliumWeb-Regular;font-size:16px;outline:none}.Input-container .input:focus{border:2px solid rgba(4,15,22,.7)}.Input-container .input:focus+.label{top:-14px;font-size:16px;z-index:10;color:var(--ghost-white);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.Input-container .input:not(:placeholder-shown){border:2px solid rgba(4,15,22,.7)}.Input-container .input:not(:placeholder-shown)+.label{top:-14px;font-size:16px;z-index:10;color:var(--ghost-white);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.Input-container .label{position:absolute;top:6.5px;left:8px;background:none;font-family:TitilliumWeb-SemiBold;font-size:18px;padding:0 2px;transition:all .25s}.Textarea-container{position:relative;width:100%;height:120px;margin:20px 0}.Textarea-container ::placeholder{color:transparent}.Textarea-container .textarea{position:absolute;top:0;left:0;height:100%;width:100%;background:none;border:2px solid var(--rich-black);padding:10px;font-family:TitilliumWeb-Regular;font-size:16px;outline:none;resize:none}.Textarea-container .textarea:focus{border:2px solid rgba(4,15,22,.7)}.Textarea-container .textarea:focus+.label{top:-14px;font-size:16px;z-index:10;color:var(--ghost-white);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.Textarea-container .textarea:not(:placeholder-shown){border:2px solid rgba(4,15,22,.7)}.Textarea-container .textarea:not(:placeholder-shown)+.label{top:-14px;font-size:16px;z-index:10;color:var(--ghost-white);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.Textarea-container .label{position:absolute;top:6.5px;left:8px;background:none;font-family:TitilliumWeb-SemiBold;font-size:18px;padding:0 2px;transition:all .25s}.Btn-submit{width:150px;height:30px;background:var(--rich-black);border:2px solid var(--rich-black);font-family:TitilliumWeb-Regular;font-size:18px;color:var(--ghost-white);cursor:pointer;transition:all .25s}.Btn-submit:hover{background:none;color:var(--rich-black)}.ModalForm{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:200px;height:100px;font-family:TitilliumWeb-SemiBold;font-size:18px;color:var(--ghost-white);display:flex;justify-content:center;align-items:center;text-align:center;background:linear-gradient(to right,#040f1626,#040f1640 50%,#040f1626);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);animation:fade .5s}@keyframes cyan{0%,to{top:10%;left:50%;transform:scale(1);opacity:.6}25%{top:50%;left:90%;transform:scale(1.3);opacity:.8}50%{top:90%;left:50%;transform:scale(1.5);opacity:1}75%{top:50%;left:10%;transform:scale(1.3);opacity:.8}}@keyframes ghost{0%,to{top:20%;left:30%;transform:scale(1.1);opacity:.7}25%{top:70%;left:70%;transform:scale(1.4);opacity:.9}50%{top:90%;left:30%;transform:scale(1.2);opacity:1}75%{top:50%;left:50%;transform:scale(1.1);opacity:.9}}@keyframes blue{0%,to{top:50%;left:20%;transform:scale(1);opacity:.8}25%{top:80%;left:50%;transform:scale(1.2);opacity:.9}50%{top:50%;left:80%;transform:scale(1.4);opacity:1}75%{top:20%;left:50%;transform:scale(1.2);opacity:.9}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (max-width: 600px){.Section{padding:20px}.Section h1{font-size:32px}.Section h2{font-size:24px}.Aboutme img{width:250px;height:250px}.Aboutme span{font-size:18px}.Aboutme p{font-size:16px}.Aboutme .Links{width:90%}.Aboutme .Links a{width:45%}.Skills-content{width:90%;margin:20px 0;gap:10px}.Card-skill{width:100px;height:100px;font-size:16px}.Card-skill .icon,.Card-skill .icon-redux{width:24px;height:24px}.Card-skill .icon-sass{width:30px;height:20px}.Card-skill .icon-less{width:35px;height:35px}.Card-skill .icon-node{width:24px;height:27px}.Card-skill .icon-mongo{width:28px;height:30px}.Card-skill .icon-postgres{width:24px;height:24px}.Card-skill .icon-git{width:28px;height:30px}.Card-skill:hover{background:linear-gradient(to right,#151515 2px,transparent 2px) 0 0,linear-gradient(to right,#151515 2px,transparent 2px) 0 100%,linear-gradient(to left,#151515 2px,transparent 2px) 100% 0,linear-gradient(to left,#151515 2px,transparent 2px) 100% 100%,linear-gradient(to bottom,#151515 2px,transparent 2px) 0 0,linear-gradient(to bottom,#151515 2px,transparent 2px) 100% 0,linear-gradient(to top,#151515 2px,transparent 2px) 0 100%,linear-gradient(to top,#151515 2px,transparent 2px) 100% 100%;background-repeat:no-repeat;background-size:20px 20px;background-color:#040f1606}.Projects .Project-content{width:90%;min-height:100vh}.Projects .Project-content .container-general .gallery-wrap{flex-direction:column}.Projects .Project-content .container-general .gallery-wrap .item{position:relative;height:2vh;width:100%;background:linear-gradient(transparent 0%,#040f1680 60%)}.Projects .Project-content .container-general .gallery-wrap .item .item-title{display:none;position:absolute;font-size:20px;margin-top:100px;transition:none}.Projects .Project-content .container-general .gallery-wrap .item .item-info{z-index:-1;font-size:16px;padding:0 2%;bottom:0}.Projects .Project-content .container-general .gallery-wrap .item:hover{flex:4}.Projects .Project-content .container-general .gallery-wrap .item:hover .item-title{display:block;position:absolute;font-size:20px;top:30%;transition:none}.Projects .Project-content .container-general .gallery-wrap .item:hover .item-info{z-index:1000;top:60%;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}.Contact .Contact-content{width:90%}}
