/* The beach picture fills the window behind the page box; the colour shows
   while it loads. Phones that don't support fixed backgrounds scroll it along. */
body { font-family: sans-serif; background: #0f2a3a url(/static/background.svg) center / cover no-repeat fixed; color: #eee; display: flex; justify-content: center; align-items: flex-start; padding-top: 15vh; margin: 0; min-height: 100vh; box-sizing: border-box; }
/* Never wider than the screen, leaving a margin: padding is 2 x 2.5em. */
main { background: #16394d; padding: 2em 2.5em; border-radius: 8px; width: 20em; max-width: calc(100% - 6em); }
h1 { margin-top: 0; color: #ffcf6e; }
input, button { font-size: 1em; padding: .4em .6em; border-radius: 4px; border: 1px solid #3d6a80; }
input { display: block; width: 100%; box-sizing: border-box; margin: .4em 0 1em; background: #0f2a3a; color: #eee; }
button { background: #1fb5b0; color: #0f2a3a; font-weight: bold; border: none; cursor: pointer; width: 100%; }
button:hover:not(:disabled) { background: #ff8a65; }
button:disabled { opacity: .6; cursor: wait; }
.error { color: #ff8080; }
.tabs { display: flex; gap: .5em; margin-bottom: 1.2em; }
.tabs button { background: transparent; border: 1px solid #1fb5b0; color: #7fe0dc; }
.tabs button.active { background: #1fb5b0; color: #0f2a3a; }
.tabs button:hover:not(.active) { background: rgba(31, 181, 176, .2); }
.tabs button.active:hover { background: #1fb5b0; }
[hidden] { display: none !important; }
a { color: #7fe0dc; }
/* Back to the main page, above the heading of every other page. */
a.home { display: inline-block; margin-bottom: 1em; padding: .3em .8em; border: 1px solid #1fb5b0; border-radius: 4px; text-decoration: none; }
a.home:hover { background: rgba(31, 181, 176, .2); }
.check { display: flex; align-items: center; gap: .5em; margin-bottom: 1em; }
.check input { display: inline; width: auto; margin: 0; }
/* Pages of text (main page, terms) get a wider box. */
main:has(.wide) { width: 40em; }
.wide h2 { font-size: 1.1em; color: #ffcf6e; margin-bottom: .3em; }
.wide .note { color: #ff8a65; }
code { background: #0f2a3a; padding: .1em .3em; border-radius: 3px; }
/* The proof-of-work widget, in the page's colors. */
altcha-widget { display: block; margin-bottom: 1em; --altcha-max-width: 100%; --altcha-color-base: #0f2a3a; --altcha-color-base-content: #eee; --altcha-border-color: #3d6a80; --altcha-border-radius: 4px; --altcha-color-primary: #1fb5b0; --altcha-color-primary-content: #0f2a3a; --altcha-checkbox-border-color: #3d6a80; --altcha-spinner-color: #1fb5b0; }
/* Phones: less space around the box, so more is left for what's in it. */
@media (max-width: 30em) {
  body { padding-top: 1em; }
  main { padding: 1.5em 1.2em; max-width: calc(100% - 3.4em); }
}