/* TODO: update to production URL when possible */
@import url("https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap");

html {
  font-family: "Recursive", monospace;
  background: black;
  color: white;
}

/* 
  CSS custom properties trick for variable fonts; see 
  https://pixelambacht.nl/2019/fixing-variable-font-inheritance/ 
*/

:root {
  /* Start with axis defaults. Exclude weight, which is better controlled via the usual font-weight CSS property */
  --MONO: 0;   /* Monospace    */
  --CASL: 0;   /* Casual       */
  --slnt: 0;   /* Upright      */
  --CRSV: 0.5; /* Auto Cursive */
}

*,
*:before,
*:after {
  font-variation-settings: 
    "MONO" var(--MONO), "CASL" var(--CASL),
    "slnt" var(--slnt), "CRSV" var(--CRSV);
}

body {
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  padding: 1vw;
}

/* Is variable font animation useful in the wild? Maybe for interactions! Hover the title.*/

h1 {
  --CASL: 1;   /* Casual       */
  --slnt: 0;  /* About 5deg   */
  --MONO: 1;   /* Monospace      */
  font-size: 25vw;
  word-spacing:-0.6em;
  word-break: break-all;
  line-height: 1;
/*   animation: weightShift 5s infinite alternate; */
  font-weight: 300;
  transition: 0.75s;
  margin: 0;
  text-align: center;
}

h1:hover {
  font-weight: 1000;
  --slnt: -7;
  --CRSV: 0;
}

h1 span {
  font-weight: 1000;
  transition: 1s;
}

h1:hover span {
  font-weight: 300;
}

p {
  --MONO: 1;
  font-size: 0.75rem;
  color: #6a6a6a;
  text-align: center;
}

a {
  --slnt: -10;
  color: inherit;
}