:root {
    --c-brand: #5599ff;
    --c-brand-light: #77adfd;

    --c-shadow: rgba(0,0,0,0.2);
}

html.dark {
    // brand colors
    --c-brand: #77adfd;
    --c-brand-light: #5599ff;

    --c-shadow: rgba(255,255,255,0.2);
}

/* This is a fix to avoid, when building (does not happen with dev server),
showing two external link icons for external links containing icons.*/
a.external-link>svg~span:nth-child(2) {
  display: none;
}

.vertical-divider {
  display: inline-flex;
  width:0;
  border: solid;
  border-width: 0 thin 0 0;
  border-color: var(--c-border);
  min-height: 80%;
  vertical-align: text-bottom;
  margin: 0 0.5rem;
}

.hero-logo {
  margin: 3rem auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo span {
  font-weight:500;
  font-size: 3rem;
  color: var(--c-text-accent);
  margin:  0 0 0 0.7rem;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.grid-logo {
  display: flex;
  align-items: center;
  width: 25%;
  height: 70px;
  padding: 15px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
}

.grid-logo img {
  width: 100%;
  -webkit-filter: drop-shadow(1px 0 0 white)
                  drop-shadow(0 1px 0 white)
                  drop-shadow(-1px 0 0 white)
                  drop-shadow(0 -1px 0 white);
  -filter: drop-shadow(1px 0 0 white)
           drop-shadow(0 1px 0 white)
           drop-shadow(-1px 0 0 white)
           drop-shadow(0 -1px 0 white);
}