article{max-width:30rem;margin:auto}article main,article header{padding-left:0;padding-right:0}article main>div{flex-direction:column;gap:1rem;display:flex}article details[open] summary{padding-bottom:.5rem}article details{flex:100%}article details summary{cursor:pointer}article details ul{flex-wrap:wrap;gap:.5rem;list-style:none;display:flex}article details li{display:flex}article details input[type=checkbox]{display:none}article details label{border:1px solid #ccc;border-radius:.25rem;padding:.5rem}article details label:hover{cursor:pointer}article details input[type=checkbox]:checked+label{color:#888}article details input[type=checkbox]:not(:checked)+label{background:#d9e1f0}textarea{resize:vertical;width:100%;height:10rem}*{box-sizing:border-box;--link:#36c;--link-hover:#3056a9;--link-visted:#6a60b0;--link-visted-hover:#534fa3;margin:0;padding:0}body{font-family:serif}header,footer,main{padding:1rem}a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover);text-decoration:underline}a:visited{color:var(--link-visted)}a:visited:hover{color:var(--link-visted-hover)}p{font-family:sans-serif;line-height:1.5}header{border-bottom:1px solid #ccc;flex-wrap:wrap;align-items:baseline;gap:1rem;display:flex}header h1{font-size:1.75rem}header h1 a,header h1 a:hover,header h1 a:visited,header h1 a:visited:hover{color:#000}header p{color:#666;font-family:inherit;font-size:1rem}header form{flex:100%}header input{border:1px solid #ccc;border-radius:.25rem;width:100%;padding:.5rem;font-size:1rem}header nav{margin-left:auto}header nav button{color:var(--link);background:0 0;border:none}header nav button:hover{color:var(--link-hover);cursor:pointer;text-decoration:underline}footer{border-top:1px solid #ccc}