.container{width:100%;margin:0 auto}section{padding:2rem 0}.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:15px;background:var(--background-color);color:var(--light-text)}.site-header .container{display:flex;justify-content:space-between;align-items:center;height:70px}.site-header.hide{transform:translateY(-100%);transition:transform .3s ease}.site-header{transform:translateY(0);transition:transform .3s ease}main{padding-top:100px}.logo img{height:70px;border-radius:100px;transition:transform .3s ease,opacity .3s ease}.logo img:hover{transform:scale(1.1);opacity:.8}.skip-link{position:absolute;top:-48px;left:8px;background:var(--primary-color);color:var(--light-text);padding:8px 16px;border-radius:4px;text-decoration:none;z-index:1001;transition:top .2s ease}.skip-link:focus{top:8px;color:var(--light-text)}.menu-toggle{margin:10px;display:flex;flex-direction:column;gap:5px;cursor:pointer;background:0 0;border:none;padding:0;transition:transform .3s ease,opacity .3s ease}.menu-toggle span{width:25px;height:3px;background:var(--light-text);transition:background-color .3s ease,transform .3s ease}.menu-toggle:hover{transform:scale(1.2)}.menu-toggle:hover span{background-color:var(--primary-color)}.menu-drawer{position:fixed;top:0;right:-100%;width:300px;height:100%;background:rgba(33,33,33,.8);box-shadow:-5px 0 10px rgba(0,0,0,.2);transition:right .3s ease;z-index:1000}.menu-drawer.open{right:0}.menu-drawer-content{display:flex;flex-direction:column;height:100%;padding:1rem}.menu-close{position:absolute;top:1rem;right:1rem;width:30px;height:30px;background:0 0;border:none;cursor:pointer;margin:0;padding:0;display:flex;justify-content:center;align-items:center;transition:transform .3s ease}.menu-close::before,.menu-close::after{content:'';position:absolute;width:24px;height:2px;background-color:var(--surface-panel);transition:transform .3s ease,background-color .3s ease}.menu-close::before{transform:rotate(45deg)}.menu-close::after{transform:rotate(-45deg)}.menu-close:hover{transform:rotate(90deg)}.menu-close:hover::before,.menu-close:hover::after{background-color:var(--primary-color)}.menu-links{padding-top:40px}.menu-links a{display:block;margin:1rem 0;font-size:1.2rem;color:var(--light-text);text-decoration:none}.menu-links a:hover{color:var(--primary-color)}.menu-socials{margin-top:20px;display:flex;justify-content:center;gap:20px}.menu-socials a{display:inline-block;margin:0 .5rem;color:var(--light-text);text-decoration:none}.menu-socials a svg{width:30px;height:30px}.menu-socials a svg path{fill:var(--light-text);transition:color .3s}.menu-socials a:hover svg path{fill:var(--primary-color)}