@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/AlegreyaSans-Regular.woff2");
  font-weight: 400;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/AlegreyaSans-Medium.woff2");
  font-weight: 500;
}

html {
  accent-color: var(--red-4);
  scrollbar-color: var(--red-4) var(--gray-10);
}

body {
  color-scheme: dark;
  background: #000;
  color: #fff;
  font-family: "Alegreya Sans", "Source Sans", sans-serif;
  line-height: var(--font-lineheight-2);
  max-width: var(--size-content-3);
  margin: auto;
  padding: var(--size-8) var(--size-4);
}

::selection {
  background: var(--red-10);
}

h1,
h2 {
  font-weight: 500;
  font-variant-caps: small-caps;
  letter-spacing: var(--font-letterspacing-1);
}
h1 {
  text-align: center;
  font-size: var(--font-size-4);
  margin: 0 0 var(--size-5) 0;
}
h2 {
  font-size: var(--font-size-4);
  margin: var(--size-5) 0 var(--size-3) 0;
}

section {
  border-top: var(--border-size-1) solid var(--red-4);
  margin-top: var(--size-7);
}

ul {
  list-style: url("heart.svg");
  padding-left: var(--size-4);
}
li {
  margin: var(--size-1) 0;
  padding-left: var(--size-1);
}

ul.chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-1);
}
ul.chips > li {
  padding: var(--size-2);
  border: var(--border-size-2) solid var(--red-4);
  border-radius: var(--radius-round);
}

figure {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--size-2);
  margin: 0;
  overflow-x: scroll;
}

a {
  text-decoration: none;
  color: var(--red-4);
}
a:hover {
  text-decoration: underline;
}