/* Changes the primary theme color to blue using primitives */
  :root {
    --sl-color-primary-50: var(--sl-color-blue-50);
    --sl-color-primary-100: var(--sl-color-blue-100);
    --sl-color-primary-200: var(--sl-color-blue-200);
    --sl-color-primary-300: var(--sl-color-blue-300);
    --sl-color-primary-400: var(--sl-color-blue-400);
    --sl-color-primary-500: var(--sl-color-blue-500);
    --sl-color-primary-600: var(--sl-color-blue-600);
    --sl-color-primary-700: var(--sl-color-blue-700);
    --sl-color-primary-800: var(--sl-color-blue-800);
    --sl-color-primary-900: var(--sl-color-blue-900);
    --sl-color-primary-950: var(--sl-color-blue-950);

    --wyde: 50vw;
    --smol: 90vw;
    --middl: 70vw;
  }

  h1 {
    font-size: var(--sl-font-size-large);
  }

  @media screen and (max-width: 992px) {
    
    #header {
      width: var(--middl);
    }

    #main {
      width: var(--middl);
      font-size: var(--sl-font-size-medium);
    }

    #footer {
      width: var(--middl);
      font-size: var(--sl-font-size-medium);
    }

    h1 {
      font-size: var(--sl-font-size-medium);
    }

  }

  @media screen and (max-width: 600px) {

    #header {
      width: var(--smol);
    }

    #main {
      width: var(--smol);
      font-size: var(--sl-font-size-small);
    }

    #footer {
      width: var(--smol);
      font-size: var(--sl-font-size-small);
    }

    h1 {
      font-size: var(--sl-font-size-small);
    }
  }

  /* prevent flashing shoelace components calc(100% - 80px) */
  :not(:defined) {
    visibility: hidden;
  }

  body {
    background-color: rgb(197, 197, 197);
    color: #393a3a;
    font-family: var(--sl-font-mono);

  }

  #app {
    height: 100vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 3;
    gap: 5px;
    justify-content: center;
  }

  header {
    width: var(--wyde);
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }

  main {
    width: var(--wyde);
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    font-size: var(--sl-font-size-large);
  }

  footer {
    width: var(--wyde);
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    justify-self: center;
    align-self: end;
    font-size: var(--sl-font-size-small);
  }

  footer a {
    text-decoration: none;
  }

  ul {
    list-style-type: none;
  }

  a {
    color: #393a3a;
    padding: 3px 5px;
    font-weight: bold;
  }