header label {
    cursor: pointer;
    position:fixed;
    top:2em;
    right:2em;
    z-index:9999;
    display:none;
}


header input {
    display:none;

}

header span {
    background: white;
    display: block;
    height: 0.3em;
    position: relative;
    width: 1.8em;
}

.scrolled label span,
.scrolled label span::before,
.scrolled label span::after {
    background-color: #55B;
}

header span::before, header span::after{
    background: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .25s ease-out;
    width: 100%;
}

header span::before {
    top: 0.6em;
}
header span::after {
    top: -0.6em;
}


header input:checked ~ label span::before { 
    transform: rotate(-45deg); top:0;
} 

header input:checked ~ label span::after { 
    transform: rotate(45deg); top:0;
} 

header input:checked ~ label span { 
    background: transparent; 
}





header.scrolled input:checked ~ label span::before { 
   background-color:#55B;
} 

header.scrolled input:checked ~ label span::after { 
    background-color:#55B;
} 
















header input:checked ~ header-fixed {
    padding-left:0;
    height:26em;
}


header input:checked ~ header-fixed nav {
    margin-top:6em;
    margin-bottom:1em;
    display:grid;
    grid-template-columns:1fr;
    height:15em;
    top:0;
    position:fixed;
    align-items:center;
    justify-items:center;
    gap:0;
}

 



header input:checked ~  header-fixed  a {
    display:block;
    font-size:1.5em;

}

header input:checked ~  header-fixed hr {
    display:block;
   
}

header input:checked ~ header-margin {
height:25em;
   
}

header input:checked ~ header-content flex-home {
height:calc(90vh - 25em);
font-size:0.95em;
   
}




@media only screen and (max-width:750px) {
    
 header label {
     display:block;
 }
}