:root { color-scheme: light dark; } * { margin: 0; padding: 0; font-family: Verdana, Tahoma, sans-serif; } body { background-color: light-dark(#eee, #333); background-image: linear-gradient(90deg, transparent 134px, light-dark(#eac, #66c) 134px, light-dark(#eac, #66c) 137px, transparent 137px), repeating-linear-gradient(0deg, light-dark(#ccc, #626262) 1px, light-dark(#ccc, #626262) 3px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, light-dark(#ccc, #626262) 1px, light-dark(#ccc, #626262) 3px, transparent 1px, transparent 20px); background-size: 100% 100%; background-attachment: fixed; color: light-dark(#111, #eee); } a { text-decoration: none; } a:link { color: light-dark(#f88, #77f); } a:visited { color: light-dark(#f68, #97f); } a:hover { color: light-dark(#95d, #fad); } .wrapper { margin: 10px; display: flex; justify-content: center; max-width: 100%; flex-wrap: wrap; } .header { display: flex; margin-top: 20px; } .header h1 { font-size: 40px; } .navigation { display: flex; margin: 20px 0px 20px 0px; } .navigation * { margin: 0px 12px 0px 12px; } .navigation a { font-size: 22px; font-weight: bold; background-color: light-dark(#eee, #333); } .navigation button { background-color: light-dark(#ddd, #444); border: 1px solid light-dark(#224, #ede); border-radius: 10px; font-size: 18px; padding: 2px 4px 2px 4px; } .content { background-color: light-dark(#fff8ff, #595959); border: 2px solid light-dark(#224, #ede); border-radius: 20px; width: 60%; padding: 20px; } .content h1 { font-size: 35px; font-weight: normal; line-height: 40px; letter-spacing: -1px; } .content p { margin: 10px 0; font-size: 16px; line-height: 1.5; } .content ul, .content ol { margin: 20px; } .content li { font-size: 15px; line-height: 20px; } .content ul li { list-style-type: circle fill; } .content img { margin: 10px auto 10px auto; width: 50%; display: block; } .content .inlineimg { vertical-align: middle; margin: 0 0; display: inline; width: auto; } .content blockquote { padding-left: 1em; font-style: italic; border-left: solid 2px #555; } .content pre { border: 2px solid #ddd; border-radius: 5px; background-color: #fff; padding: 5px 5px; margin: 10px 0; } .content code *, .content code { font-family: monospace; font-size: 14px; color: #111; } .content p code { border: 1px solid #ddd; border-radius: 3px; background-color: #fff; padding: 2px; } .button, .stamp { margin: 5px 10px 5px 10px; display: flex; flex-wrap: wrap; } @media only screen and (max-width:1000px) { .content { width: 95%; } .content img { width: 80%; } }