/* Load Myriad Pro font */
@font-face {
  font-family: "Myriad Pro";
  src: url("./public/fonts/MyriadPro-Regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("./public/fonts/MyriadPro-Bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("./public/fonts/MyriadPro-Italic.woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

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

:root {
  --fg: #222;
  --bg: #fff;
  --link: hsl(263deg, 55%, 60.8%, 1);
  --input-bg: hsl(216deg, 9.8%, 90%);
  --fgtag: hsl(263deg, 55%, 60.8%, 1);
  --bgtag: var(--bg);
  --caret-color: hsla(335, 100%, 65%, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: hsl(219, 28%, 88%);
    --bg: #181818;
    --link: hsl(300, 30%, 68%);
    --input-bg: hsl(215deg, 11.1%, 30%);
    --fgtag: hsl(300, 30%, 68%);
    --bgtag: var(--bg);
    --caret-color: hsl(33deg, 100%, 62.9%);
  }
}

body {
  font:
    1.15rem/150% "Myriad Pro",
    "Lucida Grande",
    -apple-system,
    sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 20px;
}

code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 90%;
}

i {
  display: inline-block;
  width: 12em;
  text-align: right;
  text-decoration: inherit;
  color: var(--fg);
}

main {
  background: var(--results-bg);
}

ul {
  margin-left: 6em;
  margin-bottom: 12px;
  list-style: none;
}

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

@media (max-width: 576px) {
  ul {
    margin-left: 0;
    padding-inline: 20px;
  }
  i {
    width: fit-content;
  }
  body {
    margin: 5px;
  }
}