@font-face {
  font-family: AtkinsonHyperlegible;
  src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
}

@font-face {
  font-family: AtkinsonHyperlegible;
  src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: bold;
}

@font-face {
  font-family: AtkinsonHyperlegible;
  src: url("fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2");
  font-style: italic;
}

@font-face {
  font-family: AtkinsonHyperlegible;
  src: url("fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}

html {
  font-size: 62.5%;
}

body {
  align-items: center;
  background: url(img/noise.jpg);
  color: #333;
  display: flex;
  font-family: AtkinsonHyperlegible, Verdana, sans-serif;
  font-size: 1.8rem;
  justify-content: center;
  line-height: 1.8;
}

main {
  display: inline-block;
  max-width: 80rem;
}

footer {
  margin-top: 5.2rem;
}

h1 {
  align-self: center;
  font-size: 3.2rem;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

li + li:before {
  content: "|";
  display: inline-block;
  margin-left: 1rem;
  width: 2rem;
}

.margin-top-0 {
  margin-top: 0;
}

.header-container {
  display: flex;
}

.head-container {
  width: 100%;
}

.head {
  animation: 10s ease-in-out infinite alternate move;
  display: block;
  opacity: 0.3;
}

.head:hover {
  opacity: 0.9 !important;
}

@keyframes move {
  from {
    margin-left: calc(100% - 9.7rem);
    opacity: 0.3;
  }
  to {
    margin-left: 0;
    opacity: 0.9;
  }
}

.bio {
  margin: 2.4rem 0;
}

.section-container {
  display: grid;
  grid-template-columns: min-content auto;
  row-gap: 5.2rem;
}

.section-heading {
  font-size: 2.2rem;
  font-weight: bold;
  border-right: 0.3rem solid #333;
  padding-right: 2.6rem;
  text-align: right;
  white-space: nowrap;
}

.section-content {
  padding-left: 2.6rem;
}

.section-content--two-col {
  display: grid;
  grid-template-columns: min-content auto;
}

.section-content--two-col__left {
  padding-right: 2.6rem;
  white-space: nowrap;
}

.section-content--two-col__right {
  /* font-size: 1.2rem; */
  margin: auto 0;
}

.icon {
  height: 4.4rem;
  margin: 0.6rem 1.6rem 0.6rem 0;
  vertical-align: middle;
  width: 4.4rem;
}

/* #region icon colors */

.github {
  fill: #181717;
}

.linkedin {
  fill: #0a66c2;
}

.twitter {
  fill: #1da1f2;
}

.mastodon {
  fill: #3088d4;
}

.ibm {
  fill: #052fad;
}

.w3c {
  fill: #005a9c;
}

.vscode {
  fill: #007acc;
}

.lubuntu {
  fill: #0068c8;
}

.freebsd {
  fill: #ab2b28;
}

.tc39 {
  background-color: #fc7c01;
  fill: black;
}

.whatwg--dark {
  display: none;
}

.whatwg--light {
  display: inline;
}

.openjsf {
  fill: black;
}

.a11y-badges {
  stroke: green;
}

/* #endregion */

.section-container a {
  align-items: center;
  display: flex;
}

a:link {
  color: #5140c4;
  text-underline-offset: 25%;
}

a:visited {
  color: #5140c4;
}

a:hover,
a:focus {
  color: indigo;
  text-decoration: none;
}

a:active {
  color: #5140c4;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #21212c;
    color: lightgrey;
  }

  .section-heading {
    border-right: 0.3rem solid lightgrey;
  }

  .icon use {
    fill: lightgrey;
  }

  .tc39 {
    background-color: lightgrey;
    fill: black;
  }

  .icon.tc39 use {
    fill: black;
  }

  .whatwg--dark {
    display: inline;
  }

  .whatwg--light {
    display: none;
  }

  .icon.a11y-badges use {
    stroke: lightgrey;
  }

  a:link {
    color: #9a78dd;
  }

  a:visited {
    color: #9a78dd;
  }

  a:hover,
  a:focus {
    color: lightgrey;
  }

  a:active {
    color: #9a78dd;
  }

  .bug {
    filter: invert(0.87);
  }
}

@media (max-width: 60rem) {
  .hideIfSmallScreen {
    display: none;
  }

  .section-container {
    grid-template-columns: auto;
    row-gap: 2rem;
  }

  .section-content--two-col {
    grid-template-columns: auto;
  }

  .section-heading {
    border-bottom: 0.2rem solid;
    border-right: 0;
    text-align: left;
    white-space: nowrap;
  }

  .section-content--two-col__right {
    margin-left: 6rem;
  }
}