header{background-color:var(--color-primary);color:var(--color-primary--text);display:flex;justify-content:space-between;& .logo{padding:1rem;margin:0;align-self:center}& nav{& ul{display:flex;list-style:none;& li{margin:0 5px;& a{color:var(--color-primary--text)}& a:hover{color:var(--color-secondary)}}}}}.hamb{cursor:pointer;float:right;padding:20px 15px;margin-bottom:0;align-self:center}.hamb-line{background:white;display:block;height:2px;position:relative;width:24px}.hamb-line::before,.hamb-line::after{background:white;content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out;width:100%}.hamb-line::before{top:5px}.hamb-line::after{top:-5px}.side-menu{display:none}.side-menu:checked ~ nav{max-height:100%;color:var(--color-primary--text);margin-top:57px;background-color:var(--color-primary);border-top:solid 1px white;& ul{display:block;& li{display:block;width:100%;padding:20px;margin:0;&:hover{background-color:var(--color-secondary)}& a{font-weight:600;&:hover{color:var(--color-secondary--text)}}}}}.side-menu:checked ~ .hamb .hamb-line{background:transparent}.side-menu:checked ~ .hamb .hamb-line::before{transform:rotate(-45deg);top:0}.side-menu:checked ~ .hamb .hamb-line::after{transform:rotate(45deg);top:0}body:has(.side-menu:checked){overflow:hidden}@media screen and (min-width:576px){header > nav{max-height:none;top:0;float:right;width:fit-content;background-color:transparent;align-self:center;margin-right:15px}.menu li{float:left}.menu a:hover{background-color:transparent}.hamb{display:none}}@media screen and (max-width:576px){header > nav{width:100%;height:100%;position:fixed;background-color:black;overflow:hidden;max-height:0;color:transparent;transition:max-height color .5s ease-out}}