:root {
  --font-stack: "Menlo", "Monaco", "Lucida Console", "Liberation Mono",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
  --mono-font-stack: "Menlo", "Monaco", "Lucida Console", "Liberation Mono",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
  --global-font-size: 18px;
  --gitlab-background-color: #fc6d26;
  --linkedin-background-color: #0a66c2;
  --mastodon-background-color: #6364ff;
  --ravelry-background-color: #ee6e62;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222225;
    --font-color: #e8e9ed;
    --invert-font-color: #222225;
    --secondary-color: #a3abba;
    --tertiary-color: #a3abba;
    --primary-color: #62c4ff;
    --error-color: #ff3c74;
    --progress-bar-background: #3f3f44;
    --progress-bar-fill: #62c4ff;
    --code-bg-color: #3f3f44;
  }
}

header {
  font-size: 24px !important;
}

.btn-gitlab {
  color: var(--invert-font-color);
  background-color: var(--gitlab-background-color);
  border: 1px solid var(--gitlab-background-color);
}

.btn-gitlab:hover,
.btn-gitlab:focus:not(.btn-ghost) {
  background-color: var(--gitlab-background-color);
  border-color: var(--gitlab-background-color);
}

.btn-linkedin {
  color: var(--invert-font-color);
  background-color: var(--linkedin-background-color);
  border: 1px solid var(--linkedin-background-color);
}

.btn-linkedin:hover,
.btn-linkedin:focus:not(.btn-ghost) {
  background-color: var(--linkedin-background-color);
  border-color: var(--linkedin-background-color);
}

.btn-mastodon {
  color: var(--invert-font-color);
  background-color: var(--mastodon-background-color);
  border: 1px solid var(--mastodon-background-color);
}

.btn-mastodon:hover,
.btn-mastodon:focus:not(.btn-ghost) {
  background-color: var(--mastodon-background-color);
  border-color: var(--mastodon-background-color);
}

.btn-ravelry {
  color: var(--invert-font-color);
  background-color: var(--ravelry-background-color);
  border: 1px solid var(--ravelry-background-color);
}

.btn-ravelry:hover,
.btn-ravelry:focus:not(.btn-ghost) {
  background-color: var(--ravelry-background-color);
  border-color: var(--ravelry-background-color);
}

.links-grid {
  display: grid;
  grid-column-gap: 1.4em;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

@media only screen and (min-width: 70em) {
  .links-grid {
    grid-template-columns: 4fr 8fr;
  }
}