:root[data-applied-mode="light"] { color-scheme: light; } :root[data-applied-mode="dark"] { color-scheme: 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, #69a) 134px, light-dark(#eac, #69a) 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, #9ce); } a:visited { color: light-dark(#f68, #68e); } a:hover { color: light-dark(#59d, #fad); } .wrapper { margin: 10px; display: flex; justify-content: center; max-width: 100%; flex-wrap: wrap; } .header { display: flex; margin-top: 20px; h1 { font-size: 40px; } } .navigation { display: flex; margin: 20px 0px 20px 0px; * { margin: 0px 12px 0px 12px; padding: 0px 2px 0px 2px; } a { font-size: 24px; font-weight: bold; background-color: light-dark(#eee, #333); } button { background-color: light-dark(#ddd, #444); border: 1px solid light-dark(#234, #ede); border-radius: 6px; font-size: 20px; padding: 2px 4px 2px 4px; } } .content { background-color: light-dark(#fff8ff, #444); border: 2px solid light-dark(#234, #ede); border-radius: 20px; width: 60%; padding: 20px; h1 { font-size: 35px; font-weight: normal; line-height: 40px; letter-spacing: -1px; } p { margin: 10px 0; font-size: 16px; line-height: 1.5; } ul, ol { margin: 20px; } li { font-size: 15px; line-height: 20px; } ul li { list-style-type: circle fill; } img { margin: 10px auto 10px auto; width: 50%; display: block; } .inlineimg { vertical-align: middle; margin: 0 0; display: inline; width: auto; } blockquote { padding-left: 1em; font-style: italic; border-left: solid 2px #555; } pre { border: 2px solid #ddd; border-radius: 5px; background-color: #fff; padding: 5px 5px; margin: 10px 0; } code *, code { font-family: monospace; font-size: 14px; color: #111; } 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%; } }