:root {
  --error-color: var(--pico-color-red-700);
  --error-background: var(--pico-color-red-50);
  --success-color: var(--pico-color-green-700);
  --success-background: var(--pico-color-green-50);
  --warning-color: var(--pico-color-orange-700);
  --warning-background: var(--pico-color-orange-50);
  --info-color: var(--pico-color-blue-700);
  --info-background: var(--pico-color-blue-50);
}

/* Hide content to everyone except screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body > main {
  padding: var(--vertical-padding) var(--pico-spacing);
  --vertical-padding: 2rem;
}

@media (min-width: 576px) {
  body > main {
    --vertical-padding: 3rem;
  }
}
@media (min-width: 768px) {
  body > main {
    --vertical-padding: 4rem;
  }
}
@media (min-width: 1024px) {
  body > main {
    --vertical-padding: 5rem;
  }
}

body > main > * {
  width: 100%;
}

body > main > h1 {
  text-align: center;
  margin-bottom: 2rem;
}

main.small-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main.small-main > * {
  max-width: 800px;
}

.alert {
  --pico-typography-spacing-vertical: 0.5rem;

  display: block;
  text-align: left;
  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical)
    var(--pico-block-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
}

article header h1,
article header h2,
article header h3,
article header h4,
article header h5,
article header h6 {
  margin-bottom: 0;
}

.alert > h1,
.alert > h2,
.alert > h3,
.alert > h4,
.alert > h5,
.alert > h6 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-top: 0;
}

.alert > :last-child {
  margin-bottom: 0;
}

.alert.alert-error {
  background: var(--error-background);
  border: 2px solid var(--error-color);
}

.alert.alert.alert-error * {
  color: var(--error-color);
}

.alert.alert-success {
  background: var(--success-background);
  border: 2px solid var(--success-color);
}

.alert.alert.alert-success * {
  color: var(--success-color);
}

.alert.alert-warning {
  background: var(--warning-background);
  border: 2px solid var(--warning-color);
}

.alert.alert.alert-warning * {
  color: var(--warning-color);
}

.alert.alert-info {
  background: var(--info-background);
  border: 2px solid var(--info-color);
}

.alert.alert.alert-info * {
  color: var(--info-color);
}

.header {
  --pico-spacing: 0.5rem;
  --pico-block-spacing-vertical: 0.5rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  position: sticky;
  top: 0;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  flex-wrap: wrap;
}

.header .header__brand-name {
  color: var(--pico-h1-color);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.125;
  margin-bottom: 0;
  --pico-text-decoration: none;
}

.header .header__brand-logo {
  margin-right: 0.5rem;
  max-height: 3rem;
}

.header + main.container {
  --header-spacing-height: calc(var(--pico-spacing) * 2);
  --nav-spacing-height: calc(var(--pico-nav-element-spacing-vertical) * 2);
  --nav-line-height: calc(var(--pico-line-height * 1rem));
  --header-height: calc(
    var(--header-spacing-height) +
    var(--nav-spacing-height) +
    var(--header-height)
  );

  padding-block: calc(var(--pico-block-spacing-vertical) * 3);
  height: calc(100vh - var(--header-height));
}

.badge {
  display: inline-block;
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-color-zinc-150);
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  height: fit-content;
  min-width: fit-content;
}

.badge.badge-error {
  color: var(--error-color);
  background: var(--error-background);
}

.badge.badge-success {
  color: var(--success-color);
  background: var(--success-background);
}

.badge.badge-warning {
  color: var(--warning-color);
  background: var(--warning-background);
}

.badge.badge-info {
  color: var(--info-color);
  background: var(--info-background);
}

nav {
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  nav {
    margin-top: 0;
  }
}

.hint-text {
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: var(--pico-color-zinc-550);
}