:root {
  --container-margin-y: 2.65rem;
  --color-bg: 42, 63%, 95%;
  --color-bg-lighter: hsl(46, 92%, 97%);
  --color-bg-lightest: hsl(46, 92%, 99%);
  --colog-bg-heading-divider: 42, 15%, 49%;
  --color-fg: hsl(0, 0%, 0%);
  --color-fg-lighter: hsl(0, 0%, 15%);
  --color-fg-lightest: hsl(0, 0%, 35%);
  --colog-fg-heading-divider: hsl(42, 100%, 97%);
  --color-dropdown-item-hover-bg: 186 61% 36%;
  --color-btn-bg: hsl(89, 52%, 34%);
  --color-link: hsl(203, 100%, 35%);
  --color-link-lighter: hsl(203, 100%, 44%);
  --color-indicator-up: hsl(102, 100%, 36%);
  --color-fg-danger: hsl(0, 92%, 39%);
  --color-bg-danger: hsl(17, 100%, 38%);
  --color-input-focus: #a4d2ff;
  --color-input-border: hsla(0, 0%, 0%, 20%);
  --font-family-default: -apple-system, system-ui, "system-ui", Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bright-text-shadow: 0 0 3px hsla(0, 0%, 0%, 27%);
}

body {
  background: hsl(var(--color-bg));
  color: var(--color-fg);
  font-family: var(--font-family-default);
  font-size: 1.1rem;

  display: grid;
  grid-template-rows: auto 1fr auto; /* nav, main, footer */
  grid-template-columns: 100%;
}

.foot {
  text-align: center;
  margin: 2rem 0;
  
  a {
    color: currentColor;
    text-decoration-color: hsla(0, 0%, 0%, 50%);
  }
}

a {
  color: var(--color-link);
  text-underline-offset: 0.125rem;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-link-lighter);
}

/* a:visited { */
/*   color: var(--color-link); */
/* } */

hr {
  border: none;
  border-bottom: 1px solid hsla(0, 0%, 0%, 10%);
  margin: 1.65rem 0;
}

.cloud-logo {
  margin: 2rem auto 1rem;
  display: block;
}

.code,
code {
  font-family: var(--font-family-monospace);
  font-size: 1rem;
  word-wrap: break-word;
}

turbo-cable-stream-source {
  display: none;
}