.ham-button{color:var(--color-light);justify-content:flex-end;padding:2rem;transition:background .3s;transition:opacity .3s ease}.ham-button .ham-icon span{background:var(--color-light)}.ham-button svg path{fill:var(--color-light)}.ham-icon{display:inline-block;height:20px;margin-left:8px;position:relative;width:24px}.ham-icon span{background:var(--color-light);height:2px;left:0;position:absolute;top:9px;transition:transform .3s ease,opacity .3s ease;width:100%}.ham-icon span:first-child{transform:translateY(-8px)}.ham-icon span:nth-child(3){transform:translateY(8px)}.ham-button.active .ham-icon span:first-child{transform:translateY(0) rotate(45deg)}.ham-button.active .ham-icon span:nth-child(2){opacity:0}.ham-button.active .ham-icon span:nth-child(3){transform:translateY(0) rotate(-45deg)}@media (prefers-reduced-motion:reduce){.ham-icon span{transition:none}}