.sidebar{width:25vw;padding-left:9vw;padding-right:1vw;padding-top:5vh;background-color:#303641;color:#f0f0f0bd;position:fixed;height:100%;overflow:auto;left:0;top:0;box-sizing:border-box}.sidebar img.profile-photo{width:150px;height:auto;border-radius:50%;border:2px solid #ccc;padding:5px;display:block;margin:0 auto 10px;object-fit:cover}.sidebar p{text-align:center}.sidebar ul{list-style-type:none;padding:0}.sidebar ul li{margin:10px 0}.sidebar ul li a{text-decoration:none;color:#007bff;font-weight:700;display:block;padding:5px;border:1px solid transparent;border-radius:5px;transition:background-color .3s ease,border-color .3s ease}.sidebar ul li a:hover{background-color:#e0e0e0;border-color:#007bff}.sidebar ul li p{margin:10px 0;text-align:center}@media (max-width: 768px){.sidebar{width:100%;position:relative;padding:10px}.sidebar ul{display:flex;flex-direction:column;align-items:center}.sidebar ul li{margin:5px 0}.sidebar ul li p{margin-top:10px}.sidebar ul li:last-child{margin-top:10px}}.smart-scroll-sidebar{width:25vw;padding-right:9vw;padding-left:1vw;padding-top:5vh;background-color:#303641;color:#f0f0f0bd;position:fixed;height:100%;overflow:auto;right:0;top:0;box-sizing:border-box}.smart-scroll-sidebar ul{list-style-type:none;padding:0}.smart-scroll-sidebar ul li{margin:10px 0}.smart-scroll-sidebar ul li a{text-decoration:none;color:#007bff;font-weight:700;display:block;padding:5px;border:1px solid transparent;border-radius:5px;transition:background-color .3s ease,border-color .3s ease}.smart-scroll-sidebar ul li a:hover{background-color:#e0e0e0;border-color:#007bff}.smart-scroll-sidebar .sub-links{margin-left:20px;list-style-type:none}.smart-scroll-sidebar .sub-links li a{font-size:.9em;font-weight:400}.smart-scroll-sidebar .sub-links li a:hover{background-color:#d0d0d0;border-color:#0056b3}@media (max-width: 768px){.smart-scroll-sidebar{width:100%;position:relative;height:auto;padding:10px;text-align:center;border-left:none;border-top:1px solid #ccc}.smart-scroll-sidebar ul{display:flex;flex-direction:column;align-items:center}.smart-scroll-sidebar ul li{margin:5px 0}.smart-scroll-sidebar .sub-links{margin-left:0}.smart-scroll-sidebar .sub-links li a{font-size:.8em}}body{font-family:Arial,sans-serif;padding-right:10vw;padding-left:10vw;margin:0;box-sizing:border-box;display:flex;flex-direction:column;height:100vh;background-color:#303641;color:#f0f0f0bd}.app{display:flex;flex-direction:column;height:100%}header{background-color:#3b414d;padding:1rem;color:#f0f0f0bd;text-align:center}.main-content{background-color:#3b414d;display:flex;flex:1;flex-direction:column;padding:20px;color:#f0f0f0bd}main{background-color:#3b414d;padding:1rem;margin-left:270px;margin-right:270px;flex:1;color:#f0f0f0bd}footer{background-color:#3b414d;padding:1rem;color:#f0f0f0bd;text-align:center}div{margin-bottom:1rem}h2{margin:.5rem 0}a{color:#61dafb;text-decoration:none}section{margin-bottom:20px}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.project-item{display:flex;align-items:center;border:1px solid #ccc;padding:10px;border-radius:8px}.project-text{margin-left:10px;flex:1}.project-image{max-width:150px;height:auto;display:block;object-fit:contain;border:1px solid #ccc;border-radius:4px}.project-item img{width:100%;height:auto;object-fit:cover}@media (max-width: 768px){.main-content{padding:10px}main{margin-left:0;margin-right:0;padding:10px}.sidebar,.smart-scroll-sidebar{width:100%;position:relative;padding:10px;text-align:center;height:auto}.sidebar{order:-2}.smart-scroll-sidebar{order:-1}.project-grid{grid-template-columns:1fr}.project-item{flex-direction:column;align-items:flex-start}.project-text{margin-left:0;margin-top:10px}}