/* https://css-tricks.com/box-sizing/ */
html {
  box-sizing: border-box;
}

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

/* Fonts */
@font-face {
  font-family: "Roboto Slab";
  src: url("/static/core/fonts/RobotoSlab-VariableFont_wght.614b8a3f8c7a.ttf");
}

@font-face {
  font-family: "Work Sans";
  src: url("/static/core/fonts/WorkSans-VariableFont_wght.bdf664a4902d.ttf"),
    url("/static/core/fonts/WorkSans-Italic-VariableFont_wght.4ddd5c05fb85.ttf");
}

@font-face {
  font-family: "Basically A Sans Serif";
  src: url("/static/core/fonts/BasicallyASansSerif-Regular.722dfd3a64bd.ttf");
}

/* Variables */
:root {
  --font-body: "Work Sans", sans-serif;
  --font-title: "Roboto Slab", serif;
  --font-subtitle: "Basically A Sans Serif", sans-serif;

  --pico-font-family: var(--font-body);
}

/* Pico overrides */
@media (min-width: 1536px) {
  .container {
    max-width: 1200px;
  }
}

/* Typography */
h1,
h2,
h3 {
  --pico-font-family: var(--font-title);
}

.subtitle {
  --pico-font-family: var(--font-subtitle);
  font-size: 1.5rem;
}

header {
  text-align: center;
}

.messages {
  .success {
    color: var(--pico-color-green-500);
  }
}

.list-none {
  padding-left: 0;

  li {
    list-style: none;
  }
}

nav {
  ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}