@font-face{font-family:Funnel-Sans;src:url(/fonts/FunnelSans-VariableFont_wght.ttf)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow-x:hidden}h2{font-family:Funnel-Sans}.background-wrapper{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;background-color:#000;overflow:hidden}.content-wrapper{position:relative;z-index:1;width:100%;min-height:100vh}.background-wrapper canvas{display:block;width:100%!important;height:100%!important}.color-bends-container{position:relative;width:100%;height:100vh;overflow:hidden}.navbar{display:flex;align-items:center;justify-content:space-between;border:1px solid black;border-radius:2000px;position:fixed;z-index:1000;top:20px;left:5%;width:90%;background-color:#fff}.navbar ul{display:flex;list-style:none;gap:1.5rem;margin-right:5rem}.navbar ul li{position:relative;padding-bottom:5px;cursor:pointer;font-size:2rem;text-align:center;align-items:center;align-content:center}.navbar ul li:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background-color:#6e00ff;transition:width .5s ease}.navbar ul li:hover:after{width:100%}.my-logo{height:50px;width:auto;object-fit:contain;transition:transform .3s ease;margin:1em 5em}@font-face{font-family:cartoon;src:url(/fonts/Ribeye_Marrow/RibeyeMarrow-Regular.ttf)}@font-face{font-family:posh;src:url(/fonts/Fleur_De_Leah/FleurDeLeah-Regular.ttf)}@font-face{font-family:Funnel-Sans;src:url(/fonts/FunnelSans-VariableFont_wght.ttf)}.banner{min-height:100vh;width:100vw;margin:0;padding:0;border:0px;display:flex;flex-direction:column;justify-content:center;align-items:center}.banner h1{color:#fff}.full-stack,.web-developer{font-size:clamp(2rem,10vw,10rem);font-family:Funnel-Sans}.about{display:flex;width:clamp(350px,95vw,auto-fit);height:auto;margin:1.5rem 3em;overflow:hidden;border:none;gap:2rem}.about-content{flex:2;padding:2em;display:flex;flex-direction:column;justify-content:center;background-color:#fff;text-align:justify;border-radius:25px}.about-content h2{font-size:clamp(1rem,4vw,4rem);position:relative;margin-bottom:40px;display:inline-block}.about-content h2:after{content:"";position:absolute;left:0;bottom:-10px;width:clamp(100px,80%,120%);height:3px;background-color:#000}.about-content p{font-size:clamp(.5rem,3vw,2rem);line-height:1.6;max-width:80%;text-align:start}.about-img{flex:1;align-items:center;justify-content:center;overflow:hidden;border-radius:25px;corner-shape:squircle;padding:1rem;background-color:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.about-img img{width:100%;height:100%;object-fit:cover;border-radius:25px;corner-shape:squircle}@media only screen and (max-width:768px){.about-content,.about-img{flex:1}}.projects-container{height:auto;background-color:#fff;padding:2rem 0;margin:1.5rem 3em;border:none;border-radius:20px}.projects-container h2{color:#000;padding:0 1.5em .5em;font-size:clamp(1rem,5vw,5em);position:relative;display:inline-block}.projects-container h2:after{content:"";position:absolute;bottom:10%;left:2%;width:220%;height:3px;background-color:#000;border-radius:10px}.project-list{display:flex;flex-direction:column;gap:2rem}.project-list .project-card{display:flex;gap:.5rem;border:2px solid gray;border-radius:20px;margin:0 1rem}.project-list .project-card img{width:50%;border:2px solid black;border-radius:20px;margin:1rem}.project-list .project-card .info{margin:1rem;align-content:center}.project-list .project-card .info h3{font-size:clamp(1.5rem,3vw,3rem)}.project-list .project-card .info a{text-decoration:none;color:#000}.project-list .project-card .info p{font-size:clamp(.5rem,2vw,2rem)}@font-face{font-family:cartoon;src:url(/fonts/Ribeye_Marrow/RibeyeMarrow-Regular.ttf)}.skills-container{padding:100px 20px;margin:1.5rem 3em;border:none;border-radius:20px;text-align:center;background:#ffffff0f;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.skills-container h2{position:relative;display:inline-block;color:#fff;font-size:3.5rem;margin-bottom:50px;padding-bottom:15px}.skills-container h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:130%;height:4px;background-color:#fff;border-radius:10px}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:30px;max-width:1000px;margin:0 auto;padding-top:50px}.skill-card{position:relative;background:#ffffff12;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:20px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease}.skill-card img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0px 0px 10px rgba(255,255,255,.6));transition:filter .5s ease-in-out,transform .5s ease}.skill-card .skill-name{position:absolute;bottom:10px;background-color:#000c;color:#fff;padding:5px 12px;border-radius:20px;font-size:.8rem;font-family:cartoon;opacity:0;transform:translateY(5px);transition:all .3s ease-in-out}.skill-card:hover{transform:translateY(-10px);background:#fff3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.skill-card:hover .skill-name{opacity:1;transform:translateY(20px)}.skill-card:hover img{filter:drop-shadow(0 0 15px rgba(255,255,255,1));transform:scale(1.2) translateY(-10px)}.footer{overflow-x:hidden;background-color:#ffffff1a;margin:2rem 2rem 1rem;padding-bottom:2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:40px;box-shadow:0 0 10px #fff}.footer h2{text-align:center;color:#fff;font-size:clamp(1rem,5vw,4rem);margin-bottom:2rem;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}.footer .contact-list{display:flex;justify-content:space-evenly;align-items:center;list-style:none;gap:1rem;flex:1 1 0}.footer li{flex:1;color:#000;background-color:#ffffff80;text-align:center;padding:0 1rem 1rem;border:none;border-radius:30px;box-shadow:0 0 10px #ae00ff80;transition:all .5s ease;font-size:clamp(1rem,2vw,2rem);margin:0 clamp(.1rem,.5vw,1rem)}.footer li:hover{box-shadow:0 0 50px #fffc,0 0 50px #b923ff}.footer li img{height:clamp(1rem,4vw,3.125rem);width:clamp(1rem,4vw,3.125rem);transform:translateY(12px);background-color:#fff;border:none;border-radius:50px;corner-shape:squircle;margin-right:1rem}.footer a{color:#000;text-decoration:none;transition:all 1s ease}.footer a:hover{color:#fff;text-shadow:0 0 50px rgba(255,255,255,.8),0 0 50px rgba(185,35,255,1);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}@media only screen and (max-width:768px){.footer .contact-list{flex-wrap:wrap}.footer li{padding:16px}.footer li img{display:none}}