html{scroll-behavior:smooth}body{display:flex;flex-direction:column;background-color:#f1f7ed;margin:0;width:auto;height:100%;font-family:Georgia,'Times New Roman',Times,serif;padding:0;overflow-x:hidden}main{flex:1}div.header{display:flex;justify-content:center;align-items:center;position:relative;background-color:#39da03;font-weight:bolder;color:#333;text-decoration:underline;text-align:center;margin:0;font-size:30px;border-bottom:2px solid #333;height:80px;width:100%;max-width:none;padding-top:20px;padding-bottom:20px}#title{margin:0;text-align:center;display:flex;justify-content:center;align-items:center;height:100%;font-size:24px}.navBar{position:absolute;border:#333;height:325px;width:0;z-index:1;top:0;left:0;background-color:#e8e8e8;overflow-x:hidden;padding-top:60px;padding-bottom:25px;transition:0.5s;box-shadow:5px 5px 10px #333;font-size:20px}.navBar a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#333;display:block;transition:0.3s}.navBar a:hover{color:#39da03;text-decoration:underline}.navBar .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}.openbtn{position:absolute;left:40px;transition:transform 0.2s ease box-shadow 0.2s ease;font-size:40px;cursor:pointer;background-color:#39da03;color:#333;padding:10px 15px;border:none}.openbtn:active{transform:translateY(6px);box-shadow:0 2px 5px rgb(0 0 0 / .2)}.openbtn:hover{background-color:#333;color:#fff;border-radius:5px;transition-duration:0.4s}.footer{display:flex;justify-content:center;align-items:center;gap:15px;background-color:#39da03;color:#333;font-weight:bolder;margin-top:auto;width:100%;text-align:center;padding:10px;border-top:2px solid #000;text-decoration:none;font-size:large}.footer a{color:#333;text-decoration:none}.footer a:hover{text-decoration:underline}section{padding:20px;margin:20px;background-color:#fff;border-radius:5px;box-shadow:1px 1px 3px #454545}section h2{color:#333;text-align:center;text-decoration:underline}@media only screen and (max-width:600px){header,footer{padding:10px}.navbar{display:block;text-align:center;margin:5px 0}section{padding:10px;margin:10px}}.projects-container{display:flex;text-align:center;padding:auto;justify-content:space-between;position:relative}.projBtn{color:#333;background-color:#f1f7ed;border:1px solid #333;color:#000;padding:15px;display:inline-block;text-align:center;font-size:24px;cursor:pointer;margin:auto;height:100px;min-width:none;width:200px;box-shadow:3px 3px 3px #454545;border-radius:5px}.projBtn:hover{transition-duration:0.4s;background-color:#39da03;color:#333}.projBtn::active{transform:translateY(6px);box-shadow:0 2px 5px rgb(0 0 0 / .2)}#project1::before{content:"JavaScript Events"}#project2::before{content:"Registration Form"}#project3::before{content:"Web Storage API"}#project4::before{content:"Group Project"}.dark-mode .projBtn{background-color:#f1f7ed;color:#333}p{text-align:left;font-size:17px;color:#333}.dark-mode p{color:#fff}form{display:flex;flex-direction:column;align-items:center;background-color:#283e3c;color:#fff;margin:auto;padding:25px;width:50%;font-family:Arial,Helvetica,sans-serif;font-weight:700;box-shadow:5px 5px 5px #454545;border-radius:10px}h3{text-decoration:underline;font-weight:bolder;padding-bottom:10px}.submit{background-color:whitesmoke;font-weight:700;width:70px;border:none;padding:10px;margin:5px;border-radius:10px;box-shadow:3px 3px 5px #454545}.submit:hover{background-color:lightgray;font-weight:700;padding:10px;text-align:center;box-shadow:3px 3px 5px #454545}.reset{background-color:whitesmoke;font-weight:700;width:70px;border:none;padding:10px;margin:5px;border-radius:10px;box-shadow:3px 3px 5px #454545}.reset:hover{background-color:lightgray;font-weight:700;padding:10px;margin:5px;border-radius:10px;box-shadow:3px 3px 5px #454545}.tel{width:100px}textarea{width:60%;height:150px;padding:12px;box-sizing:border-box;border:2px solid #000;border-radius:10px;resize:none;box-shadow:2px 2px 3px #454545;align-items:center}input[type="text"],input[type="email"],input[type="tel"]{width:60%;padding:5px;box-sizing:border-box;border:2px solid #000;border-radius:10px;box-shadow:2px 2px 3px #454545;margin:5px;font-size:16px;font-family:Arial,Helvetica,sans-serif;font-weight:700;align-items:flex-start}label{display:inline-flex;align-items:center;margin-right:15px;font-size:16px}.checkbox-container{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-bottom:15px}input[type="checkbox"]{width:15px;height:15px;margin-right:5px;accent-color:#39da03}.dark-mode{background-color:#000}.dark-mode section{background-color:#444;color:#fff}.dark-mode .navBar{background-color:#283e3c;color:#fff}.dark-mode .navBar a{color:#fff}.dark-mode .navBar a:hover{color:#39da03}.dark-mode footer{background-color:#333;color:#fff}.dark-mode .header{background-color:#333;color:#fff}.dark-mode h1{color:#fff}.dark-mode h2{color:#fff}.dark-mode button{background-color:#333;color:#fff;border:none}.dark-mode button:hover{background-color:#39da03;color:#333}.dark-mode button:active{transform:translateY(6px)}.dark-mode .button::after{color:#fff}.dark-mode .button:hover::after{color:#fff}#lightSwitch{position:absolute;background-color:#39da03;color:#fff;border:none;padding:10px 20px;cursor:pointer;font-size:16px;border-radius:5px;top:40px;right:60px;z-index:1000;transition:transform 0.2s ease box-shadow 0.2s ease;font-weight:bolder}#lightSwitch:hover{background-color:#333;color:#fff;transition-duration:0.4s;content:"Off";text-decoration:underline}#lightSwitch:active{transform:translateY(6px);box-shadow:0 2px 5px rgb(0 0 0 / .2);content:"Off"}.dark-mode #lightSwitch{background-color:#333;color:#fff;content:"On"}.dark-mode #lightSwitch:hover{background-color:#39da03;color:#333;transition-duration:0.4s;content:"Off"}.dark-mode #lightSwitch:active{transform:translateY(6px);box-shadow:0 2px 5px rgb(115 115 115 / .2);content:"Off"}.dark-mode form{color:#333;background-color:#f1f7ed}#lightSwitch::before{content:"On";color:#333}#lightSwitch:hover::before{content:"Off";color:#fff}.dark-mode #lightSwitch::before{content:"Off";color:#fff}.dark-mode #lightSwitch:hover::before{content:"On";color:#333;text-decoration:underline}.dark-mode #lightSwitch:active::before{content:"Off";color:#fff}.dark-mode .header{color:#39da03}.dark-mode h1{color:#39da03}.dark-mode h2{color:#39da03}.dark-mode .footer{color:#39da03}.dark-mode .footer a{color:#39da03}.dark-mode .footer p{color:#39da03}.dark-mode #projBtn{background-color:#333;color:#fff}.skills-container{text-align:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;gap:20px;padding:20px}.skills-container h2{text-align:center;text-decoration:underline;font-weight:bolder;padding-bottom:10px}.skills-container ul{list-style:none;padding:0;margin:0;width:200px;text-align:center;background-color:#f1f7ed;border:1px solid #333;border-radius:5px;box-shadow:2px 2px 5px rgb(0 0 0 / .2);padding-bottom:15px}.dark-mode .skills-container ul{background-color:#f1f7ed;color:#333}.hidden{display:none}#projectDetails{margin-top:20px;padding:20px;background-color:#f1f7ed;border:1px solid #333;border-radius:5px;box-shadow:2px 2px 5px rgb(0 0 0 / .2)}.dark-mode #projectDetails p{background-color:#f1f7ed;color:#333}#reference1,#reference2{color:#333}.dark-mode #reference1,.dark-mode #reference2{color:#fff;text-decoration:underline}