/* Globale CSS-Variablen deklarieren. :root steht für den Selektor, mit höherer Spezifität. */ :root { --slate: #2d3748; --teal: #0d9488; --creme: #fffcf5; } .slim { font-size:1.0rem; line-height:1.4em; } html { border-color: var(--teal); border-style: solid; border-width: 4px 0 4px 0; overflow-y: scroll; } body { font-family: "Inter var", system-ui, Roboto, Arial, sans-serif; background-color: var(--creme); color: var(--slate); line-height: 1.6em; font-size: 1.1em; margin: 0; padding: 0 1em; } article { max-width: 640px; margin: 0 auto; } a { color: var(--teal); } h1,h2,h3,h4,h5,h6 { color: var(--slate); line-height: 1; } code { font-family: "Fira Code", "Consolas", "Monaco", monospace; } p code, li code { font-family: "Fira Code", "Consolas", "Monaco", monospace; font-size: 1.25em; } pre code { font-size: 1em; line-height: 1em; } pre[class*="language-"], code[class*="language-"] { font-size: 1rem; } blockquote { border-left: 4px solid var(--teal); padding-left: 1em; } hr { border: 1px solid var(--slate); } table { border-collapse: collapse; width: 100%; } th,td { border: 1px solid var(--slate); padding: 8px; } img { max-width: 100%; height: auto; border-radius: 5px; } /* Header styles */ header { overflow: hidden; margin-bottom: 1.5rem; } header a { background-color: var(--teal); float: left; display: block; color: var(--creme); text-align: center; padding: 0px 10px; text-decoration: none; font-size: 17px; font-weight: bold; } header a:first-child { border-bottom-left-radius: 5px; } header a:last-child { border-bottom-right-radius: 5px; } label { display: block; margin-bottom: 0.5em; font-size: 1.2em; } button { background-color: var(--teal); color: white; padding: 0.5em 1em; border: none; border-radius: 4px; font-size: 1em; cursor: pointer; width: 100%; } button:hover { opacity: 0.9; } button:active { opacity: 0.8; } [hidden] { display: none; } /* Footer styles */ footer { overflow: hidden; margin-top: 1.5em; } footer a { background-color: var(--teal); float: left; display: block; color: var(--creme); text-align: center; padding: 0px 10px; text-decoration: none; font-size: 17px; font-weight: bold; } footer a:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } footer a:last-child { border-top-left-radius: 5px; border-top-right-radius: 5px; float: right;} /* Link styles */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; cursor: pointer; } svg { fill: var(--teal); } canvas { max-width: 100%; height: auto; } .hint { cursor: pointer; color: var(--teal); position: relative; } .hint::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--slate); color: white; font-size: 0.7rem; padding: 2px 5px; border-radius: 2px; white-space: pre; opacity: 0; visibility: hidden; line-height: 1.5; } .hint:hover::after { opacity: 1; visibility: visible; }