html,body{height:100%;scroll-behavior:smooth;margin:0;padding:0;font-family:Share Tech,sans-serif;color:#333;background:linear-gradient(to bottom left,#4d177d,#08353e);background-attachment:fixed;background-size:cover}.section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px}.navbar{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);display:flex;justify-content:center;align-items:center;padding:.3rem 3rem;background-color:#36363680;color:#fff;border-radius:1.5rem;box-shadow:0 2px 10px #0000004d;z-index:1000;transition:all .3s ease}.navbar-expanded{top:0;bottom:auto;left:0;right:0;transform:translate(0);padding:1rem 2rem;border-radius:0;background-color:#363636e6}.navbar-links{list-style:none;display:flex}.navbar-links li{margin:0 2rem;position:relative}.navbar-links a{color:#fff;text-decoration:none;font-size:1.5rem;transition:color .3s ease;display:flex;align-items:center}.navbar-links a:hover,.navbar-links .active a{color:#5be0f1}.navbar-links svg{margin-right:8px}.header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-align:center;margin-top:10px}.header-text h1{margin:0;font-size:2.5rem}.header-text p{margin:0;font-size:1.2rem}.bannerText{position:relative;font-size:2rem;font-weight:700;background:linear-gradient(90deg,#efebef,#769bc2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;text-align:center;-webkit-text-stroke:.5px white}.section{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px}.dots-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.JaseaneB{background:linear-gradient(90deg,#efebef,#9a5bf1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;font-size:5rem}.Jaseane{background:linear-gradient(90deg,#efebef,#1c555d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}h1{font-size:4rem;font-weight:700;margin:0;z-index:2}.type-animation-wrapper{margin-top:10px}.type-animation-wrapper span{font-size:2rem}button{margin-top:20px;margin-right:10px;padding:14px 20px;font-size:1.2rem;background:linear-gradient(90deg,#9d00ff,#0056b3);color:#000;border:none;border-radius:35px;cursor:pointer;transition:background .3s ease;z-index:2;background-clip:initial;-webkit-background-clip:initial;-webkit-text-fill-color:initial}button:hover{background:linear-gradient(90deg,#0056b3,#9d00ff)}.section p{margin-top:20px;font-size:1.1rem;color:#333;max-width:60%}.social-icons{margin-top:10px}.social-icons a{margin-right:10px;color:#fff;transition:color .3s ease}.social-icons a:hover{color:tomato}.about-section{display:flex;flex-direction:column;align-items:center;padding:60px 20px;max-width:1200px;margin:auto;border-radius:10px}.aboutHeader{font-size:3rem;background:linear-gradient(90deg,#efebef,#1c555d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;margin-bottom:20px}.about-container{display:flex;flex-direction:column;gap:30px;width:100%;align-items:center}.logo-text-container{display:flex;flex-direction:column;align-items:center;text-align:center}.jfLogo{width:180px;border-radius:10px}.aboutText{font-size:1.2rem;color:#f0f0f0;max-width:700px;margin-top:10px}.skills-container{display:flex;flex-direction:column;align-items:center;width:auto;margin:10px}.skills__row{display:flex;justify-content:center;gap:20px;width:100%;margin-bottom:25px}@keyframes drop-in{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.skills__item{display:flex;flex-direction:column;align-items:center;background:#fff3;padding:15px;border-radius:8px;opacity:0;animation:drop-in 4s forwards;transition:transform 2s ease,background .3s ease}.skills__item-fade-in{animation-delay:var(--animation-delay)}.skills__item:hover{transform:translateY(-5px);background:#ffffff4d}.skill-icon{font-size:2.5rem;color:#5be0f1;margin-bottom:5px}.skill-label{font-size:1rem;color:#f0f0f0}@media (min-width: 768px){.about-container{flex-direction:row;justify-content:space-between}.logo-text-container{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}.jfLogo{width:400px;height:auto;border-radius:10px;margin-bottom:10px}.skills-container{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;width:auto}}.loading-note{color:#f39c12;font-size:14px;margin-top:10px}#projects{padding:60px 0}.projectsHeader{font-size:3rem;background:linear-gradient(90deg,#efebef,#1c555d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;margin-bottom:20px;text-align:center;width:100%;display:flex;justify-content:center;align-items:center}.project-card{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px;width:100%;max-width:80%;margin:100px auto}.reverse{flex-direction:row-reverse}.project-image-slider{position:relative;width:50%;height:550px;perspective:1000px;transform-style:preserve-3d;transform:center}.project-image{width:100%;height:100%;object-fit:contain;margin-bottom:10px}.project-card:hover .project-background{filter:blur(10px);background:linear-gradient(135deg,#5be0f1,#ff5733cc);transform:scale(1.15);box-shadow:0 20px 30px #0003;transition:transform .3s ease,box-shadow .3s ease}.project-card:hover .project-image{transform:scale(1.15);transition:transform .3s ease;z-index:0}.project-links .learn-more-link{text-decoration:none;color:#000}.prev-button,.next-button{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:#fff;border:none;padding:8px;cursor:pointer;font-size:24px;border-radius:50%}.prev-button{left:10px}.next-button{right:10px}.project-info{width:45%;text-align:left}.project-title{font-size:3rem;background:linear-gradient(90deg,#efebef,#1c555d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;margin-bottom:20px;margin-top:15px}.project-description,.project-tech{font-size:16px;color:#fff}.project-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.15;transition:all .3s ease}.project-bg-even{background:linear-gradient(135deg,#ff5733cc,#3357ffcc)}.project-bg-odd{background:radial-gradient(circle,#2196f3cc,#2196f380)}.project-development-note{color:#9d00ff;font-size:rem}@media (max-width: 768px){.project-card{flex-direction:column;align-items:center;text-align:center;width:100%}.reverse{flex-direction:column}.project-image-slider,.project-info{width:100%;text-align:center}.project-image-slider{height:250px}}.contact-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px}.contact-header{text-align:center;margin-bottom:30px}.contact-header h1{font-size:3rem;background:linear-gradient(90deg,#efebef,#1c555d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}p.contactParagraph{font-size:1.2rem;color:#fff;text-align:center;margin:auto}.contact-form{width:100%;max-width:800px;padding:20px;background:linear-gradient(to bottom left,#620c51,#19322f);border:2px solid white;border-radius:10px;box-shadow:0 4px 6px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-group{margin-bottom:20px}.form-label{display:block;font-size:1rem;margin-bottom:5px;color:#5be0f1}.form-input,.form-textarea{width:100%;padding:10px;font-size:1rem;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;outline:none;transition:border-color .3s ease}.form-input:focus,.form-textarea:focus{border-color:#007bff}.contact-button{width:100%;padding:10px 15px;font-size:1rem;color:#fff;background-color:#007bff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.contact-button:hover{background-color:#0056b3}.footer{position:relative;background:transparent;color:#fff;font-size:1rem;text-align:center;padding:80px;overflow:hidden;z-index:1}.footer p{margin:0 0 10px}.footer .social-icons{margin-top:10px;font-size:1.5rem}.footer a{color:#5be0f1;text-decoration:none;margin:0 20px;display:inline-block}.footer a:hover{text-decoration:none}.aurora{position:absolute;top:-50px;left:-50%;width:200%;height:150%;background:radial-gradient(circle at 50% 50%,#5be0f199,#fff0 60%);filter:blur(60px);animation:aurora 5s infinite alternate ease-in-out;z-index:0}@keyframes aurora{0%{transform:translate(-30%) translateY(0) rotate(0)}50%{transform:translate(30%) translateY(-20%) rotate(30deg)}to{transform:translate(-30%) translateY(0) rotate(-10deg)}}