:root{
--white:  rgba(255,255,255,.8);
--black: rgba(0,0,0,1);
}
.header{
background-color: var(--white);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
position: sticky;
top: 0;
width: 100%;
min-height:60px;
padding-top: 10px;
z-index: 9;
} .logo{
display: inline-block;
margin-left: 10px;
}
svg.logo-svg  path:nth-child(1), 
svg.logo-svg path:nth-child(2), 
svg.logo-svg path:nth-child(3),
svg.logo-svg path:nth-child(4), svg.logo-svg path:nth-child(5), svg.logo-svg path:nth-child(6), svg.logo-svg path:nth-child(7) {
fill: #111;
} .nav{
width: 100%;
height: 100%;
position: fixed;
top:60px;
bottom:0;
background-color:#fff;
overflow: hidden;
}
.menu a {
display: block;
padding: 15px 2vw;
font-size:2em;
color:#222
}
.nav{
max-height: 0;
transition: max-height .3s ease-out;
} .hamb{
cursor: pointer;
float: right;
padding: 25px 20px;
}
.hamb-line {
background: var(--black);
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hamb-line::before,
.hamb-line::after{
background: var(--black);
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: 100vh;
}
.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;
}
@media (max-width: 767px) {
.nav{
height: 100vh;
}
}
@media (min-width: 768px) {
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
width: fit-content;
background-color: transparent;
}
.menu li{
float: left;
}
.hamb{
display: none;
}
.menu a{
font-size: 1em;
}
}
@media (prefers-color-scheme: dark) {
.header{
background-color: var(--black);
}
.menu a {
color:#fff
}
.nav{
background-color: var(--black);
}
.hamb-line {
background: var(--white);
}
.hamb-line::before,
.hamb-line::after{
background: var(--white);
}
svg.logo-svg  path:nth-child(1), 
svg.logo-svg path:nth-child(2), 
svg.logo-svg path:nth-child(3),
svg.logo-svg path:nth-child(4), svg.logo-svg path:nth-child(5), svg.logo-svg path:nth-child(6), svg.logo-svg path:nth-child(7) {
fill: #fff;
}
}