<style is:global>
  @import url("../styles/archivo.css");
  @import url("../styles/clash-display.css");

  :root {
    --clr-light-400: hsl(0 0% 100%);
    --clr-dark-400: hsl(0 17.6% 3.3%);

    --clr-ts-warm-red-400: hsl(3 94% 60%);

    --gradient-heading: linear-gradient(
      to bottom,
      hsl(from var(--clr-light-400) h s l / 100%),
      hsl(from var(--clr-light-400) h s l / 70%),
      hsl(from var(--clr-light-400) h s l / 50%)
    );
  }

  body {
    background-color: var(--clr-dark-400);
    /*color: hsla(from var(--clr-light-400) h s l / 90%);*/ /* Syntax to create hsla from hsl*/
    color: white;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  h1,
  h2,
  h3 {
    background: var(--gradient-heading);
    background-clip: text;
    color: transparent;
  }

  h1 {
    max-width: 16ch;
    font-size: 5.625rem;
    line-height: 1.1;
    font-weight: 600;
  }
</style>
