.hero{border:3px solid rgb(0,0,0);gap:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:4.5rem;color:#000;height:auto;margin:2%;max-width:75rem;background-color:#dca0c4;overflow-y:auto;text-align:center}.middle-hero{display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;padding-bottom:2.2rem;margin:.8rem 1.2rem auto}.hero h1{font-family:Roboto Mono,serif;font-size:48px;color:#fff;text-align:center}.typing-animation{font-family:Courier New,Courier,monospace;white-space:nowrap;overflow:hidden;border-right:3px solid #000;width:0;animation:typing 3s steps(30,end) forwards,blink .7s step-end infinite}@keyframes typing{0%{width:0}to{width:21ch}}@keyframes blink{50%{border-color:transparent}}@media (max-width: 600px){.typing-animation{font-size:.6rem;animation:typingMobile 3s steps(22,end) forwards,blink .7s step-end infinite}@keyframes typingMobile{0%{width:0}to{width:21ch}}}.profile-picture{width:19rem;height:19rem;border:4px solid #000000;border-radius:50%;object-fit:cover;margin:1rem 4rem;animation:floatIn 1.2s ease-out forwards,floating 4s ease-in-out infinite;opacity:0;transform:translateY(30px) scale(.9)}@keyframes floatIn{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes floating{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-15px) scale(1.05)}}.hero h2{justify-content:center;align-items:center;font-family:Roboto Mono,serif;font-size:40px;max-width:50%;color:#fff;margin:auto;text-align:center}.buttons-homepage{display:flex;justify-content:center;gap:2rem;margin-bottom:3rem}.buttons-homepage a{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;font-family:Roboto Mono,serif;font-size:20px;font-weight:700;transition:color .3s,transform .2s;border-radius:100px;border:3px solid rgb(0,0,0);padding:1rem 2rem;cursor:pointer;width:auto;height:auto}.see-more-link{color:#000;background-color:transparent}.download-button{color:#fff;background-color:#56394a}.buttons-homepage a:hover{background-color:#dca0c4;transform:scale(1.1)}.see-more-link:hover{color:#fff;background-color:#56394a}.download-button:hover{color:#000}.vertical-navbar{padding:.8rem;background-color:#ffcfec;display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:30%;left:3rem;gap:10rem;border-radius:50px;border-style:solid;width:auto;height:auto;max-width:9rem}.navbar-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.navbar-links a{color:#000;text-decoration:none;font-size:24px;width:3.3rem;height:3.2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .3s ease,transform .2s ease}.navbar-links a:hover{background-color:#da99c0af;transform:scale(1.1)}.navbar-links a.active-link{background-color:#da99c0af;color:#fff;transform:scale(1.2);font-weight:700}.about-me{overflow:visible;display:flex;align-items:flex-start;justify-content:center;flex-direction:row;color:#000;margin:3% 5%;max-width:70rem;font-family:Roboto Mono,serif;font-size:20px;gap:1.5rem}.about-text{line-height:1.9rem;border:3px solid black;border-radius:30px;padding:2rem}.skills-section{flex:1;display:flex;flex-direction:column;align-items:center}.skills-boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;justify-content:center}.skill-box{width:14rem;height:13rem;padding:1rem 3px;border:3px solid black;border-radius:1rem;background-color:#dca0c4;font-size:25px;font-weight:700;font-family:Roboto Mono,serif;text-align:center;color:#fff;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;opacity:0;animation:fadeInOnly 1.5s ease forwards;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease!important;will-change:transform}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.certificate-image{width:100%;max-width:400px;display:block;margin-top:2rem;margin-right:5rem;border-radius:8px;box-shadow:0 0 10px #0000001a;cursor:pointer;opacity:0;transform:scale(.8);transition:all .3s ease-out;border:3px solid black}.certificate-image.pop-in{animation:popIn .4s ease-out forwards}.skill-box:hover{transform:translateY(-6px) scale(1.1)!important;box-shadow:0 12px 24px #00000026}.skill-box:nth-child(1){animation-delay:.2s}.skill-box:nth-child(2){animation-delay:.4s}.skill-box:nth-child(3){animation-delay:.6s}.skill-box:nth-child(4){animation-delay:.8s}.skill-icon{font-size:40px;color:#853565db}.divider{width:.9rem;background-color:#000;align-self:stretch;margin:0 1rem}.button-aboutme{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;text-decoration:none;color:#000;font-family:Roboto Mono,serif;font-size:20px;font-weight:700;transition:color .3s,transform .2s;border-radius:3rem;margin-top:.5rem;border:3px solid rgb(0,0,0);padding:1.4rem;cursor:pointer;width:auto;height:auto}.button-aboutme:hover{color:#fff;background-color:#dca0c4c0;transform:scale(1.1);cursor:pointer}.webdevskills{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin:2% 5%;background-color:#dca0c4;border:3px solid #000000;border-radius:2.4rem;font-family:Roboto Mono,serif;max-width:55rem;width:60rem;padding-bottom:3rem;box-sizing:border-box}.skill-badge{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;justify-items:center;align-items:center;width:100%;margin-top:0}.skill-badge h2{width:100%;text-align:center;margin-bottom:20px}.skill-badge .badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:10rem;height:9rem;padding:1.6rem;background-color:#ffcfec;border-radius:10px;box-shadow:2px 2px 5px #0003;text-align:center;font-size:11px;border:2px solid black;animation:fadeInOnly 1.5s ease forwards;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease!important;will-change:transform}.skill-badge .badge:hover{transform:translateY(-6px) scale(1.1)!important;box-shadow:0 12px 24px #00000026}@keyframes fadeInOnly{0%{opacity:0}to{opacity:1}}.skill-badge .badge img{max-width:3rem;max-height:3rem;margin-bottom:.7rem;object-fit:contain}.skill-badge .badge span{font-weight:700;color:#333;font-size:1rem}.skill-badge .badge small{font-size:.8rem}.contact-page{max-width:1200px;margin:3% auto;padding:40px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}@media (max-width: 768px){.contact-page{flex-direction:column;padding:20px;margin:2% 5%;gap:20px}.contact-info,.contact-form-container{width:100%;padding:2rem}}@keyframes bounceInLeft{0%{opacity:0;transform:translate(-100px) scale(.95)}60%{opacity:1;transform:translate(15px) scale(1.05)}to{transform:translate(0) scale(1)}}@keyframes bounceInRight{0%{opacity:0;transform:translate(100px) scale(.95)}60%{opacity:1;transform:translate(-15px) scale(1.05)}to{transform:translate(0) scale(1)}}.contact-info{flex:1;text-align:center;font-size:22px;background-color:#dca0c4;border:3.5px solid #000000;border-radius:25px;font-family:Roboto Mono,serif;padding:3.5rem;animation:bounceInLeft 1s ease forwards}.contact-info p{margin-bottom:.7rem}.contact-form-container{flex:1;background:#ffcfec6c;padding:2.4rem;box-shadow:2px 2px 10px #0000001a;border:3px solid #000000;border-radius:25px;font-family:Roboto Mono,serif;animation:bounceInRight 1s ease forwards}.contact-form{display:flex;flex-direction:column;gap:.8rem}input,textarea{width:100%;padding:10px;border-radius:5px;border:1px solid #ccc}textarea{height:9rem}button{background-color:#be4d91;color:#fff;padding:.8rem;border:none;border-radius:5px;cursor:pointer;font-family:Roboto Mono,serif;transition:all .6s ease}button:hover{background-color:#ffcfec;color:#000}.success-message{color:green;font-weight:700}.my-projects{text-align:center;padding:.3rem;font-family:Roboto Mono,serif;margin:2% 5%}.projects-container{display:flex;flex-wrap:wrap;justify-content:center;gap:5em;margin:3.7rem;font-family:Roboto Mono,serif}.project-item{width:30rem;cursor:pointer;text-align:center}.project-image{width:100%;height:auto;border-radius:10px;transition:transform .3s;border:3px solid black}.project-item:hover .project-image{transform:scale(1.05)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;opacity:0;animation:fadeIn .3s forwards;z-index:200000}.modal-content{border:3px solid rgb(0,0,0);background:#dca0c4;padding:2rem;border-radius:35px;max-width:35rem;text-align:center;position:relative;font-family:Roboto Mono,serif;transform:scale(.9);opacity:0;animation:popIn .4s ease-out forwards;z-index:300000}@keyframes fadeIn{to{opacity:1}}@keyframes popIn{to{opacity:1;transform:scale(1)}}.close-btn{position:absolute;top:1rem;right:2rem;font-size:24px;cursor:pointer}.project-btn{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;text-decoration:none;color:#fff;background-color:#855873;font-family:Roboto Mono,serif;font-size:15px;font-weight:700;transition:color .3s,transform .2s;border-radius:100px;border:3px solid rgb(0,0,0);padding:1.5rem;cursor:pointer;width:auto;height:auto;padding:1.2rem!important}.project-btn:hover{color:#000;background-color:#ffcfec;transform:scale(1.1);cursor:pointer}.darkmode-topbar{width:100%;background-color:#fff0;padding:.1rem 50px;display:flex;justify-content:flex-end;position:fixed;top:0;left:0;z-index:999}.darkmode-toggle{margin:.2rem;background:#aa619200;border-radius:5rem;font-size:2rem;cursor:pointer}body.dark-mode .darkmode-toggle{background:#0000;transition:all .6s ease}body.dark-mode{background-color:#393237;color:#f5f5f5}body.dark-mode a{color:#000}body.dark-mode .vertical-navbar{background-color:#5b1936}body.dark-mode .hero{background-color:#b74a7b8b;border-color:#fff}body.dark-mode .profile-picture{border-color:#fff}body.dark-mode .see-more-link{background-color:#9659748b;border-color:#fff;color:#fff}body.dark-mode .see-more-link:hover{background-color:#a0456e8b}body.dark-mode .download-button{background-color:#2f16218b;border-color:#fff;color:#fff}body.dark-mode .download-button:hover{background-color:#7e3c588b}body.dark-mode .about-text{color:#ccc;border-color:#fff}body.dark-mode .button-aboutme{background-color:#b74a7b8b;border-color:#fff;color:#fff}body.dark-mode .button-aboutme:hover{background-color:#6b2c488b}body.dark-mode .divider{background-color:#fff}body.dark-mode .webdevskills{border-color:#fff;background-color:#b74a7b8b!important}body.dark-mode .skill-box{border-color:#fff;background-color:#b74a7b8b}body.dark-mode .skill-icon{color:#f89bd3}body.dark-mode .badge{background-color:#50122e;border-color:#fff}body.dark-mode .badge span{color:#fff}body.dark-mode .contact-info{background-color:#b74a7b8b;border-color:#fff}body.dark-mode .contact-form-container{background-color:#50122e;border-color:#fff}body.dark-mode .modal-content{background-color:#50122e;border:3px solid rgb(255,255,255)}body.dark-mode .project-btn{background-color:#54283c;border-color:#fff;color:#fff}body.dark-mode .project-image{border-color:#fff}body.dark-mode .project-btn:hover{background-color:#6b2c488b}.social-icon{font-size:30px;color:#ff69b4;transition:color .3s ease}.social-icon:hover{color:#ee3f97}body.dark-mode .certificate-image{border:3px solid rgb(255,255,255)}@media (min-width: 768px) and (max-width: 1025px){.vertical-navbar{width:auto;max-width:450px;margin:1rem auto;left:0;right:0;position:relative}.navbar-links{flex-direction:row;justify-content:center;gap:1rem}.hero{margin:1rem;padding:1rem}.middle-hero{margin:2rem}.profile-picture{width:260px;height:300px;margin:2rem}.buttons-homepage{margin-bottom:60px}.about-me{font-size:22px;margin:3rem 1rem 2rem 2rem}.divider{margin:0 17px}.skills-boxes{display:flex;flex-direction:column;gap:1rem;margin:1rem 2rem}.button-aboutme:hover{transform:scale(1.05)}.webdevskills{border-radius:36px;margin:2rem 2rem 1rem;padding:2rem;font-size:16px}.skill-badge{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;margin:1rem;padding:1rem 1rem 1rem .2rem}.skill-badge .badge span{font-size:1rem}.skill-badge .badge small{margin:.3rem;font-size:1rem}.contact-info{font-size:22px;padding:50px;max-width:100%}.contact-form-container{padding:44px;width:100%}.contact-form{gap:12px}button{padding:1.5rem;font-size:1.5rem;border-radius:5px}.darkmode-topbar{display:none}}@media screen and (min-width: 300px) and (max-width: 767px){.vertical-navbar{padding:.6rem;left:2rem;right:2rem;max-width:30rem;bottom:1rem;top:auto;z-index:99999;background-color:#ffcfec}.navbar-links{flex-direction:row;gap:7px}.hero{margin:5rem .1rem 7rem;max-width:22rem;border-radius:2.7rem;padding:.5rem}.hero h1{font-size:33px}@media (max-width: 600px){.typing-animation{font-size:1.5rem!important;animation:typingMobile 3s steps(22,end) forwards .4s,blink .7s step-end infinite}@keyframes typingMobile{0%{width:0}to{width:22ch}}}.profile-picture{width:12rem;height:12rem;border-radius:50%;object-fit:cover;margin-top:.7rem!important}.middle-hero{margin:.1rem .2rem;flex-direction:column}.hero h2{justify-content:center;align-items:center;font-family:Roboto Mono,serif;font-size:25px;max-width:9.8rem;color:#fff;text-align:center}.profile-picture{max-width:11rem;max-height:11rem;margin-top:-25px;margin-bottom:15px}.buttons-homepage a{font-size:15px;margin:.1rem;padding:.7rem;border-radius:40px}.about-me{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;margin:1rem;padding:5rem 1rem;max-width:22rem}.skills-boxes{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center}.button-aboutme{border-radius:45px}.download-button{font-size:12px;border-radius:45px}.webdevskills{border-radius:36px;margin:4.6rem .2rem 7rem;padding:3rem 4rem 4rem 3rem;font-size:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:22rem}.skill-badge{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;margin:.1rem;padding:2rem;max-width:22rem}.contact-page{margin:4rem 1rem 6rem;padding:1rem;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;max-width:22rem}.contact-info{padding:1.6rem;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;font-size:16px;max-width:100%}.contact-form-container{font-size:16px;padding:3rem;width:100%}.contact-form{gap:12px}button{padding:1rem;font-size:15px;border-radius:5px}.my-projects{margin:4rem 0;display:flex;flex-direction:column;max-width:22rem}.project-image{margin:.1rem;padding:.1rem;max-width:22rem}.modal-content{font-size:14px;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;padding:2rem;max-width:22rem;z-index:8888}.project-btn{font-size:15px;padding:.9rem}.darkmode-topbar{position:relative;top:6.5rem;right:auto;width:100%;justify-content:center}.darkmode-toggle{position:absolute;bottom:2rem;right:1rem;margin:.2rem;background:none;border-radius:10rem;font-size:1.3rem;cursor:pointer}}*{box-sizing:border-box}body{font-size:1.2rem;margin:0;background-color:#fde5f8;transition:background-color .85s ease,color .85s ease}.page-container{min-height:100vh;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center;align-content:center}