:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#1a1a1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{font-size:20px}#root{width:100%;height:99vh;margin:0;padding:0;overflow:hidden}.background-canvas{display:block;width:100%;height:100vh;position:fixed;top:0;left:0;z-index:0}.app-container{position:relative;width:100%;height:100vh;display:flex}.content{text-align:center;width:100%;padding:20px;z-index:1}.Header{position:absolute;top:0;left:0;width:100%;padding:0;display:flex;justify-content:space-between;align-items:center;z-index:1}.name-section{position:absolute;font-size:clamp(1.2rem,5vw,2.8rem);top:0;left:0}.name-section h1{margin:0;padding:0}.Clock{font-size:clamp(1.2rem,6vw,3.2rem);color:#fff;font-family:Courier New,monospace}.time-display{font-size:clamp(1.2rem,6vw,3.2rem);letter-spacing:.1em}.nav-section{position:absolute;top:0;right:50px;display:flex;gap:20px}.main-content{position:absolute;height:85%;top:10%;left:.5%;right:.5%;padding:10px;border-radius:25px}.Nav-Menu{position:absolute;top:10%;left:5%;width:20%;height:80%;border-radius:25px;box-sizing:border-box;display:flex;flex-direction:column}.nav-menu-content{border:5px solid white;padding:10px;border-radius:25px;background-color:#ffffff1a;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%}.Nav-Menu h1{font-size:clamp(1.8rem,4.5vw,3.2rem);margin-top:0;margin-bottom:clamp(10px,2vh,15px)}.Nav-Menu button:not(.close-btn){display:block;width:95%;padding:clamp(8px,1.5vh,12px);margin:clamp(12px,1.5vh,18px) auto;background:none;border:none;color:#fff;font-size:clamp(1.3rem,3.8vw,2.2rem);cursor:pointer;transition:all .3s ease;box-sizing:border-box}.Nav-Menu button:not(.close-btn):hover{transform:scale(1.15)}.Nav-Menu button:not(.close-btn):active{transform:scale(.95)}.Nav-Menu .close-btn{z-index:30}.Info-Section{position:absolute;top:10%;right:5%;width:60%;height:80%;border:5px solid white;padding:10px;border-radius:25px;background-color:#ffffff1a;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;scrollbar-width:none}.Info-Section::-webkit-scrollbar{display:none}.close-btn{position:absolute;top:10px;right:15px;background:none;border:none;color:#fff;font-size:2.5rem;cursor:pointer;padding:0;width:45px;height:45px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.close-btn:hover{transform:scale(1.2)}.Contact-Me,.Projects{width:100%;height:100%;padding:20px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.Contact-Me h1,.Projects h1{font-size:clamp(1rem,3vw,2rem);margin:0;word-wrap:break-word}.nav-close-btn{position:absolute;top:-40px;right:15px;background:none;border:none;color:#fff;font-size:3.5rem;cursor:pointer;padding:0;width:60px;height:60px;display:flex;align-items:center;justify-content:center;transition:transform .2s;z-index:15}.nav-close-btn:hover{transform:scale(1.2)}.nav-menu-btn{position:absolute;top:25px;left:25px;background:#ffffff1a;border:clamp(3px,.5vw,6px) solid white;color:#fff;font-size:clamp(2.5rem,6vw,5rem);width:clamp(80px,18vw,160px);height:clamp(80px,18vw,160px);cursor:pointer;border-radius:32px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10;letter-spacing:-3px}.nav-menu-btn:hover{background:#fff3;transform:scale(1.1)}.nav-menu-btn:active{transform:scale(.95)}@media(orientation:portrait){.content{padding:0}.Header{flex-direction:column;gap:10px}.name-section{position:relative;font-size:clamp(1rem,6vw,2.5rem);top:auto;left:auto}.Clock,.time-display{font-size:clamp(1.3rem,7vw,2.8rem)}.nav-section{position:relative;top:auto;right:auto;gap:10px}.nav-section h1{font-size:.8rem}.nav-close-btn{top:5px;right:5px;font-size:clamp(1.8rem,5vw,3rem);width:clamp(40px,10vw,70px);height:clamp(40px,10vw,70px)}.nav-menu-btn{top:12px;left:12px;width:clamp(70px,16vw,130px);height:clamp(70px,16vw,130px);font-size:clamp(2rem,5vw,4rem)}.Nav-Menu{position:absolute;top:10%;left:.5%;right:.5%;width:auto;height:80%;box-sizing:border-box}.Nav-Menu h1{font-size:clamp(2.2rem,8vw,4rem);margin-bottom:clamp(10px,1.5vh,15px)}.Nav-Menu button:not(.close-btn){font-size:clamp(1.8rem,6vw,3.2rem);padding:clamp(8px,1vh,12px);margin:clamp(10px,1.2vh,15px) auto}.Info-Section{position:absolute;top:10%;left:1%;right:1%;width:auto;height:80%;box-sizing:border-box}.Contact-Me h1,.Projects h1{font-size:clamp(1.8rem,6vw,3.5rem)}.About-Me h1{font-size:clamp(2rem,8vw,3.5rem)}.about-images{flex-direction:row;flex-wrap:nowrap;gap:clamp(15px,3vw,30px);align-items:center;justify-content:center}.profile-photo{width:clamp(225px,45vw,500px)!important;height:clamp(225px,45vw,500px)!important}.uah-logo{width:clamp(280px,60vw,680px)!important}.main-content{height:95%;top:5%}}.social-links{display:flex;gap:30px;align-items:center;justify-content:center}.social-button{display:inline-flex;align-items:center;justify-content:center;width:clamp(60px,14vw,100px);height:clamp(60px,14vw,100px);border-radius:50%;color:#fff;text-decoration:none;transition:all .3s ease;background:#ffffff1a;border:clamp(2px,.4vw,4px) solid rgba(255,255,255,.3)}.social-button svg{width:clamp(30px,8vw,50px);height:clamp(30px,8vw,50px)}.social-button:hover{transform:translateY(-5px) scale(1.1);background:#fff3;border-color:#fff9}.social-button.github:hover{color:#fff}.social-button.linkedin:hover{color:#0a66c2;background:#0a66c21a;border-color:#0a66c2}.social-button.email:hover{color:#ea4335;background:#ea43351a;border-color:#ea4335}.About-Me{width:100%;height:100%;padding:clamp(10px,5%,20px);display:flex;flex-direction:column;gap:clamp(10px,3%,20px);overflow-x:hidden}.About-Me h1{font-size:clamp(1.8rem,8vw,3.5rem);margin:0;text-align:center}.about-images-container{display:flex;gap:clamp(20px,5vw,80px);align-items:center;justify-content:center;flex-wrap:wrap;width:100%;margin-bottom:clamp(10px,3vw,30px);min-width:0}.about-images{display:flex;gap:clamp(20px,5vw,80px);align-items:center;justify-content:center;flex-wrap:wrap}.profile-photo{width:clamp(150px,25vw,320px);height:clamp(150px,25vw,320px);max-width:100%;max-height:100%;border-radius:15px;border:3px solid white;object-fit:cover;box-shadow:0 4px 15px #0000004d}.uah-logo{width:clamp(200px,40vw,600px);max-width:100%;height:auto;border-radius:10px}.about-bio-section{padding:clamp(10px,3%,20px);border-radius:15px;max-width:95%;width:100%;margin:0 auto;align-self:center;box-sizing:border-box;flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:clamp(15px,3%,20px);scrollbar-width:none}.about-bio-section::-webkit-scrollbar{display:none}.about-bio-section .about-images{order:-1}.about-bio-section p{font-size:clamp(1.2rem,3.5vw,1.4rem);line-height:1.8;color:#fff;margin:0 0 clamp(10px,2%,20px) 0}.about-bio-section p:last-child{margin-bottom:0}@media(orientation:portrait){.About-Me h1{font-size:4.2rem}.about-images{flex-direction:column;gap:20px}.profile-photo{width:190px;height:190px}.uah-logo{width:190px}.about-bio-section{padding:15px;scrollbar-width:none}.about-bio-section::-webkit-scrollbar{display:none}.about-bio-section p{font-size:clamp(1.2rem,3vw,4rem)}}