/* Claudecraft website: shared look (background, text, links, the top-left header) */
/* your bg.png, repeated across the whole page */
html {
    background-color: #1e1e1e;
    background-image: url("bg.png");
    background-repeat: repeat;
}
body {
    margin: 0;
    padding: 0 0 48px;
    color: #e8e8e8;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
a { color: #a8a8ff; }
a:visited { color: #c4a8ff; }
a:hover { color: #d0d0ff; }
a:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }

/* top left: site name, links, account line */
header { padding: 8px 0 0 0; }
header h1 { margin: 0 0 10px; padding-left: 2px; font-size: 32px; color: #f0f0f0; }
header nav ul { margin: 0; padding-left: 50px; }
.account { margin: 10px 0 0 50px; }


@media (max-width: 600px) { header h1 { font-size: 26px; } }

/* login and register forms */
.form-page { max-width: 420px; margin: 60px auto 0; padding: 0 16px; }
.form-page h2 { margin: 0 0 16px; font-size: 28px; color: #f0f0f0; }
.form-page label { display: block; margin: 12px 0 4px; }
.form-page input {
    width: 100%; box-sizing: border-box; padding: 5px 7px; font: inherit;
    color: #e8e8e8; background: #111; border: 1px solid #777;
}
.form-page input:focus-visible { outline: 2px solid #ffd27a; outline-offset: 1px; }
.form-page button { margin-top: 14px; padding: 4px 18px; font: inherit; color: #111; background: #ddd; border: 1px solid #888; cursor: pointer; }
.form-page button:hover { background: #fff; }
.form-page .error { color: #ff6b6b; min-height: 1.5em; margin: 10px 0 0; }
.form-page .small { margin-top: 20px; font-size: 13px; color: #b8b8b8; }