@font-face { font-family: "Prisma"; src: url(Prisma-MAX.woff2); } body { background: #e6c185; font-family: "arial", "sans-serif"; } .mono, pre, output, tt, code { font-family: "source code pro", "monospace"; } div.title { width: 100%; white-space: nowrap; padding: 1em; overflow: hidden; } div.title svg { display: inline; vertical-align: middle; } div.title .logo2 { display: inline; vertical-align: middle; text-align: center; margin: 2em; font-weight: bold; font-style: italic; font-size: 25px; } nav { display: flex; border-style: solid none solid none; border-width: 5px; border-color: white; width: 100%; white-space: nowrap; overflow: hidden; align-items: stretch; } nav * { display: flex; margin: 0; } nav a { color: black; font-weight: 600; text-align: center; text-decoration: none; padding-left: 1.5em; padding-right: 1.5em; align-items: center; } nav a:hover { background: #af9365; } nav .pad { flex-grow: 1; } nav .text { padding-top: 1em; padding-bottom: 1em; } nav img { align-items: center; border: 1px solid black; object-fit: none; } form fieldset { border: 5px solid white; border-radius: 1em; margin: 1em; padding: 0.5em 1em; } form fieldset legend { font-weight: bold; padding: 0.25em; background: #af9365; } form label { margin: 0; padding: 0.5ch; display: flex; } form label span { width: 30ch; } input[type='text'], input[type='password'] { flex: 1; } .tz select { padding: 0; margin: 0 0 0 1px; } button.show, button.hide { width: 6ch; padding: 0; margin: 0 0 0 1px; font-size: 70%; } button.show .hide { display: none; } button.hide .show { display: none; } button { width: 28ch; margin: 1em; padding: 0.25em; vertical-align: middle; font-family: "arial", "sans-serif"; font-size: 100%; } progress { display: block; width: 100%; margin: 0.5em 0; } output { display: none; } output.result { display: block; border: 2px solid black; margin: 1em; padding: 0.75em 1.25em; border-radius: 1em; white-space: pre-wrap; } .ok { background: #e0ffe0; } .err { background: #ffe0e0; }