@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";*,:before,:after{color:var(--main-text);-webkit-user-select:none;user-select:none;box-sizing:border-box;font-display:optional;font-family:Space Grotesk}:root{--dark:#0a0d22a4;--main-text:#f4f6ff;--sub-text:#7ea8ff;--sub-text2:#1a1e3a;--border:#3d6dff;--border2:#000268;--accent:#5b7cff;--accent2:#1e32c8;--accent3:#0a1040;--accent4:#05081ab4;--card:#111852}*{scrollbar-width:auto;scrollbar-color:var(--accent2) #fff0}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background:#fff0}::-webkit-scrollbar-thumb{background-color:var(--accent2);border:3px solid #fff0;border-radius:4px}body{box-sizing:border-box;background-color:#05081a;background-image:radial-gradient(circle,#ffffff14 1px,#0000 1px);background-size:30px 30px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}body.no-scroll{overflow:hidden!important}#root{flex-direction:column;align-items:center;width:100%;height:100%;display:flex}.sectionLine{width:95%;margin:0 0 1%}@media (width<=991.98px){#icons{flex-direction:column}.skills-section{width:95%}.icons-web,.icons-db,.icons-backend{justify-content:space-around;align-items:flex-start;width:100%;display:flex}#projects{flex-flow:column wrap;justify-content:space-evenly;align-items:center;width:100%;display:flex}.project{border-right:none;border-bottom:2px solid var(--accent2);width:80%}.projectDescription{font-size:14px}#contact,#contactSections{flex-direction:column}footer{width:100%;-webkit-box-shadow:0px -8px 24px 0px var(--accent2);-moz-box-shadow:0px -8px 24px 0px var(--accent2);box-shadow:0px -8px 24px 0px var(--accent2);z-index:1111;justify-content:center;align-items:center;transition:all .4s ease-out;display:flex}footer.hide{opacity:0}}header{width:100%;height:10%;-webkit-box-shadow:0px 8px 24px 0px var(--accent2);-moz-box-shadow:0px 8px 24px 0px var(--accent2);box-shadow:0px 8px 24px 0px var(--accent2);z-index:3;background-color:var(--accent3);justify-content:center;align-items:center;display:flex}nav{justify-content:space-evenly;align-items:center;width:90%;display:flex}#logo{border-radius:50%;height:90%}.mobile-nav-button{display:none}.nav-button{text-transform:uppercase;letter-spacing:1px;z-index:1;cursor:pointer;background:0 0;border:none;border-radius:4px 4px 0 0;justify-content:space-between;align-items:center;font-size:1.2rem;transition:color .4s;display:flex;position:relative;overflow:hidden}.nav-button:before,.nav-button.active:before{content:"";border-bottom:2px solid var(--accent2);z-index:-1;width:0;height:100%;transition:width .4s;position:absolute;top:0;left:0}.nav-button:hover:before{width:100%}#mobile-nav{cursor:pointer;transition:all 1.5s;display:none}#mobile-nav.change{transform:rotate(-180deg)}#bar1,#bar2,#bar3{background-color:#fff;width:35px;height:5px;margin:6px 0;transition:all .4s}.change #bar1{transform:translateY(11px)rotate(-45deg)}.change #bar2{opacity:0}.change #bar3{transform:translateY(-11px)rotate(45deg)}@media (width<=991.98px){nav{justify-content:flex-end;padding:0 10px 0 0;display:flex}#mobile-nav{display:inline-block!important}.mobile-nav-button{text-transform:uppercase;letter-spacing:1px;z-index:1;cursor:pointer;background:0 0;border:none;border-radius:4px 4px 0 0;justify-content:space-between;align-items:center;font-size:1.2rem;transition:color .4s;display:flex;position:relative;overflow:hidden}main{position:relative}#mobileNavMenu{background-color:var(--accent3);z-index:2;opacity:0;flex-direction:column;justify-content:space-evenly;align-items:center;width:100%;height:100%;transition:transform 1s,opacity 1s;display:flex;position:absolute;top:-50%;transform:translateY(-100%)}#mobileNavMenu.Display{opacity:1;transform:translateY(60%)}.nav-button{display:none}}#welcomeBanner{flex-direction:column;justify-content:center;align-items:center;width:100%;margin-top:8%;display:flex}@media (width<=991.98px){#welcomeBanner{text-align:center}}.myName{z-index:1;color:var(--accent2);background-color:#0000;transition:color .4s;position:relative;overflow:hidden}.myName:hover{color:#fff}.myName:before{content:"";background-color:var(--accent2);z-index:-1;width:100%;height:0;transition:height .4s;position:absolute;bottom:0;left:0}.myName:hover:before{height:100%}.fivemText{cursor:pointer;z-index:1;color:#ff7100;background-color:#0000;transition:color .4s;position:relative;overflow:hidden}.fivemText:hover,#discordText:hover{color:#fff}.fivemText:before{content:"";z-index:-1;background-color:#ff7100;width:100%;height:0;transition:height .4s;position:absolute;bottom:0;left:0}.fivemText:hover:before,#discordText:hover:before{height:100%}#discordText{cursor:pointer;z-index:1;color:#718adc;background-color:#0000;transition:color .4s;position:relative;overflow:hidden}#discordText:before{content:"";z-index:-1;background-color:#718adc;width:100%;height:0;transition:height .4s;position:absolute;bottom:0;left:0}@media (width<=991.98px){#welcomeBanner{box-sizing:border-box;justify-content:center;align-items:center;padding:2%}}#about{background-color:var(--accent3);box-sizing:border-box;width:100%;color:var(--main-text);justify-content:space-around;align-items:center;margin-top:8%;display:flex}#about-text{flex-direction:column;justify-content:center;align-items:center;width:50%;display:flex}#about h2{color:var(--main-text);margin-bottom:25px;font-size:2.2rem;font-weight:700}#about p{text-align:center;max-width:700px;color:var(--main-text);margin-bottom:20px;font-size:1.15rem;line-height:1.6}.about-image{will-change:transform;width:clamp(320px,36vw,560px);height:auto;animation:5s ease-in-out infinite floating}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@media (width<=991.98px){#about-text{width:95%}.about-image{display:none}}#skills{background-color:var(--accent3);box-sizing:border-box;width:95%;color:var(--main-text);border-radius:2rem;flex-direction:column;justify-content:flex-start;align-items:center;margin-top:10%;padding:40px 20px;display:flex}@media (width<=991.98px){#skills{justify-content:center}}#icons{flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%;height:auto;display:flex;overflow:hidden}.icons{background-color:var(--card);box-sizing:border-box;border-radius:0 0 2rem 2rem;flex-wrap:wrap;justify-content:space-evenly;align-items:center;width:100%;padding:10px 0;transition:max-height .5s,opacity .5s;display:flex;overflow:hidden}.skills-section{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;width:30%;padding:10px;display:flex}@media (width<=991.98px){.skills-section{width:95%}}.skills-title{text-align:center;background-color:var(--card);cursor:pointer;border-radius:2rem 2rem 0 0;width:100%;font-size:32px;font-weight:600;position:relative}.skill-icon-box{border-bottom:2px solid var(--accent4);flex-direction:column;justify-content:center;align-items:center;display:flex}.skill-icon-box:hover{border-bottom:2px solid var(--accent2);transition:border .3s}.skill-icon{margin:1% 5% 0}.skill-icon>svg{fill:#bebebe;cursor:pointer;font-size:3rem;transition:fill .3s}.html5Icon:hover{fill:#f60}.cssIcon:hover{fill:#7e4ab3}.jsIcon:hover{fill:#f7df1e}.reactIcon:hover{fill:#61dafb}.jqueryIcon:hover{fill:#0769ad}.phpIcon:hover{fill:#777bb4}.postgresqlIcon:hover{fill:#336791}.sqliteIcon:hover{fill:#003b57}.mysqlIcon:hover{fill:#4479a1}.pythonIcon:hover{fill:#3776ab}.luaIcon:hover{fill:#2c2d72}.iCloudIcon:hover{fill:#3693f3}.discordIcon:hover{fill:#5865f2}.fivemIcon:hover{fill:#66ae43}.gitIcon:hover{fill:#f05032}.cloudflareIcon:hover{fill:#f48120}.windowsIcon:hover{fill:#00adef}.debianIcon:hover{fill:#d70751}.kaliIcon:hover{fill:#249eff}.myProjects{background-color:var(--accent3);border-radius:2rem;flex-direction:column;justify-content:space-around;align-items:center;width:95%;margin-top:10%;display:flex}.myProjectsList{justify-content:space-around;align-items:center;width:100%;padding:0 0 20px;display:flex}.myProject{background-color:var(--card);border-radius:12px;max-width:33%;padding:10px}@media (width<=991.98px){.myProjectsList{flex-direction:column}.myProject{margin-top:5%;max-width:95%!important}}.projectTitle{justify-content:space-between;align-items:center;display:flex}.projectLine2{border:1px solid #fff;width:100%}#portfolio{background-color:var(--accent3);border-radius:2rem;flex-direction:column;justify-content:center;align-items:center;width:95%;margin-top:10%;padding:10px;display:flex}#projects{flex-wrap:wrap;justify-content:space-evenly;align-items:center;width:100%;display:flex}@media (width<=991.98px){#projects{flex-direction:column}}.project{border-right:2px solid var(--accent2);background-color:var(--card);width:24%;height:350px;color:var(--main-text);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:12px;flex-direction:column;justify-content:space-between;margin-top:1%;padding:15px;transition:transform .3s,box-shadow .3s,background-color .3s;display:flex;position:relative;box-shadow:0 4px 12px #0003}@media (width<=991.98px){.project{width:95%;margin-top:5%}}.project:hover{background-color:var(--accent3);transform:translateY(-4px);box-shadow:0 8px 18px #00000059}.project h3{color:var(--accent);margin-bottom:10px;font-size:1.4rem}.project p{color:var(--sub-text);font-size:.95rem;line-height:1.5}.project .btn{background-color:var(--accent2);color:#fff;border-radius:6px;align-self:flex-start;padding:8px 16px;font-weight:500;text-decoration:none;transition:background-color .3s,transform .2s}.project .btn:hover{background-color:var(--accent);transform:scale(1.05)}.projectTitle{z-index:1;border-bottom:2px solid #0000;width:auto;position:relative}.project:hover>.projectTitle:before{width:100%}.projectTitle:before{content:"";z-index:-1;border-bottom:2px solid var(--accent2);width:0;height:100%;transition:width .4s;position:absolute;bottom:0;left:0}.usedTech{justify-content:space-around;width:100%;display:flex}.skill-icon2{font-size:35px}.skill-icon2>svg{fill:#bebebe;cursor:pointer;transition:fill .3s}.projectLine{border-color:var(--accent2);width:95%}.projectDescription{white-space:normal;width:100%;height:100%;margin-top:10px;display:block}.projectButtons{justify-content:space-around;align-items:center;width:100%;display:flex;position:absolute;bottom:1px;left:0}.projectButton,.portfolioMore{cursor:pointer;z-index:1;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;transition:color .4s;display:flex;position:relative}.portfolioMore{margin-top:2%}.projectButton:hover,.portfolioMore:hover{color:#fff}.projectButton:before,.portfolioMore:before{content:"";background-color:var(--accent2);z-index:-1;border-radius:4px;width:100%;height:0;transition:height .4s;position:absolute;bottom:0;left:0}.projectButton:hover:before,.portfolioMore:hover:before{height:100%}@media (width>=992px) and (width<=1999.98px){.projectDescription{font-size:14px}}#contact{background-color:var(--accent3);flex-direction:column;align-items:center;width:100%;margin:10% 0;display:flex}#contactSections{justify-content:space-evenly;align-items:center;width:100%;display:flex}.contact-sect{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;display:flex}.contact-sect>svg{fill:#bebebe;cursor:pointer;font-size:3rem;transition:fill .3s}footer{width:100%;height:8vh;-webkit-box-shadow:0px -8px 24px 0px var(--accent2);-moz-box-shadow:0px -8px 24px 0px var(--accent2);box-shadow:0px -8px 24px 0px var(--accent2);background-color:var(--accent3);justify-content:center;align-items:center;display:flex}@media (width<=991.98px){footer{text-align:center}}