@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Regular"),
    url("/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Regular Italic"),
    local("Fira Sans Italic"),
    url("/fonts/FiraSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Bold"),
    url("/fonts/FiraSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src:
    local("Fira Sans Bold Italic"),
    url("/fonts/FiraSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code";
  src:
    local("Fira Code Regular"),
    url("/fonts/FiraCode-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: "Fira Code";
  src:
    local("Fira Code Bold"),
    url("/fonts/FiraCode-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}

:root {
  --background: white;
  --foreground: #333;

  --link-color: #0000ee;
  --visited-link-color: #551a8b;
  --active-link-color: #ee0000;

  /* Code blocks */
  --default-code-color: var(--foreground);
  --code-bg: #f5f2f0;

  /* TODO: Remove these variables in favor of color-mix when all browsers implement it */
  --fg-60: #858585; /* color-mix(in srgb, var(--foreground) 60%, var(--background)) */
  --fg-10: #ebebeb; /* color-mix(in srgb, var(--foreground) 10%, var(--background)) */

  color: var(--foreground);
  background-color: var(--background);
  margin: 0;
  font-family: "Fira Sans", sans-serif;
  line-height: 1.3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #161616;
    --foreground: #f8f8f2;

    --link-color: #8c8cff;
    --visited-link-color: #ffadff;
    --active-link-color: #ff6666;

    --code-bg: #272822;

    /* TODO: Remove these variables in favor of color-mix when all browsers implement it */
    --fg-60: #9e9e9e; /* color-mix(in srgb, var(--foreground) 60%, var(--background)) */
    --fg-10: #2d2d2d; /* color-mix(in srgb, var(--foreground) 10%, var(--background)) */
  }
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr minmax(min-content, 50vw) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header" ". main socials";
  place-items: center;
  min-height: 100vh;
}

:link,
:link code {
  color: var(--link-color);
}
:visited,
:visited code {
  color: var(--visited-link-color);
}
:any-link:active,
:any-link:active code {
  color: var(--active-link-color);
}
:any-link code {
  text-decoration: underline;
}

#container {
  display: contents;
}

#container main {
  grid-area: main;
  max-width: 650px;
  text-wrap: balance;
}

#container main,
#socials h2 {
  text-align: center;
}

#socials {
  grid-area: socials;
  align-self: end;
  justify-self: end;
}

#socials h2 {
  font-size: 1.75rem;
}

#socials > dl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin: 30px;

  /*
   * Twitter branding guidelines are that the logo be at least 32px wide.
   * (LinkedIn branding guidelines are that the bug be at least 21px high on
   * screen). Since we're using square logo images, we set --logo-size (width
   * and height) to 32px.
   *
   * Twitter branding guidelines are that the handle be scaled to 100% of the
   * height of the logo. In the version of the logo we're using, the height of
   * the actual logo graphic is 0.4764% of the dimensions of the image.
   *
   * LinkedIn branding guidelines are that the margin around the logo in all
   * directions be twice the width of the "i", which takes up 14.81% of the logo
   * dimensions. Since we margins in different grid cells don't collapse, we set
   * --logo-margin to the width of the "i", rather than twice that.
   */
  --logo-size: 32px;
  --handle-font-size: calc(var(--logo-size) * 0.4764);
  --logo-margin: calc(var(--logo-size) * 0.1481);
}
#socials dt {
  width: var(--logo-size);
  margin: var(--logo-margin);
}
#socials #social-mastodon {
  content: url("/images/mastodon-social.png");
  content: url("/images/mastodon-social.png") / "Mastodon:";
}
#socials #social-bsky {
  content: url("/images/bsky-social.png");
  content: url("/images/bsky-social.png") / "Bluesky:";
}
#socials #social-github {
  content: url("/images/github-social.png");
  content: url("/images/github-social.png") / "GitHub:";
}
#socials #social-linkedin {
  content: url("/images/linkedin-social.png");
  content: url("/images/linkedin-social.png") / "LinkedIn:";
}
#socials #social-matrix {
  content: url("/images/matrix-social.png");
  content: url("/images/matrix-social.png") / "Matrix:";
}
#socials #social-signal {
  content: url("/images/signal-social.png");
  content: url("/images/signal-social.png") / "Signal:";
}
#socials #social-email {
  content: url("/images/email-social.png");
  content: url("/images/email-social.png") / "Email:";
  grid-row-end: span 2;
}
#socials #social-pubkey {
  content: url("/images/pubkey-social.png");
  content: url("/images/pubkey-social.png") / "Public key:";
}

@media (prefers-color-scheme: dark) {
  #socials #social-github {
    content: url("/images/github-social-dark.png");
    content: url("/images/github-social-dark.png") / "GitHub:";
  }
  #socials #social-matrix {
    content: url("/images/matrix-social-dark.png");
    content: url("/images/matrix-social-dark.png") / "Matrix:";
  }
  #socials #social-email {
    content: url("/images/email-social-dark.png");
    content: url("/images/email-social-dark.png") / "Email:";
  }
  #socials #social-pubkey {
    content: url("/images/pubkey-social-dark.png");
    content: url("/images/pubkey-social-dark.png") / "Public key:";
  }
}

#socials dd {
  font-size: var(--handle-font-size);
  margin: 0 var(--logo-margin);
  grid-column-start: 2;
}

@media (max-width: 1000px) {
  body {
    display: block;
  }
  #container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 15vw;
    min-height: 100vh;
    box-sizing: border-box;
  }

  #container main {
    max-width: unset;
  }

  #socials {
    margin: 0;
    place-self: stretch;
  }
  :root[data-blue-gradient] #socials {
    background: radial-gradient(
      circle closest-corner at bottom center,
      #fff,
      50%,
      #fff0
    );
  }
}

@media (max-width: 600px) {
  #container {
    padding: 0 30px;
  }
}

@media (width <= 380px) {
  #socials > dl {
    margin-left: auto;
    margin-right: auto;
    width: min-content;
  }
}