@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none;outline:none;scroll-behavior:smooth;font-family:Poppins,sans-serif}:root{--background-primary: #000000;--background-secondary: #0a0a0a;--text-primary: #ffffff;--text-secondary: #ffffff;--container-background: #0a0a0a;--overlay-dark: rgba(0, 0, 0, .95);--overlay-light: rgba(0, 0, 0, .1);--shadow-color: rgba(255, 255, 255, .1);--header-background: rgba(0, 0, 0, .9);--border-color: rgba(255, 255, 255, .1)}.lightmode{--background-primary: #ffffff;--background-secondary: #f5f5f5;--text-primary: #000000;--text-secondary: #000000;--container-background: #ffffff;--overlay-dark: rgba(255, 255, 255, .95);--overlay-light: rgba(255, 255, 255, .1);--shadow-color: rgba(0, 0, 0, .1);--header-background: rgba(255, 255, 255, .9);--border-color: rgba(0, 0, 0, .1)}html{font-size:62.5%;overflow-x:hidden}body{background:var(--background-primary);font-family:Poppins,sans-serif;color:var(--text-primary)}html::-webkit-scrollbar{width:.8rem}html::-webkit-scrollbar-track{background:var(--background-primary)}html::-webkit-scrollbar-thumb{background:var(--text-secondary)}.header{position:fixed;top:0;left:0;width:100%;padding:2rem 15%;background:var(--background-primary);display:flex;justify-content:space-between;align-items:center;z-index:100;border-bottom:1px solid var(--border-color)}.logo{font-size:2rem;color:var(--text-primary);font-weight:400;letter-spacing:-.02em;opacity:.8}.navbar{display:flex;gap:3rem}.navbar a{color:var(--text-primary);opacity:.5;font-size:1.4rem;text-decoration:none;transition:all .3s ease}.navbar a:hover,.navbar a.active{opacity:1}.home{background:var(--background-primary);position:relative;display:flex;flex-direction:column;min-height:100vh;padding:15rem 15% 10rem;align-content:center;justify-content:center}.home:before{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--border-color) 1px,transparent 1px),linear-gradient(to bottom,var(--border-color) 1px,transparent 1px);background-size:3rem 3rem;pointer-events:none;z-index:0}.home .home-content{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:4rem 0}.home .home-content h1{font-size:4.2rem;font-weight:400;line-height:1.2;margin-bottom:2.5rem;letter-spacing:-.02em;opacity:.8}.home-content h3{font-size:2.8rem;margin-bottom:2.5rem;font-weight:400;opacity:.7;letter-spacing:-.01em}.home-content p{font-size:1.8rem;font-weight:400;opacity:.7;margin-bottom:4rem;line-height:1.8;max-width:100%}.nav-boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;margin-top:5rem}.nav-box{background:#ffffff05;border:1px solid var(--border-color);padding:3.2rem;transition:all .3s ease;cursor:pointer;text-decoration:none;color:var(--text-primary)}.nav-box:hover{background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.nav-box h3{font-size:2.2rem;font-weight:400;margin-bottom:1.5rem;opacity:.9}.nav-box p{font-size:1.6rem;opacity:.6;line-height:1.6;margin:0}.home-img{width:100%;aspect-ratio:1;border-radius:0;overflow:hidden;transition:all .3s ease;background:#ffffff05;border:1px solid var(--border-color)}.home-img img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:all .3s ease}.home-img:hover{background:#ffffff08;border-color:var(--border-color)}.social-icon{display:flex;gap:2rem;margin-bottom:4rem}.social-icon a{display:inline-flex;justify-content:center;align-items:center;width:4.2rem;height:4.2rem;background:#ffffff05;border:1px solid var(--border-color);font-size:2rem;color:var(--text-primary);opacity:.7;transition:all .3s ease}.social-icon a:hover{opacity:1;background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.btn{display:inline-block;padding:1.2rem 2.4rem;background:#ffffff08;border:1px solid var(--border-color);border-radius:4px;font-size:1.6rem;color:var(--text-primary);opacity:.8;transition:all .3s ease}.btn:hover{opacity:1;background:#ffffff0d;border-color:var(--border-color);transform:translateY(-2px)}.typing-text{font-size:2.8rem;font-weight:600;min-width:320px;position:relative}.typing-span{position:relative}.typing-span:before{content:"Student";color:var(--text-primary);animation:words 20s infinite}.typing-span:after{content:"";background:var(--background-primary);position:absolute;width:calc(100% + 8px);height:100%;border-left:3px solid var(--background-primary);right:-8px;animation:cursor .6s infinite,typing 20s steps(14) infinite}@keyframes cursor{to{border-left:3px solid var(--text-secondary)}}@keyframes words{0%,20%{content:"Web Developer"}21%,40%{content:"Software Engineer"}41%,60%{content:"Data Analyst"}61%,80%{content:"Web Developer"}81%,to{content:"Software Engineer"}}@keyframes typing{10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{width:0}5%,20%,25%,40%,45%,60%,65%,80%,85%{width:calc(100% + 8px)}}.projects{background:var(--background-secondary);padding:15rem 15% 10rem}.heading{text-align:left;font-size:3.2rem;font-weight:400;margin-bottom:4rem;opacity:.8}.projects-container{display:flex;gap:3rem;max-width:1200px;margin:0 auto}.projects-nav{display:flex;flex-direction:column;gap:0;border-right:1px solid var(--border-color);min-width:200px}.project-nav-btn{background:#ffffff05;border:1px solid var(--border-color);border-right:none;padding:1.2rem 2.4rem;font-size:1.6rem;color:var(--text-primary);opacity:.7;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.project-nav-btn:not(:last-child){border-bottom:none}.project-nav-btn:hover{opacity:.9;background:#ffffff08;border-color:var(--border-color);transform:translate(2px)}.project-nav-btn.active{opacity:1;background:#ffffff0d;border-color:var(--border-color);border-right:1px solid var(--background-secondary)}.projects-content{flex:1;position:relative;min-height:400px}.project-pane{display:none;opacity:0;transform:translate(10px);transition:all .3s ease;position:absolute;width:100%;top:0;left:0}.project-pane.active{display:block!important;opacity:1;transform:translate(0);position:relative}.project-box{background:#ffffff05;border:1px solid var(--border-color);padding:3rem;transition:all .3s ease;height:100%}.project-box:hover{background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.project-header{margin-bottom:2rem}.project-header h2{font-size:2rem;font-weight:400;opacity:.9}.project-info{font-size:1.4rem;font-weight:400;opacity:.7;line-height:1.6;list-style-position:inside;margin-bottom:2rem}.project-info li{margin-bottom:1.5rem}@media(max-width:768px){.projects-container{flex-direction:column}.projects-nav{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border-color);min-width:100%;padding-bottom:1rem}.project-nav-btn{white-space:nowrap;border:1px solid var(--border-color);border-bottom:none}.project-nav-btn.active{border-bottom:1px solid var(--background-secondary)}.project-links{flex-direction:column}.project-links .btn{width:100%;text-align:center}}.skills{background:var(--background-primary);padding:10rem 15%}.skills .container{background:transparent;padding:0;width:100%;margin:0;box-shadow:none;border:none}.skills .container .row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.skills .container .bar{background:#ffffff05;border:1px solid var(--border-color);padding:2rem;transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}.skills .container .bar:hover{background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.skills .container .bar .info{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.skills .container .bar .info img{width:60px;height:60px;object-fit:contain;opacity:.8}.skills .container .bar .info span{font-size:1.4rem;font-weight:400;opacity:.7}.experience{background:var(--background-secondary);padding:10rem 15%}.experience-box{background:#ffffff05;border:1px solid var(--border-color);padding:3rem;margin-bottom:3rem;transition:all .3s ease;opacity:1;display:block;height:100%}.experience-box:hover{background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.experience-box .tag{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.experience-box .tag h2{font-size:2rem;font-weight:400;opacity:.9}.experience-box .tag .role{display:flex;flex-direction:column}.experience-box .tag .company{font-size:1.3rem;font-weight:400;opacity:.6;margin-top:.4rem}.experience-box .tag .date{font-size:1.4rem;opacity:.7;font-weight:400}.experience-info{font-size:1.4rem;font-weight:400;opacity:.7;line-height:1.6}.experience-info li{margin-bottom:1.5rem}#tutor,#support{display:none}#university-tab:checked~#university,#tutor-tab:checked~#tutor,#support-tab:checked~#support{display:block}.experience-tabs input[type=radio]{display:none}.contact{background:var(--background-primary);padding:10rem 15%}.contact form{max-width:70rem;margin:0 auto}.contact form .input-box input,.contact form textarea{width:100%;padding:1.5rem;font-size:1.4rem;color:var(--text-primary);background:#ffffff05;border:1px solid var(--border-color);margin:1rem 0;resize:none;transition:all .3s ease}.contact form .input-box input:focus,.contact form textarea:focus{background:#ffffff08;border-color:var(--border-color)}.contact form .btn{background:#ffffff05;border:1px solid var(--border-color);padding:1.2rem 2.4rem;font-size:1.4rem;color:var(--text-primary);opacity:.8;transition:all .3s ease;cursor:pointer}.contact form .btn:hover{background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px);opacity:1}.footer{background:var(--background-secondary);padding:4rem 15%;border-top:1px solid var(--border-color)}.footer .social{text-align:center;padding-bottom:2rem}.footer .social a{font-size:1.8rem;color:var(--text-primary);opacity:.7;margin:0 1rem;transition:all .3s ease}.footer .social a:hover{opacity:1;transform:translateY(-2px)}.footer ul{margin:2rem 0;text-align:center}.footer ul li{display:inline-block;margin:0 1rem}.footer ul li a{color:var(--text-primary);opacity:.7;font-size:1.4rem;transition:all .3s ease}.footer ul li a:hover{opacity:1}.footer .copyright{text-align:center;font-size:1.4rem;opacity:.6}@media(max-width:1150px){.home .home-content h3{font-size:2.6rem}}@media(max-width:991px){.home{padding:12rem 10% 8rem}.nav-boxes{grid-template-columns:1fr}}@media(max-width:768px){.home{padding:10rem 5% 6rem}.home .home-content h1{font-size:3.4rem}.home-content h3{font-size:2.2rem}.home-content p{font-size:1.6rem}.nav-box{padding:2.8rem}.nav-box h3{font-size:2rem}}@media(max-width:600px){.navbar{display:none}.home{padding:10rem 5% 6rem}}@media screen and (max-width:750px){.skills .container{margin:0;padding:1rem;width:100%}.skills .container .row{grid-template-columns:repeat(2,1fr);gap:1rem}.skills .container .bar{padding:10;margin:0 .5rem}.skills .container .bar .info img{width:60px;height:60px}.skills .container .bar .info span{font-size:1.6rem}}@media screen and (max-width:600px){.experience-box{padding:2rem}}#theme-switch{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center}#theme-switch svg{width:24px;height:24px;fill:var(--text-primary);opacity:.7;transition:opacity .3s ease}#theme-switch:hover svg{opacity:1}#theme-switch svg:last-child{display:none}.lightmode #theme-switch svg:first-child{display:none}.lightmode #theme-switch svg:last-child{display:block}.experience-tabs{max-width:1000px;margin:0 auto}.experience-tabs .tab-buttons{display:flex;gap:0;margin-bottom:3rem;border-bottom:1px solid var(--border-color)}.experience-tabs .tab-btn{background:#ffffff05;border:1px solid var(--border-color);border-bottom:none;padding:1.2rem 2.4rem;font-size:1.6rem;color:var(--text-primary);opacity:.7;cursor:pointer;transition:all .3s ease;position:relative;margin-bottom:-1px}.experience-tabs .tab-btn:not(:last-child){border-right:none}.experience-tabs .tab-btn:hover{opacity:.9;background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.experience-tabs .tab-btn.active{opacity:1;background:#ffffff0d;border-color:var(--border-color);border-bottom:1px solid var(--background-secondary)}.experience-tabs .tab-content{position:relative;min-height:400px;height:100%}.experience-tabs .tab-pane{display:none;opacity:0;transform:translateY(10px);transition:all .3s ease;position:absolute;width:100%;top:0;left:0}.experience-tabs .tab-pane.active{display:block!important;opacity:1;transform:translateY(0);position:relative}.projects-tabs{max-width:1000px;margin:0 auto}.projects-tabs .tab-buttons{display:flex;gap:0;margin-bottom:3rem;border-bottom:1px solid var(--border-color)}.projects-tabs .tab-btn{background:#ffffff05;border:1px solid var(--border-color);border-bottom:none;padding:1.2rem 2.4rem;font-size:1.6rem;color:var(--text-primary);opacity:.7;cursor:pointer;transition:all .3s ease;position:relative;margin-bottom:-1px}.projects-tabs .tab-btn:not(:last-child){border-right:none}.projects-tabs .tab-btn:hover{opacity:.9;background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px)}.projects-tabs .tab-btn.active{opacity:1;background:#ffffff0d;border-color:var(--border-color);border-bottom:1px solid var(--background-secondary)}.projects-tabs .tab-content{position:relative;min-height:400px;height:100%}.projects-tabs .tab-pane{display:none;opacity:0;transform:translateY(10px);transition:all .3s ease;position:absolute;width:100%;top:0;left:0}.projects-tabs .tab-pane.active{display:block!important;opacity:1;transform:translateY(0);position:relative}.project-links{display:flex;gap:1rem;margin-top:2rem}.project-links .btn{background:#ffffff05;border:1px solid var(--border-color);padding:1.2rem 2.4rem;font-size:1.4rem;color:var(--text-primary);opacity:.8;transition:all .3s ease;cursor:pointer;text-decoration:none}.project-links .btn:hover{background:#ffffff08;border-color:var(--border-color);transform:translateY(-2px);opacity:1}@media(max-width:768px){.experience-tabs .tab-buttons,.projects-tabs .tab-buttons{flex-wrap:wrap;gap:1rem;border-bottom:none}.experience-tabs .tab-btn,.projects-tabs .tab-btn{text-align:left;border:1px solid var(--border-color);margin-bottom:0}.experience-tabs .tab-btn.active,.projects-tabs .tab-btn.active{border-bottom:1px solid var(--border-color)}.project-links{flex-direction:column}.project-links .btn{width:100%;text-align:center}}.project-skills{font-style:italic;font-weight:400;opacity:.6;font-size:1.3rem;margin-top:.5rem}
