body, html { margin: 0; padding: 0; } #main { box-sizing: border-box; min-height: 100vh; padding: 35px 10vw; color: #222; } * { font-family: 'Times New Roman', Times, serif; } *:not(h1, h2, h3, h4, h5, h6) { font-size: 1.02rem; } #return { position: absolute; top: 5px; left: 5px; } a { text-decoration: underline; } a:link { color: forestgreen; } a:visited { color: orchid; } p { margin: 7px 0px; line-height: 1.4; } h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; margin: 0; margin-bottom: 5px; } ul { margin: 0; padding-left: 40px; } input[type="checkbox"] { margin-left: 0; } #dark-mode { position: fixed; top: 5px; right: 5px; opacity: 0; } #dark-mode:checked ~ #main { background-color: #222; color: white; } label[for="dark-mode"] { position: fixed; top: 3px; right: 3px; font-size: 1.3rem; } #dark-mode + label[for="dark-mode"]::after { content: "🌙"; } #dark-mode:checked + label[for="dark-mode"]::after { content: "☀️"; }