:root {
  --pico-font-size: 90%;
}
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
header.container {
  padding: 0;
}
nav li {
  margin-right: 5px;
}
nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
nav > ul:nth-child(3) {
  justify-self: end;
}
h1 > a,
h2 > a,
a:has(button) {
  color: currentColor;
  text-decoration: none;
}
main a > button {
  width: 100%;
}
h1 img {
  height: 2em;
}
h1 > a {
  vertical-align: sub;
}
h1 > a:hover,
h2 > a:hover {
  text-decoration: underline var(--pico-primary);
}
article > * {
  margin-right: 10px;
}
article button,
article > div > form > button[type="submit"] {
  padding: 5px;
}
article > div > form > button[type="submit"] {
  margin: 0;
}
article h2 {
  display: inline-block;
}
article > div {
  display: flex;
  gap: 5px;
  align-items: center;
}
article > div > * {
  display: flex;
  gap: 5px;
  align-items: center;
}
article a {
  display: inline-block;
}
.msg {
  border-radius: var(--pico-border-radius);
  display: block;
  margin-bottom: 5px;
  text-align: center;
}
.msg-fail {
  --pico-mark-background-color: #d93526;
}
article > svg {
  float: left;
  width: 200px;
  height: 200px;
}
article:has(svg)::after {
  display: block;
  content: "";
  clear: both;
}
.centered-large-text {
  font-size: 1.2rem;
  text-align: center;
  margin: auto;
}
#passwordInputGrid {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 5px;
}
#showPasswordButton {
  min-width: 5em;
}
@media (max-width: 768px) {
  nav {
    grid-template-columns: auto 1fr;
  }
  nav > ul:first-child {
    grid-column: 1 / -1;
  }
  article > div:first-child {
    display: block;
  }
  article > div:first-child > * {
    display: inline-block;
  }
  article > a {
    display: inline-block;
  }
}