:root {
  --background: #FFF;
  --foreground: #000;
  --link: blue;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #222;
    --foreground: #fff;
    --link: #47a0ff;
  }
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
}

html {
  background: var(--background);
  color: var(--foreground);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

h1 {
  a {
    color: var(--foreground) !important;
  }
}

main {
  margin: 0 auto;
  width: 100%;
  max-width: 36rem;
  padding: 1rem;
}

form {
  position: sticky;
  top: 0;
  display: flex;
  gap: 1rem;
  width: 100%;
  background: var(--background);
  padding: 1.5rem 0;

  input {
    border-radius: 0;
    outline: none;
    border: 1px solid var(--foreground);
    background: var(--background);
    color: inherit;
    width: 100%;
    padding: 0.25rem;
    font-size: inherit;
  }
}

ul {
  margin: 1.5rem 0;

  &#favourites {
    li {
      &:last-child {
        border-bottom: 1px solid color-mix(in srgb, var(--foreground) 50%, transparent);
        padding-bottom: 1.5rem;
      }
    }
  }

  li {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

footer {
  border-top: 1px solid;
  padding-top: 1rem;
  opacity: 0.4;
}