body{margin:0;font-family:Arial,Helvetica,sans-serif}.app-container{background-color:#0e1318;display:flex;justify-content:center;width:100%;flex-direction:column}.main-layout{display:flex}.left-panel{width:10%;background-color:#0e1318;position:relative}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translate(-50%);background:linear-gradient(to bottom,red,orange,#ff0,green,#0ff,#00f,violet);border-radius:2px}.timeline-circle{position:absolute;left:50%;transform:translate(-50%);width:20px;height:20px;background-color:#fff;border:4px solid #0E1318;border-radius:50%;z-index:2}.right-panel{width:90%;background-color:#0e1318;padding:20px;overflow-y:auto}.cards-container{display:flex;flex-direction:column;gap:30px}.card-container{padding:1rem;background-color:#1c2128;color:#fff;border-radius:3%;max-width:1200px;justify-content:left;display:flex;flex-direction:column}.card-image{display:flex;align-items:center;justify-content:center;position:relative;max-width:100%}img{max-width:100%;border-radius:.5%}.card-info{margin-top:1.5rem}.custom-button{position:absolute;bottom:.5rem;right:.5rem;background-color:#5a37a6;color:#fff;border:none;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:700}:root{--button-font-size: clamp(1rem, 2.5vw, 1.5rem);--button-padding: clamp(.5rem, 1vw, 1rem) clamp(1rem, 3vw, 2.5rem);--button-color: white;--button-bg: #5A37A6;--button-radius: 12px}.custom-button{padding:var(--button-padding);color:var(--button-color);background-color:var(--button-bg);border-radius:var(--button-radius);font-size:var(--button-font-size)}.title-div{color:#fff;margin-bottom:.5rem;margin-left:.5rem}h1,h2{margin:0}h1{font-weight:bolder}h2{font-weight:400}.tag{display:inline-block;padding:.3rem .6rem;margin:.2rem;font-size:.85rem;font-weight:500;color:#fff;border-radius:12px;background-color:#555;text-transform:uppercase}.html{background-color:#e44d26}.css{background-color:#264de4}.php{background-color:#8892be}.javascript{background-color:#f0db4f;color:#323330}.react{background-color:#61dafb;color:#20232a}.bootstrap{background-color:#7952b3}.mysql{background-color:#00758f;color:#fff}.typescript{background-color:#3178c6;color:#fff}.header{display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background-color:#0e1318;color:#fff;border-bottom:2px solid #5a37a6;flex-wrap:wrap}.header-icon{width:40px;height:40px;object-fit:contain}.header-title{font-size:1.8rem;font-weight:700;margin:0}.header-socials{display:flex;gap:1rem;margin-left:auto;align-items:center}.header-socials a{color:#fff;font-size:1.5rem;transition:color .3s ease}.header-socials a:hover{color:#5a37a6}.header-actions{display:flex;align-items:center;gap:16px}.language-toggle{background:none;border:none;cursor:pointer;padding:0}.language-toggle img{width:36px;height:24px;border-radius:4px;transition:transform .2s ease}.language-toggle:hover img{transform:scale(1.1)}@media (max-width: 600px){.header{justify-content:center;text-align:center}.header-icon{width:32px;height:32px}.header-title{font-size:1.5rem}.header-socials{margin-left:0;margin-top:.5rem}}