@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=SUSE+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import "styles/colours.css";
@import "styles/scale.css";
@import "styles/type.css";
@import "styles/spacing.css";
@import "styles/shadow.css";

body {
  font-size: var(--step-0);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
  font-variant-ligatures: common-ligatures;
  font-optical-sizing: auto;
  margin: 0;
  line-height: var(--line-height-base);
  color: var(--black);
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  margin-block-end: 0.5em;
  line-height: var(--line-height-tight);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-bold);
  font-style: normal;
}

a {
  color: inherit;
  position: relative;
  text-decoration-style: wavy;
  text-decoration-thickness: var(--border-width-thin);
  transition: all 150ms;
  z-index: 0;
  display: inline-block;
}
a:after {
  content: "";
  position: absolute;
  top: calc(var(--border-width-chunky) * -1);
  bottom: calc(var(--border-width-chunky) * -1);
  left: calc(var(--border-width-chunky) * -1);
  right: calc(var(--border-width-chunky) * -1);
  z-index: -1;
}
a:hover,
a:focus {
  color: var(--white);
}
a:hover:after,
a:focus:after {
  transition: all 150ms;
  background-color: var(--black);
}

ul {
  padding: 0;
  margin: 0;
  li {
    padding: 0 0 0.4em 0;
    margin-left: 1.4em;
  }
}

img {
  max-width: 100%;
}