:root {
  /* Misc vars */
  --padding: 16px;
  --indent: 64px;
  --ratio: 5/3.5;

  /* Colour vars */
  /* --black: #151414; */
  --black: #0b0b0b;
  --grey: #666;
  --white: #fff;
  --opacity: 0.3;
}

@media only screen and (max-width: 600px) {
  :root {
    /* Misc vars */
    --padding: 16px;
    --indent: 32px;
    --ratio: 5/5.5;
  }
}

@font-face {
  font-family: AF Davian;
  src: url(/typefaces/AFDavian-Medium1.woff);
}

@font-face {
  font-family: Helvetica Now Text;
  src: url(/typefaces/HelveticaNowText-Regular.ttf);
}

@font-face {
  font-family: Helvetica Now Text SemiLight;
  src: url(/typefaces/HelveticaNowText-SemiLight.woff);
  font-weight: 300;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--background);
  color: var(--color);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-size: inherit;
  line-height: inherit;
  margin-block: 0px;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  margin: 0px;
}

* {
  box-sizing: border-box;
}

[grid] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--padding);
  column-gap: var(--padding);
  align-items: start;
}

@media only screen and (max-width: 600px) {
  [grid] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Type Styles */
.heading {
  font-family: Helvetica Now Text;
  font-size: 32px;
  letter-spacing: -0.015em;
}
.large {
  font-family: Helvetica Now Text;
  font-size: 21px;
  line-height: 1.35;
}
.regular {
  font-size: 14px;
  font-family: Helvetica Now Text;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.mono {
  font-family: AF Davian;
  font-size: 15px;
  text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
  .heading {
    font-size: 24px;
  }
  .regular {
    font-size: 12.5px;
  }
  .mono {
    font-size: 13px;
  }
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
									supported by Chrome, Edge, Opera and Firefox */
}