@import url(https://fonts.bunny.net/css?family=host-grotesk:100,200,300,400,500,600,700,800);
@import url(https://fonts.bunny.net/css?family=charis-sil:100,200,300,400,500,600,700,800);
@import url(https://fonts.bunny.net/css?family=lilex:100,200,300,400,500,600,700,800);
@import url(https://fonts.bunny.net/css?family=atkinson-hyperlegible:100,200,300,400,500,600,700,800);

:root {
  color-scheme: light dark;

  --color-neutral: default;
  --color-background: default;

  --font-family: 'Host Grotesk', sans-serif;
}

* {
  box-sizing: inherit;
  font-family: inherit;
}

html {
  height: 100%;
  background-color: var(--color-background);
}

body {
  margin: 0 auto;
  padding: 1em 0;
  color: var(--color-neutral);
}

aside {
  padding: 0 2em;
  border: 1px solid gray;
}

h1 {
  font-weight: 900;
}

h2 {
  font-weight: 700;
}

h1,
h2,
h3 {
  font-family: var(--font-family);

  &>a:link {
    font-size: 0.7rem;
  }
}

p,
li,
button {
  font-family: var(--font-family);
}

a {
  color: var(--color-primary);
}

ul.vertical {
  list-style: none;
  padding-left: 0;

  &>li {
    display: inline;

    &:not(:nth-of-type(1))::before {
      content: " · ";
    }
  }
}

@media screen and (min-width: 1080px) {
  body {
    width: calc(100% * 2 / 3);
  }

  aside {
    float: right;
    width: calc(100% / 4);
  }
}

@media screen and (max-width: 1080px) {
  body {
    width: 90%;
  }

  aside {
    float: none;
    width: auto;
  }
}