:root {
  --pico-font-size: 1em;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

article *:last-child {
  margin-bottom: 0;
}

h3 {
  color: var(--pico-primary);
}

.subtitle {
  font-size: small;
  margin-top: calc(-1 * var(--pico-typography-spacing-vertical));
  margin-bottom: calc(2 * var(--pico-typography-spacing-vertical));
}

.is-secondary {
  background-color: rgb(243, 244, 246);
}
.is-secondary * {
  color: rgb(46, 51, 61);
}

.is-info {
  background-color: rgb(235, 249, 255);
}
.is-info * {
  color: rgb(0, 89, 128);
}

.is-success {
  background-color: rgb(239, 250, 245);
}
.is-success * {
  color: rgb(28, 90, 62);
}

.is-warning {
  background-color: rgb(255, 249, 235);
}
.is-warning * {
  color: rgb(117, 82, 0);
}

.is-error {
  background-color: rgb(255, 235, 239);
}
.is-error * {
  color: rgb(204, 0, 41);
}