header {
position: relative;
min-height: 4rem;
}
.logo {
position: absolute;
top: 2rem;
left: 1rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--text-light);
z-index: 1002;
}
.logo a {
text-decoration: none;
}
.menu-checkbox {
display: none;
}
.menu-toggle {
display: block;
position: absolute;
top: 2rem;
right: 1rem;
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 1001;
}
.menu-toggle div {
width: 100%;
height: 3px;
background-color: var(--text-light);
margin-top: 5px;
margin-bottom: 5px;
transition: 0.3s ease;
}
nav {
display: none;
flex-direction: column;
background-color: rgba(0,0,0,0.8);
position: absolute;
top: 5.5rem;
right: 1rem;
padding: 1rem;
border-radius: 0.5rem;
z-index: 1000;
}
nav a {
color: var(--text-light);
text-decoration: none;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
input[type="checkbox"]:checked ~ nav {
display: flex;
}
@media only screen and (min-width: 1024px) {
.menu-toggle {
display: none;
}
nav {
display: flex;
flex-direction: row;
background: none;
position: absolute;
top: 1rem;
right: 2rem;
padding: 0;
}
nav a {
margin-left: 2rem;
font-size: 0.95rem;
}
.logo {
top: 1rem;
left: 2rem;
font-size: 1.75rem;
}
}