.common-logo a {
  align-items: center;
  color: var(--color-ink);
  display: flex;
  gap: 0.325em;
}

.common-logo a:before {    background: url('../images/logos/logo.png') center 0.3em / auto 1.5em no-repeat var(--color-canvas);
    border-radius: 0.2375em;
    /* box-shadow: var(--box-shadow-pill); */
    content: '';
    height: 2.1em;
    width: 7.3em;
}

.common-logo a svg {
  height: 100%;
  max-height: 0.8em;
  overflow: visible;
  pointer-events: none;
  width: auto;
}



.common-header h1,
.common-header h2 {
  font-family: var(--font-family-scorekard), sans-serif;
  font-size: var(--font-size-xxx-large);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tightest);
  margin-bottom: -0.1625em;
  margin-top: -0.425em;
}

.common-header h1 a,
.common-header h2 a {
  color: inherit;
  text-decoration: none;
}

.common-header h3 {
  font-family: var(--font-family-scorekard), sans-serif;
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tightest);
  margin-bottom: -0.1875em;
  margin-top: -0.2em;
}

.common-header a {
  font-weight: inherit;
}



.common-content p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing-tighter);
  margin-bottom: -0.3875em;
  margin-top: -0.5625em;
}

.show {
        display: block;
}

.hide {
        display: none;
}

@media(hover: hover) {

  .common-logo a {
    transition: transform var(--transition);
    will-change: transform;
  }

  .common-logo a:before {
    transition: box-shadow var(--transition);
  }

  .common-logo a:focus:before,
  .common-logo a:hover:before {
    box-shadow: var(--box-shadow-pill-hover);
  }

  .common-logo a:active {
    transform: scale(0.98) translateY(0.0125em);
  }

  .common-header a:focus,
  .common-header a:hover {
    color: var(--color-blue-hover);
  }

}



@media(prefers-color-scheme: dark) {

  .common-logo a:before {
    background-color: var(--color-canvas-light-inverted);
  }

}
