body {
  min-height: 100dvh;
  background: url('/assets/bg.jpg') center center;
  background-size: cover;
}

#login {
  padding-top: 2em;
  margin-inline: auto;
  max-inline-size: 300px;

  >h1 {
    text-align: center;
  }
}

input,
textarea {
  font-family: 'Courier New', Courier, monospace;
  ;
}

textarea {
  min-height: 300px;
}

.alert:not(:empty) {
  padding: var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
  border-radius: var(--pico-border-radius);
  background: var(--pico-color-red-600);
  color: white;
}

button.danger {
  background: var(--pico-color-red-600);
  border-color: var(--pico-color-red-600);
}

button.success {
  background: var(--pico-color-green-600);
  border-color: var(--pico-color-green-600);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.75em;

  >*,
  :not([type=checkbox], [type=radio]) {
    margin-bottom: 0;
  }
}

.toolbar>.grow {
  flex: 1;
}

.recipe-item:hover {
  cursor: pointer;
  transform: scale(1.015);
}

.tags {
  display: inline-flex;
  gap: .25em;
}

.tag-pill {
  font-size: 10pt;
  padding: .25em 1em;
  border-radius: 50px;
  background: var(--pico-primary);
  color: white;
}