body {
margin:0;
color: #565656;
font-family:sans-serif;
background-color:#f8fafc;
}
nav { 
    padding: 15px 20px;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    position: relative;
    border-bottom: solid 2px rgba(59, 59, 59, 0.1);
    font-family: monospace;
background-color:white;
}
nav a {
	text-decoration: none;
}
.brand { display: flex; align-items: center; gap: 10px; }
.nav-logo { width: 35px; height: 35px; }
.brand-name { 
    color: #565656; 
    font-weight: bold; 
    font-size: 1.2rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-toggle { display: none; }
.hamburger { cursor: pointer; padding: 10px; z-index: 100; }
.hamburger span, .hamburger span::before, .hamburger span::after {
    display: block; width: 25px; height: 3px; background: #565656;
    position: relative; transition: 0.3s;
}
.hamburger span::before { content: ""; top: -8px; }
.hamburger span::after { content: ""; top: 5px; }

.nav-links {
    position: absolute; top: 100%; left: 0; width: 100%;
text-align: center;
background: #fff;
flex-direction: column;
    display: none; /* Ukryte */
    z-index: 99;
    border-top: solid 2px;
box-shadow: 0 9px 10px #ddd;
}
.nav-links a { color: #565656; font-size: 1rem; font-weight: bold; border-bottom: solid 2px; padding: 10px 0 10px 0;}

#nav-toggle:checked ~ .nav-links { display: flex; }
#nav-toggle:checked ~ .hamburger span { background: transparent; }
#nav-toggle:checked ~ .hamburger span::before { top: 0; transform: rotate(45deg); }
#nav-toggle:checked ~ .hamburger span::after { top: -3px; transform: rotate(-45deg); }

@media (min-width: 768px) {
nav {
    padding: 0px 20px;
}
    .hamburger { display: none; }
    .nav-links { 
        position: static; flex-direction: row; display: flex !important; 
        background: none; padding: 0; width: auto; border: none; gap: 25px; padding: 20px 0; box-shadow: none;
    }
.nav-links a { padding: 0 0 2px 0; }
    .brand-name { font-size: 1.5rem; }
}