body { font-family: Arial, Helvetica, sans-serif; font-size:12px; } body,figure,img { padding:0; border:none; margin:0; } #switch:checked ~ p { background-color:green; } img { width:100%; height:auto; } picture { display:block; max-height:40vh; overflow:hidden; } #main-menu { text-align:center; } #main-menu ul { list-style:none; } #main-menu li { text-align: left; } #main-menu li a, #main-menu li span { color:black; text-decoration:none; font-size:1.1rem; } #main-menu li span { color:#666; } #main-menu .menu-label { font-size:1.5rem; color:black; text-decoration:none; font-weight:bold; display:inline-block; line-height:2rem; } .burger { float:left; margin: 3px 8px; } .burger b { display: block; width: 20px; height: 2px; margin-bottom: 5px; position: relative; background: #000; border-radius: 2px; z-index: 1; } .burger b:first-of-type { margin-top:5px; } #main-menu ul { display:none; } main, h1 { margin:1rem; padding:1rem; } /* .current ~ li { background-color:red; } .current + li { background-color:blue; } main > p { background-color:green; } .top-menu-item.current a { color:blue; } .top-menu-item a, .top-menu-item span { color:red; font-weight:bold; } .top-menu-item a { color:green; } */ #main-menu #switch:checked ~ ul { display:block; } /* */