body { justify-content: center; max-width: 700px; padding: 2ex 2% 5ex 2%; margin: auto; font-family: monospace; color: #373f51; background-color: #fffde7; } h3 { margin-top: 2ex; } ul { margin: 0; padding-left: 1em; } li { margin: .5ex 10px .5ex 30px; padding-left: 1em; } li::marker { content: "·"; font-weight: bold; } li.plus::marker { content: "+"; color: green; } li.minus::marker { content: "-"; color: red; } li.snowman::marker { content: "☃️"; color: blue; } table { border-collapse: collapse; } thead, tbody { border: 1px solid black; } td, th { padding: .5ex 1em; text-align: center; } hr { border: 1px dashed gray; opacity: 20%; margin: 4ex auto; } a { text-decoration: none; color: #36599b; } a:hover { text-decoration: underline; } a:visited { color: #e26d5c; } .indent { text-align: justify; margin-left: 20px; } .sub { font-size: 80%; margin: .5ex 0em 1ex 4em; } .old { opacity: 50%; } pre { background-color: #f7f5e0; max-width: 700px; padding: 10px; text-align: justify; white-space: pre-wrap; } .code-container { position: relative; margin: 1em 0; } .copy-btn { position: absolute; bottom: 5px; right: 5px; padding: 4px 8px; font-size: 0.9em; cursor: pointer; font-family: monospace; color: #373f51; opacity: 0.7; background-color: #fffde7; border: 2px solid #797979a6; /* Adjust thickness and color */ border-radius: 2px; }