@import url(https://fonts.googleapis.com/css2?family=Ysabeau+Infant:ital,wght@0,1..1000;1,1..1000&display=swap);*{font-family:"Ysabeau Infant",sans-serif;padding:0;margin:0;box-sizing:border-box;text-decoration:none;list-style:none}h1{font-size:3.9rem}h2{font-size:2.5rem}h3{font-size:1.8rem}h4{font-size:1.5rem}h5{font-size:1.3rem}h6{font-size:1rem}p{font-size:1.5rem}:root{--primary-color:black;--secondary-color:rgb(122, 121, 121);--primary-bg-color:white}html{scroll-behavior:smooth}body{width:100%;background:var(--primary-bg-color)}header.z-up{z-index:7;box-shadow:0 .3rem 1rem var(--secondary-color)}button{border-radius:2rem;padding:1rem 2.3rem;border:1px solid #000;font-size:1rem;background:#fff;cursor:pointer;transition:background .4s ease,color 499ms ease}button:hover{background:var(--primary-color);color:var(--primary-bg-color);box-shadow:0 0 1rem 1px var(--secondary-color)}.button{border-radius:2rem;padding:1rem 2.3rem;border:1px solid #000;font-size:1rem;background:#fff;color:var(--primary-color);cursor:pointer;transition:background .4s ease,color 499ms ease}.button:hover{background:var(--primary-color);color:var(--primary-bg-color);box-shadow:0 0 1rem 1px var(--secondary-color)}.container{width:80%;margin:0 auto}header{position:fixed;width:100%;top:0;background:var(--primary-bg-color);z-index:0}nav{display:flex;justify-content:space-between;align-items:center;height:5rem}header nav .toggle{display:none}nav ul{display:flex;gap:2rem}nav ul li a{position:relative;padding-bottom:5px;transition:border .3s ease;font-size:1.5rem;color:var(--primary-color)}nav ul li a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0%;background:var(--primary-color);transition:width .3s ease}nav ul li a:hover::after{width:100%}.hero{display:flex;justify-content:space-between;align-items:center;margin:5rem auto;min-height:75vh;padding-top:5rem}.hero .profile{display:flex;flex-direction:column;align-items:flex-start;width:50%}.hero .profile p{padding:1rem 0}.hero .profile ul{display:flex;gap:1rem;padding-bottom:1rem}.hero .profile ul li a{height:30px;width:30px;border:1px solid var(--primary-color);border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--primary-color);transition:background .4s ease,color .4s ease}.hero .profile ul li a:hover{background:var(--primary-color);color:var(--primary-bg-color);box-shadow:0 0 1rem 1px var(--secondary-color)}.hero .profile label{font-size:2rem}.hero .profile h1{background:linear-gradient(to right,#0a0a0a,#636463,#a5a5a3);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero .profile h2{display:flex}.hero .profile h2 span{display:inline-block;padding-left:10px;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid #000;animation:typing 6s steps(17,end) infinite}@keyframes typing{0%{width:0}40%{width:17ch}50%{width:17ch}90%{width:0}100%{width:0}}.hero .profile-image{display:flex;height:400px;width:400px;transform-style:preserve-3d;animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}25%{transform:translateY(-20px) rotateX(5deg) rotateY(5deg)}50%{transform:translateY(0) rotateX(0) rotateY(0)}75%{transform:translateY(-20px) rotateX(-5deg) rotateY(-5deg)}}.hero .profile-image img{width:100%;height:100%;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;object-fit:cover;border:6px solid transparent;box-shadow:0 0 50px var(--secondary-color),0 0 100px rgba(0,0,0,.5),0 0 150px rgba(0,0,0,.3);animation:glow 3s infinite alternate,morph 12s ease-in-out infinite;position:relative;z-index:4;background:linear-gradient(45deg,var(--primary-bg-color),var(--secondary-color))}@keyframes glow{0%{box-shadow:0 0 40px var(--primary-color),0 0 80px rgba(0,0,0,.5),0 0 120px rgba(0,0,0,.3);border-color:var(--primary-color)}100%{box-shadow:0 0 60px var(--primary-color),0 0 120px rgba(0,0,0,.7),0 0 180px rgba(0,0,0,.5);border-color:var(--secondary-color)}}@keyframes morph{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}33%{border-radius:58% 42% 75% 25%/76% 46% 54% 24%}66%{border-radius:18% 82% 41% 59%/59% 54% 46% 41%}100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}}.glow-effect{height:110%;top:-5%;left:-5%;border-radius:50%;background:var(--primary-color);filter:blur(60px);opacity:.3;z-index:1;animation:pulse 4s infinite alternate}@keyframes pulse{0%{opacity:.2;transform:scale(.95)}100%{opacity:.4;transform:scale(1.05)}}.about h2,.contact h2,.services h2,.skills h2{text-align:center;padding:4rem 0}.about{padding:3rem 0}.about-container{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:3rem}.about-container .about-image img{width:100%}.skills{padding:3rem 0}.skill-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;align-items:center}.skill-container .skill{border:1px solid var(--primary-color);text-align:center;padding:2rem 1rem 1rem 1rem;border-radius:5px;cursor:pointer;min-height:9rem;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:box-shadow .4s ease}.skill-container .skill i{font-size:3.5rem;transition:transform .5s ease,filter .5s ease,color .5s ease}.skill-container .skill p{font-weight:600;opacity:0;transition:opacity .5s ease}.skill-container .skill:hover{box-shadow:5px 5px 7px 1px var(--secondary-color);padding-bottom:0}.skill-container .skill:hover i{transform:translateY(-2rem) scale(1.15);filter:drop-shadow(0 6px 14px rgba(0, 0, 0, .3));color:var(--secondary-color)}.skill-container .skill:hover p{opacity:1}.services{padding:3rem 0}.service-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));justify-content:center;gap:1rem;text-align:center}.service-container .service{padding:3rem;border-radius:10px;position:relative;background:var(--primary-bg-color)}.service-container .service i{font-size:2.5rem;margin-bottom:1rem;color:var(--secondary-color)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.service-container .service::after,.service-container .service::before{content:"";position:absolute;width:100%;height:100%;top:50%;left:50%;translate:-50% -50%;border-radius:10px;z-index:-1;padding:5px;background-image:conic-gradient(from var(--angle),transparent 60%,var(--primary-color));animation:spin 5s linear infinite}@keyframes spin{from{--angle:0deg}to{--angle:360deg}}.service-container .service::before{filter:blur(1.5rem);opacity:.5}.service-container .service h3{margin-bottom:1.5rem}.contact{position:relative;padding:3rem 0}.contact-container{display:flex;flex-direction:column;gap:1rem;width:50%;margin:0 auto}.contact-container input,.contact-container textarea{padding:1rem}.contact-container button{width:10rem;display:flex;align-self:center;justify-content:center}canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}footer{display:grid;grid-template-columns:repeat(3,1fr);justify-content:center;align-items:center;height:5rem}footer ul{display:flex;flex-direction:row;gap:1rem;justify-content:center}footer ul:nth-of-type(2){justify-content:flex-end}footer ul a{color:var(--primary-color);transition:text-shadow .4s ease}footer a:hover{text-shadow:1px 1px 2px var(--secondary-color)}label.error{color:red;margin-top:-15px}.alert-success{display:flex;justify-content:center;align-items:center;background:#23c723;padding:1rem;gap:1.5rem;color:#fff;border-radius:5px;outline:0;display:none}.alert-success i{font-size:2rem}@media (max-width:1200px){.hero .profile h2{font-size:1.4rem}}@media (max-width:1024px){h1{font-size:2.7rem}h2{font-size:1.7rem}h3{font-size:1.6rem}h4{font-size:1rem}h5{font-size:1.3rem}h6{font-size:.95rem}p{font-size:1.3rem}.container{width:90%}nav{height:4rem}nav ul{gap:1rem}nav ul li a{font-size:1.3rem}.hero .profile label{font-size:1.5rem}.hero .profile-image{height:275px;width:275px}.hero{margin:0 auto;min-height:65vh;padding-top:5rem}footer{display:flex;justify-content:space-between}footer ul:nth-of-type(1){display:none}}@media (max-width:600px){h1{font-size:2.5rem}h2{font-size:1.7rem}h3{font-size:1.4rem}h4{font-size:1rem}h5{font-size:1.2rem}h6{font-size:.9rem}p{font-size:1.1rem}nav{position:relative}.nav-links{display:none;position:absolute;top:100%;right:0;flex-direction:column;perspective:500px}.nav-links.show{display:block}.nav-links li{padding:1rem 1.5rem;border-top:1px solid var(--secondary-color);background:var(--primary-bg-color);box-shadow:0 .5rem 1rem var(--secondary-color);transform:rotate(-90deg);transform-origin:top right;animation:navigation 1s ease forwards;opacity:0}.nav-links li:nth-child(2){animation-delay:.3s;transform-origin:top left;transform:rotateZ(90deg) rotateY(90deg)}.nav-links li:nth-child(3){animation-delay:.6s}.nav-links li:nth-child(4){animation-delay:.9s;transform-origin:top left;transform:rotateZ(90deg) rotateY(90deg)}.nav-links li:nth-child(5){animation-delay:1.2s}@keyframes navigation{to{transform:rotate(0);opacity:1}}nav ul li a:hover::after{width:0}header nav .toggle{display:flex;flex-direction:column;gap:6px;cursor:pointer}header nav .toggle span{display:block;width:30px;height:4px;background:var(--primary-color);border-radius:2px;transition:transform .3s ease}.toggle.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}.toggle.active span:nth-child(2){opacity:0}.toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.hero{flex-direction:column-reverse;padding-top:7rem}.hero .profile{width:100%;margin-top:5rem}.about-container{grid-template-columns:1fr}.skill-container{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.contact-container{width:75%}footer ul{gap:.4rem}}