/* the pages' shared look (welcome page, login): colours, button, notices, footer; the header in header.css */
@import url("header.css");
:root {
    --teal: #349a89;
    --teal-dark: #005042;
    --ink: #1f2a30;
    --muted: #5f6b72;
    --line: #e3e8ea;
    --bg: #f6f8f8;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }  /* the same width with and without a scrollbar: the header does not shift between long and short pages */
body { margin: 0; font-family: Lato, system-ui, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.button { display: inline-block; padding: 9px 22px; border-radius: 999px; background: var(--teal); color: #fff; text-decoration: none; font-weight: 700; transition: background .15s; }
.button:hover, .button:focus { background: var(--teal-dark); color: #fff; text-decoration: none; }

.notice { margin: 24px auto 0; max-width: 1100px; padding: 0 24px; }
.notice div { padding: 14px 18px; border-radius: 10px; border-left: 4px solid; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.notice .warning, .notice .error { border-color: #d9534f; }
.notice .success { border-color: var(--teal); }
.notice .info { border-color: #3a87ad; }

footer { border-top: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 28px 24px; }
footer a { color: var(--teal); }