:root {
  --background-color: #ffffff;

  --link-color: #093156;
  --link-color-hover: #5da2bf;

  --outline-color: #6586ff;
  --outline-width: 2px;
  --outline: var(--outline-width) solid var(--outline-color);
  --outline-offset: 2px;

  --icon-yes: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  --icon-no: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

@font-face {
  src: url(../fonts/BackIssuesBB.otf);
  font-family: "Back Issues BB";
}

body {
  background-color: var(--background-color);
  font-family: "Back Issues BB", sans-serif;
  text-transform: lowercase;
}

.has-i {
  text-transform: none;
}

a {
  outline: none;
  color: var(--link-color);
  text-decoration: none;
}

a.link {
  display: inline-block;
  margin: 5px 0;
  border-radius: 3px;
  padding: 5px;
}

@media (hover: hover) {
  a:hover {
    color: var(--link-color-hover);
  }
}

.keyboard-nav button:focus,
.keyboard-nav a:focus {
  outline: var(--outline);
  outline-offset: var(--outline-offset);
}

.icon::before {
  display: block;
  mask-size: cover;
  -webkit-mask-size: cover;
  background: currentcolor;
  width: 1em;
  height: 1em;
  content: " ";
}