:root {
  --link: #0284c7;
  --gallery-bg: #f1f5f9;
  --input-border: #6b7280;
  --focus: #2563eb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 1rem;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: inherit;
}

a {
  color: var(--link);
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[x-cloak] {
  display: none !important;
}

.search {
  margin-bottom: 1rem;

  input {
    appearance: none;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 0;
    background: #fff;
    font: inherit;
    line-height: 1.5rem;

    &:focus {
      outline: 2px solid transparent;
      border-color: var(--focus);
      box-shadow: 0 0 0 1px var(--focus);
    }
  }
}

.orchid {
  margin-bottom: 1rem;
}

.orchid-row {
  display: flex;

  .name {
    margin-right: 0.5rem;
  }

  button {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  a {
    margin-left: 0.5rem;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  border-radius: 0.25rem;
  background: var(--gallery-bg);

  @media (min-width: 640px) {
    padding: 1rem;
  }

  @media (min-width: 1024px) {
    padding: 3rem;
  }

  > div {
    margin: 1rem;
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
      drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  }
}