/** ====================================== */
/** ============= BODY STYLE ============= */
/** ====================================== */

:root {
  --splash-heading-height: 80vh;
  --viewport-menu-width: 32ch;
  --viewport-menu-color: #323232;
  --viewport-column-count: 9;
  --viewport-column-menu: 1;
  --viewport-column-content-start: 2;
  --viewport-column-content-end: 8;

  --scrollbar-color-thumb: gray;
  --scrollbar-color-track: black;
  --scrollbar-width: 8px;
  --scrollbar-width-legacy: 8px;
}

@supports (scrollbar-width: auto) {
  * {
    scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
    scrollbar-width: var(--scrollbar-width);
  }
}

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
  }

  ::-webkit-scrollbar {
    max-width: var(--scrollbar-width-legacy);
    max-height: var(--scrollbar-width-legacy);
  }
}

::selection {
  background-color: var(--ghost-accent-color);
  color: var(--color-white);
}

body {
  font-family: var(--gh-font-heading);
}







/** ====================================== */
/** ========== GHOST OVERRIDES =========== */
/** ====================================== */

.gh-viewport {
  /* display: grid; */
  gap: var(--grid-gap);
  grid-template-columns: var(--viewport-menu-width) repeat(calc(var(--viewport-column-count) - 1), 1fr);
  grid-template-rows: auto;
  /* margin-right: var(--grid-gap); */
}

@media only screen and (min-width: 767.01px) {
  .gh-viewport {
    display: grid;
    margin-right: var(--grid-gap);
  }
}

.gh-outer {
  padding: 0;
  grid-column: var(--viewport-column-content-start) / span var(--viewport-column-content-end);
}








/** ====================================== */
/** ============ HEADER STYLE ============ */
/** ====================================== */

.gh-navigation-menu ul {
  list-style: none;
  padding: unset;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: hidden;
  width: 100%;
}

.gh-navigation-menu li a {
  width: 100%;
  display: flex;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.05px;
  font-family: 'Adwaita Sans';
  text-transform: uppercase;
  transition: letter-spacing .4s;
}

.gh-navigation-menu li a:hover {
  letter-spacing: 1px;
}

.gh-navigation-menu li:hover svg {
  scale: 1.2;
}

.gh-navigation-menu li svg {
  fill: currentColor;
  height: 1.25lh;
  width: 1.25lh;
  display: inline-block;
  margin-right: 1ch;
  transition: scale .4s;
}

.gh-navigation-logo svg {
  height: 144px;
  width: 100%;
  display: block;
  max-width: unset;
  text-align: center;
}

.gh-navigation-logo svg path {
  fill: currentColor;
}


/** DESKTOP LANDING */
@media (min-width: 767.01px) {
  .gh-navigation {
    grid-column: var(--viewport-column-menu) / span 1;
    display: flex;
    height: 100%;
    width: calc(var(--viewport-menu-width) + 2ch);
    background-color: var(--viewport-menu-color);
    grid-row: 1 / 5;
    position: fixed;
    left: 0;
    top: 0;
  }

  .gh-navigation.is-left-logo .gh-navigation-inner {
    display: flex;
    flex-direction: column;
    /* position: fixed; */
    height: 100%;
    width: var(--viewport-menu-width);
  }

  .gh-navigation-members {
    background-color: var(--viewport-menu-color);
  }

  .gh-navigation-actions {
    display: flex;
    flex-direction: row-reverse;
    background-color: var(--viewport-menu-color);
    margin-bottom: calc(var(--grid-gap)/2);
  }

  .gh-navigation-menu {
    margin-bottom: auto;
  }
}

/** MOBILE LANDING */
@media (max-width: 767px) {
  #gh-navigation {
    margin-bottom: 1.5em;
  }

  #gh-navigation .gh-navigation-brand {
    box-sizing: border-box;
    /* max-width: 95vw; */
    width: 88%;
  }

  #gh-navigation .gh-navigation-inner {
    gap: unset;
  }

  .gh-navigation-logo svg {
    /* max-width: 22ch; */
    height: 72px;
    width: auto;
  }

  .has-dark-text #fundraising-goal-container a {
    color: black !important;
  }

  #fundraising-goal-container {
    width: 95%;
    margin: 0 auto;
  }

  .gh-navigation-menu,
  #fundraising-goal-container,
  .gh-navigation-actions.gh-navigation-actions {
    padding: var(--grid-gap) 0;
  }

  .gh-navigation-inner {
    display: flex;
    flex-direction: column;
  }

  .gh-navigation-actions {
    margin-top: auto;
  }
}






/** ====================================== */
/** =========== TOGGLE SWITCH ============ */
/** ====================================== */
/* Container for the toggle */
.dark-mode-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  /* Hide default checkbox */
}

.dark-mode-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The track */
.thumb {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 24px;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s;
}

/* The circular slider */
.thumb:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Toggled state */
.dark-mode-toggle input:checked+.thumb {
  background-color: var(--background-color);
  background-color: rgba(255, 255, 255, 0.2);
}

.dark-mode-toggle input:checked+.thumb::before {
  transform: translateX(26px);
}

.dark-mode-toggle {
  isolation: isolate;

  &:before,
  &:after {
    content: "\F0594";
    font-family: "Material Design Icons";
    color: black;
    position: absolute;
    left: 6px;
    z-index: 1;
  }

  &:after {
    content: "\F05A8";
    left: unset;
    right: 6px;
  }

  .thumb {
    position: absolute;
    inset: 0;
  }

  .thumb:before {
    z-index: 10
  }
}







/** ====================================== */
/** ========== HOMEPAGE STYLE ============ */
/** ====================================== */

.gh-card-tag {
  display: block;
}

.gh-header.is-magazine {
  /* grid-column: var(--viewport-column-content-start) / span var(--viewport-column-content-end); */
  display: grid;
  grid-template-columns: subgrid;
}

.gh-header.is-magazine .gh-header-inner {
  grid-template-columns: subgrid;
  grid-column: 1 / span all;
  grid-template-rows: 60vh 0lh;
}

.gh-header.is-magazine .gh-header-inner>.gh-card {
  grid-column: 1 / span 7;
}

@media only screen and (min-width: 767.01px) {
  .gh-header.is-magazine .gh-header-inner>.gh-card:first-of-type {
    overflow: hidden;
    height: 100%;

    &:hover {
      color: white;

      .gh-card-image {
        scale: 1.02;
        opacity: 1;
      }
    }

    .gh-card-link {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      /* grid-template-rows: repeat(4, 1fr); */
      aspect-ratio: 16 / 9;
      position: relative;
      height: 100%;
      width: 100%;
      color: white;
    }

    .gh-card-meta {
      color: rgb(from currentColor r g b / .6)
    }

    .gh-card-image {
      /* position: absolute; */
      grid-column: 1 / span all;
      grid-row: 1 / span all;
      transition: scale .1s;
    }

    .gh-card-wrapper {
      grid-column: 1 / span all;
      grid-row: 3 / span all;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20% calc(var(--grid-gap) / 2) calc(var(--grid-gap) / 2);
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 60%);
      text-shadow: 0 0 4px black;
    }
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card {
    grid-column: 1 / span 10;
    grid-row: 1 / span 2;
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card {

    &:before,
    &:after {
      content: unset;
    }

    &.small-content:before {
      content: "";
    }
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card.small-content.small-content {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card.small-content .gh-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 2rem;
    width: 100%;
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card.small-content .gh-card-excerpt {
    font-size: 1.5rem;
  }


  /* .gh-header.is-magazine .gh-header-inner > .gh-card.small-content:is(:nth-of-type(7),:nth-of-type(8)) {
            grid-column
        } */

}

@media (max-width: 1300px) {
  .gh-header.is-magazine .gh-header-inner>.gh-card {
    grid-column: 1 / span 8;
    grid-row: 1 / span 2;
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card.small-content.small-content {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gh-header.is-magazine .gh-header-inner>.gh-card.small-content.small-content .gh-card-tag {
    display: none;
  }
}





/** ====================================== */
/** ============ FICTION PAGE ============ */
/** ====================================== */

.gh-archive.has-image .gh-archive-inner {
  display: grid;
  color: white;
}

.fiction-page .gh-archive-inner .gh-article-image,
.fiction-page .gh-archive-wrapper,
.gh-archive-inner .gh-article-image,
.gh-archive-wrapper {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  isolation: isolate;
  position: relative;
}

.fiction-page .gh-archive-wrapper,
.gh-archive-wrapper {
  padding: var(--grid-gap);
}

.fiction-page .gh-archive-inner .gh-article-image,
.gh-archive-inner .gh-article-image {
  z-index: -1;
}

.fiction-page .gh-archive-inner .gh-article-image img,
.gh-archive-inner .gh-article-image img {
  filter: brightness(.6);
  max-height: 10lh;
  object-fit: cover;
}

.he-partners:has(.gh-feed:empty) {
  display: none;
}

.gh-main {
  grid-column: 2 / all;
}

.post-template .gh-main {
  grid-column: 2 / span 6;
}

.post-template .gh-container.gh-outer {
  grid-column: 8 / span all;
}

.post-template .gh-container-inner+.gh-container-inner {
  margin: calc(var(--grid-gap) * 1.5) 0 0;
}

@media (max-width: 767px) {

  .gh-header-inner,
  .gh-featured-inner,
  .gh-container-inner {
    padding: calc(var(--grid-gap) / 2);
  }
}





/** ====================================== */
/** =========== SPONSOR STYLE ============ */
/** ====================================== */

.gh-sidebar-inner .gh-about-icon {
  border-radius: unset;
}

.gh-sidebar-inner .gh-about-description.is-body {
  display: none;
}

.gh-sidebar-inner .he-partners {
  margin: 0 0 calc(var(--grid-gap) * 0.5);
}

.he-partners a {
  position: relative;
}

.he-partners a:after {
  position: absolute;
  bottom: 0;
  right: 2px;
}


.gh-content .he-partners {
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: .1rem;
  padding: calc(var(--grid-gap) / 2) !important;
  margin-top: var(--grid-gap);
}

.he-partners h2 {
  display: flex;
  align-items: center;
  /* font-size: 1.5rem; */
}

.gh-content .he-partners {
  width: 60%
}

@media (max-width: 767px) {
  .gh-content .he-partners {
    width: 100%
  }

  .he-partners h2 {
    font-size: 1.5rem;
  }
}


.gh-content .he-partners h2 {
  font-size: .7em;
  color: gray;
}

.he-partners h2>* {
  vertical-align: middle;
}

.he-partners h2 svg {
  height: 1.2em;
  width: 1.2em;
  opacity: .6;
  display: inline-block;
  margin-left: 5px;
}

.he-partners a {
  position: relative;
}

.he-partners a:after {
  position: absolute;
  bottom: 0;
  right: 2px;
}

.he-partners .partner {
  display: block;
  text-align: right;
  text-transform: uppercase;
  margin-top: 5px;
  margin-left: auto;
  color: rgb(from currentColor r g b / .5);
  font-size: 0.5em;
}

.gh-content .he-partners li {
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .gh-content .he-partners {
    width: 100%;
  }
}








/** ====================================== */
/** ========== AFFILIATE STYLE =========== */
/** ====================================== */

/* .affiliate-links {
  display: block;
  background: rgb(from var(--ghost-accent-color) r g b / .1);
  padding: 1em 2em;
  margin: var(--grid-gap) 0 0;
  color: rgb(from currentColor r g b / .5);
} */

/* .gh-affiliate-notify {
  display: none;
  padding: 2rem 3rem;
  font-size: 0.8em;
  background-color: hsl(from var(--ghost-accent-color) h s l / .2);
  font-style: italic;
  color: hsl(from var(--ghost-accent-color) h s 38% / .7);
} */
/* 
.gh-article.post:has([href^="https://amzn.to"],
  [href^="https://fanatical.com"],
  [href^="https://humblebundleinc.sjv"],
  [href^="https://adtr.co"],
  [href^="https://go.getproton.me"]) .gh-affiliate-notify {
  display: block;
} */

:is([href*="?affiliate"],
  [href*="&affiliate"],
  [href*="humblebundleinc.sjv.io"],
  [href*="humblebundleinc"] [href*="go.getproton.me"],
  [href*="go.adt256.com"],
  [href*="adtr.co"],
  [href*="amzn.to"],
  [href*="linkCode=ll2"]):after {
  content: "\F04FC";
  font-family: "Material Design Icons";
  font-size: 0.9em;
  vertical-align: 0;
  text-decoration: none;
  color: rgb(from currentColor r g b / .4);
  position: relative;
}








/** ====================================== */
/** =========== ARTICLE STYLE ============ */
/** ====================================== */

.post-template .gh-container.is-grid {
  grid-column: 2 / span all;
}

.post-template .gh-container:not(.is-grid) .gh-feed {
  display: flex;
  flex-direction: column;
}

.post-template .gh-container:not(.is-grid) .gh-feed .gh-card.post {
  margin: 1ch 0;
}


.gh-recommendations ul {
  list-style: none;
  padding-left: .2ch;
}

.gh-recommendations ul li {
  margin: 0 0 0.4ch;
}

.gh-recommendations ul li a {
  display: flex;
  align-items: center;
  font-family: var(--gh-font-heading);
  font-weight: bold;
  text-transform: uppercase;
  gap: 1ch;
  color: currentColor;
}

.gh-container.is-list .gh-card-title {
  --factor: 1.35;
}

:is(.gh-container.is-list, .gh-card-link) .is-body {
  color: rgb(from currentColor r g b / .75);
}

.gh-navigation.is-left-logo .gh-navigation-menu {
  padding: 0 0 0 1ch;
  margin-right: unset;
  width: 100%;
  box-sizing: border-box;
}

.gh-navigation .nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.8em;
  font-size: 0.8em;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: underline;
  width: 100%;
  gap: 1ch;
  justify-content: center;
}

.gh-navigation .nav a {
  opacity: .5;
}

/* CONTENT */
.gh-article-author-name {
  display: flex;
}

.gh-article-author-name .tag {
  margin: 0 .7ch 0 1ch;
}

.is-title {
  font-family: var(--gh-font-heading);
}

.is-body {
  font-family: var(--gh-font-body);
  font-size: 1.9rem;
}

.gh-splash-header {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  isolation: isolate;
  grid-template-columns: 0;
  justify-content: flex-end;
  align-items: flex-end;
  height: var(--splash-heading-height);
  /* padding: var(--container-width); */
  margin: 0;
}


.gh-splash-header :is(.gh-article-image, .gh-article-image img) {
  margin: 0;
  height: 80vh;
  width: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
  z-index: -1;
}

.gh-splash-content {
  margin-top: var(--splash-heading-height);
}

.gh-content {
  position: relative;
}







/** ====================================== */
/** =========== SHARE DIALOG ============= */
/** ====================================== */

.gh-share-dialog {
  position: fixed;
  inset: 0;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* background: var(--color-dark-gray); */
  /* color:  white; */
  border: 0;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .gh-share-dialog {
    width: 100%;
    top: 40%;
  }
}

.gh-share-dialog::backdrop {
  backdrop-filter: blur(2px) brightness(0.5);
}

.gh-share-dialog .icon {
  display: flex;
  justify-content: center;
}

.gh-share-dialog .icon svg {
  max-width: 80px;
  max-height: 80px;
  width: 100%;
}

.gh-share-dialog p:first-of-type {
  font-weight: bold;
  margin-top: calc(var(--grid-gap) / 3);
}

.gh-prompt-input {
  width: 100%;
}

.gh-share-dialog .button-container {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--grid-gap) / 3);
  font-weight: bold;
}

.gh-share-dialog .gh-prompt-okay {
  background-color: var(--ghost-accent-color);
  color: white;
}

.gh-share-dialog .gh-prompt-cancel {
  background-color: var(--color-mid-gray);
}

.gh-share-dialog button {
  border: 0;
  width: 100%;
  padding: .3em 0;
  /* text-transform:uppercase; */
}

.gh-share-container {
  margin-left: auto;
}

@media (min-width: 767.01px) {
  .gh-share-container.end {
    /* width: var(--grid-gap); */
    position: fixed;
    top: 0;
    left: calc(var(--viewport-menu-width) - 5px);
    margin-top: 120px;
    transition: translate .4s;
    translate: 0 -200%;
    background-color: var(--viewport-menu-color);
    padding: 5px;
    /* box-shadow: 10px 0px 15px 0px rgb(0 0 0 / .05); */
  }

  .article--scrolled .gh-share-container.end {
    translate: 0;
  }

  /* .gh-share-container.end .gh-share-widget button {
    height: calc(var(--grid-gap) - 5px);
    width: calc(var(--grid-gap) - 5px);
  } */

  .end .gh-share-widget {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .gh-article-meta {
    flex-wrap: wrap;
  }

  .gh-share-container {
    width: 100%;
    text-align: right;
  }

  .gh-share-container h2.gh-container-title {
    padding: 0 0 .6em;
    margin: 0 0 1em;
  }
}

.gh-share-container.end h2 {
  font-size: 1.1rem;
  font-weight: 550;
  text-align: center;
}

.gh-share-container .gh-container-title {
  margin-bottom: 1em;
  padding-bottom: 0.3em;
  /* text-align: right; */
}

.gh-share-widget {
  /* --grid-gap: 30px; */
  /* position: fixed; */
  /* left: var(--viewport-menu-width); */
  /* width: var(--grid-gap); */
  /* margin-top: 37px; */
}

.end .gh-share-widget {
  gap: 0;
}

.gh-share-widget svg {
  height: var(--grid-gap);
  width: var(--grid-gap);
}

.gh-share-widget button {
  border: 0;
  height: var(--grid-gap);
  width: var(--grid-gap);
  cursor: pointer;
}

.gh-share-widget button:hover {
  opacity: .7;
}

[data-share-service="discord"] {
  background-color: #5842e7;
  fill: #fff;
}

[data-share-service="mastodon"] {
  background-color: #5f5af1;
  /* background-color: #7c008a; */
  color: #fff;
}

[data-share-service="reddit"] {
  background-color: #f74200;
  color: #fff;
}

[data-share-service="lemmy"] {
  background-color: rgb(222, 222, 222);
  color: black;
}

[data-share-service="email"] {
  background-color: var(--color-dark-gray);
  fill: white;
}

[data-share-service="bluesky"] {
  background-color: #0f7cf6;
  fill: white;
  color: white;
}










/** ====================================== */
/** ============= CODE STYLE ============= */
/** ====================================== */

.gh-content table:not(.gist table) {
  scrollbar-width: thin;
}

.gh-content table:not(.gist table) th {
  background-color: unset;
}

.gh-content table:not(.gist table) td:first-child,
.gh-content table:not(.gist table) td:last-child {
  background-image: none;
}

.gh-content table:not(.gist table) td,
.gh-content table:not(.gist table) th {
  border: unset;
  border-bottom: 1px solid var(--color-dark-gray);
}




figcaption {
  text-align: center;
}


a.button {
  display: flex;
  padding: 0.6em 1.3em;
  gap: 0.8em;
  margin: .2em;
  justify-content: center;
  background-color: transparent;
  color: var(--white);
  text-decoration: none;
  border: 2px solid currentColor;
  border-radius: 2em;
  width: max-content;
  margin: 1em auto;
  align-items: center;
  font-weight: bold;

  &:hover {
    color: var(--ghost-accent-color);
  }

  &:after {
    display: none;
  }
}








/** ====================================== */
/** ============ AUTHOR STYLE ============ */
/** ====================================== */

.gh-article-meta-actions {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.5em;
}

.gh-article-tag,
.gh-tip-jar {
  margin-top: 20px;
}

.gh-tip-jar {
  width: 1ch;
  font-size: 1.4em;

  .mdi {
    color: var(--color-border);

    &:before {
      content: "\F02D5";
    }

    &:hover:before {
      content: "\F02D1";
      color: #BD4F6C;
    }
  }
}

.gh-article-meta .gh-article-author-image a {
  height: 85px;
  width: 85px;
}

.gh-article-meta-wrapper .gh-article-author-name {
  display: flex;
  font-size: 2rem;
  align-items: center;
}

.gh-article-meta-wrapper .gh-article-meta-content {
  font-size: 1.45rem
}

.gh-article-meta-wrapper .gh-author-social {
  display: inline;
}

.gh-article-meta-wrapper .gh-author-social a {
  color: rgb(from currentColor r g b / .5);
}

.gh-article-meta-wrapper .gh-author-social a:hover {
  color: rgb(from currentColor r g b / .9);
}

.he-author-blurb {
  color: rgb(from currentColor r g b / .8);
}

.he-author-blurb h2 {
  font-size: 2rem;
}

.he-author-blurb .gh-article-image {
  border-radius: 50%;
  height: 8lh;
  width: 8lh;
  margin-right: 1lh;
  margin-top: 0;
  object-fit: cover;
  float: left;
}

.he-author-blurb h3 {
  font-size: 3rem;
}

.he-author-blurb .gh-author-social {
  flex-wrap: wrap;
}

.he-author-blurb .gh-article-excerpt {
  color: rgb(from currentColor r g b / .4);
  font-family: var(--gh-font-heading);
  font-size: 1.7rem;
}

@media (max-width: 767px) {
  .he-author-blurb {
    display: flex;
    flex-direction: column;
  }

  .he-author-blurb .gh-article-image {
    width: 100vw;
    height: auto;
    margin: 0 0 var(--grid-gap) 0;
  }

  .he-author-blurb .gh-author-social {
    display: block;
  }

  .he-author-blurb a {
    display: inline-block;
    margin: 0 .3em;
  }

  .he-author-blurb a.more {
    display: block;
  }
}

.he-author-blurb a.more {
  font-family: var(--gh-font-heading);
  font-weight: normal;
  color: var(--ghost-accent-color);
}










/** ====================================== */
/** ============ FOOTER STYLE ============ */
/** ====================================== */

footer.gh-outer {
  grid-column: var(--viewport-column-content-start) / span var(--viewport-column-content-end);
}

.has-dark-text .gh-footer-logo {
  filter: invert(1);
}

.social-media {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0.5em 0 0;
  list-style-type: none;
  grid-column: 1 / span 3;

  li {
    padding: 0 5px;

    i,
    img {
      &:hover {
        opacity: 1;
      }

      display: grid;
      height: 35px;
      width: 35px;
      font-size: 35px;
      place-content: center;
      opacity: .5;
    }
  }
}

svg.social-icon {
  height: 32px;
  width: 32px;
  object-fit: contain;
}

svg.social-icon path {
  fill: rgb(from currentColor r g b / .4);
}

svg.social-icon:hover path {
  fill: currentColor;
}

.he-copyright {
  display: flex;
  align-items: center;
  flex-direction: column;
  grid-column: 3 / -2;
}

.gh-copyright {
  /* width: 80vw; */
  text-align: center;
  margin-bottom: 2rem;
}

.llm-notice {
  /* width: 80vw; */
  display: block;

  p {
    /* width: 80vw; */
    display: block;
    white-space: normal;
    text-transform: uppercase;
    color: rgb(from currentColor r g b / .05);
    font-size: smaller;
    margin-bottom: 1em;
  }
}

.gh-content pre {
  background-color: #1e1e1e;
  color: #d4d4d4;
}






/** ====================================== */
/** ============ FOOTER STYLE ============ */
/** ====================================== */


kbd {
  --background: var(--color-light-gray);
  --shadow-factor: 0.5;
  --shadow: hsl(from var(--background) h s calc(l * var(--shadow-factor)));
  color: black;
  background: var(--background);
  font-family: var(--gh-font-heading);
  /* background-image: linear-gradient(90deg, #a7a7a7 0%, #ffffff 30%, #ffffff 80%, #a7a7a7 100%); */
  border-radius: 0.25em;
  padding: 0 0.25em;
  margin: 0 0.25em;
  box-shadow: 0 0.1em 0 0.15em var(--shadow);
  outline: 0.05em solid var(--color-dark-gray);
  font-size: 0.9em;
  height: 1lh;
  min-width: 1lh;
  font-weight: bold;
  font-size: .9em;
}

.gamepad-trigger,
.xb-trigger,
.xbox-trigger,
.gh-trigger,
.gc-trigger,
.ps-trigger,
.playstation-trigger,
.deck-trigger {
  text-transform: uppercase;
  padding: 0 .25lh;
  border-radius: 0 0 0.25em 0.25em;
}

.gamepad-bumper,
.gh-z,
.gc-z,
.xb-bumper,
.xbox-bumper,
.ps-bumper,
.playstation-bumper,
.deck-bumper,
.deck-steam,
.deck-qam {
  text-transform: uppercase;
  padding: 0 .25lh;
  border-radius: 0.25em;
}

.gh-a,
.gc-a,
.gh-b,
.gc-b,
.gh-c,
.gc-c,
.gh-stick,
.gc-stick {
  height: 1lh;
  width: 1lh;
  border-radius: 50%;
  text-transform: uppercase;
}

.gh-a,
.gc-a {
  color: white;
  --background: #00ae9e;
}

.gh-b,
.gc-b {
  color: white;
  --background: #ea2525;
}

.gh-c,
.gc-c {
  color: black;
  --background: #eab122;
}

.gh-z,
.gc-z {
  color: white;
  --background: #5556d5;
  --shadow-factor: 0.75;
}

.gh-stick,
.gc-stick {
  color: black;
  --background: #e0e6f4;
  --shadow: #9b9ea5;
}

.gh-trigger,
.gc-trigger {
  --background: var(--color-light-gray);
  border-radius: 0 0 0.65em 0.65em;
}

.xb-a,
.xbox-a,
.xb-b,
.xbox-b,
.xb-x,
.xbox-x,
.xb-y,
.xbox-y {
  height: 1lh;
  width: 1lh;
  border-radius: 50%;
  text-transform: uppercase;
}

.xb-a,
.xbox-a {
  color: white;
  --background: #6c9f05;
}

.xb-b,
.xbox-b {
  color: white;
  --background: #de2e19;
}

.xb-x,
.xbox-x {
  color: white;
  --background: #1b64e3;
}

.xb-y,
.xbox-y {
  color: black;
  --background: #f69900;
}

.xb-home,
.xbox-home {
  &:before {
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ctitle%3Emicrosoft-xbox%3C%2Ftitle%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M6.43%2C3.72C6.5%2C3.66%206.57%2C3.6%206.62%2C3.56C8.18%2C2.55%2010%2C2%2012%2C2C13.88%2C2%2015.64%2C2.5%2017.14%2C3.42C17.25%2C3.5%2017.54%2C3.69%2017.7%2C3.88C16.25%2C2.28%2012%2C5.7%2012%2C5.7C10.5%2C4.57%209.17%2C3.8%208.16%2C3.5C7.31%2C3.29%206.73%2C3.5%206.46%2C3.7M19.34%2C5.21C19.29%2C5.16%2019.24%2C5.11%2019.2%2C5.06C18.84%2C4.66%2018.38%2C4.56%2018%2C4.59C17.61%2C4.71%2015.9%2C5.32%2013.8%2C7.31C13.8%2C7.31%2016.17%2C9.61%2017.62%2C11.96C19.07%2C14.31%2019.93%2C16.16%2019.4%2C18.73C21%2C16.95%2022%2C14.59%2022%2C12C22%2C9.38%2021%2C7%2019.34%2C5.21M15.73%2C12.96C15.08%2C12.24%2014.13%2C11.21%2012.86%2C9.95C12.59%2C9.68%2012.3%2C9.4%2012%2C9.1C12%2C9.1%2011.53%2C9.56%2010.93%2C10.17C10.16%2C10.94%209.17%2C11.95%208.61%2C12.54C7.63%2C13.59%204.81%2C16.89%204.65%2C18.74C4.65%2C18.74%204%2C17.28%205.4%2C13.89C6.3%2C11.68%209%2C8.36%2010.15%2C7.28C10.15%2C7.28%209.12%2C6.14%207.82%2C5.35L7.77%2C5.32C7.14%2C4.95%206.46%2C4.66%205.8%2C4.62C5.13%2C4.67%204.71%2C5.16%204.71%2C5.16C3.03%2C6.95%202%2C9.35%202%2C12A10%2C10%200%200%2C0%2012%2C22C14.93%2C22%2017.57%2C20.74%2019.4%2C18.73C19.4%2C18.73%2019.19%2C17.4%2017.84%2C15.5C17.53%2C15.07%2016.37%2C13.69%2015.73%2C12.96Z%22%20%2F%3E%3C%2Fsvg%3E);
  }
}

.xb-bumper,
.xbox-bumper {
  border-radius: .5em 0 0 .2em;
  &.left {
    border-radius: .5em 0 0 .2em;
  }
  &.right{
    border-radius: 0 .5em .2em 0;
  }
}

.ps-a,
.playstation-a,
.ps-cross,
.playstation-cross,
.ps-b,
.playstation-b,
.ps-circle,
.playstation-circle,
.ps-x,
.playstation-x,
.ps-square,
.playstation-square,
.ps-y,
.playstation-y,
.ps-triangle,
.playstation-triangle,
.xb-home,
.xbox-home,
.ps-home,.playstation-home
.deck-power {
  --background: #484547;
  --shadow-factor: 0.7;
  font-weight: bold;
  /* font-size: 0rem; */
  height: 1lh;
  width: 1lh;
  border-radius: 50%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  width: 1ch;
  position: relative;

  &:before {
    /* font-size: 1.9rem; */
    /* display: inline-block; */
    content: "";
    display: inline-block;
    height: 1ch;
    width: 1ch;
    background-size: contain;
    background-position: center;
    position: absolute;
    left: 0.4ch;
    top: 0.4ch;
  }
}

.ps-cross,
.playstation-cross,
.ps-a,
.playstation-a {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2240.252998mm%22%20height%3D%2240.252998mm%22%20viewBox%3D%220%200%2040.252998%2040.252998%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%2387a9e6%3B%22%20d%3D%22M%203.6193044%2C-6.2025364e-4%200.05222445%2C3.5198333%2016.469784%2C20.160659%200.05222445%2C36.801486%203.6193044%2C40.321421%2019.990234%2C23.728771%2036.360664%2C40.321421%2039.929814%2C36.801486%2023.511214%2C20.160659%2039.929814%2C3.5198333%2036.360664%2C-6.2025364e-4%2019.990234%2C16.59203%20Z%22%2F%3E%3C%2Fsvg%3E);
  }

  /* color: #87a9e6; */
  color: rgb(0 0 0 / 0);
}

.ps-circle,
.playstation-circle,
.ps-b,
.playstation-b {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2240.252998mm%22%20height%3D%2240.252998mm%22%20viewBox%3D%220%200%2040.252998%2040.252998%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23d65663%22%20d%3D%22M%2020.160156%2C0%20C%209.0559781%2C0%200%2C9.0559781%200%2C20.160156%20c%200%2C11.104178%209.0559781%2C20.16211%2020.160156%2C20.16211%2011.104178%2C0%2020.16211%2C-9.057932%2020.16211%2C-20.16211%20C%2040.322266%2C9.0559781%2031.264334%2C0%2020.160156%2C0%20Z%20m%200%2C5.1386719%20c%208.326784%2C0%2015.023438%2C6.6947011%2015.023438%2C15.0214841%200%2C8.326784%20-6.696654%2C15.023438%20-15.023438%2C15.023438%20-8.326783%2C0%20-15.0214841%2C-6.696654%20-15.0214841%2C-15.023438%200%2C-8.326783%206.6947011%2C-15.0214841%2015.0214841%2C-15.0214841%20z%22%20%2F%3E%3C%2Fsvg%3E);
  }

  /* color: #d65663; */
  color: rgb(0 0 0 / 0);
}

.ps-square,
.playstation-square,
.ps-x,
.playstation-x {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2240.252998mm%22%20height%3D%2240.252998mm%22%20viewBox%3D%220%200%2040.252998%2040.252998%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23dc8bd4%3B%22%20d%3D%22M%200%2C0%20V%202.5%2040.064453%20H%2040.253906%20V%200%20Z%20M%205%2C5%20H%2035.253906%20V%2035.064453%20H%205%20Z%22%20%2F%3E%3C%2Fsvg%3E);
  }

  ;
  /* color: #dc8bd4 */
  color: rgb(0 0 0 / 0);
}

.ps-triangle,
.playstation-triangle,
.ps-y,
.playstation-y {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2240.252998mm%22%20height%3D%2240.252998mm%22%20viewBox%3D%220%200%2040.252998%2040.252998%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%2347c0bf%3B%22%20d%3D%22M%2020.1875%2C0.109375%2017.949219%2C4.5664062%200.05273437%2C40.210937%2040.314453%2C40.322266%20Z%20m%20-0.0059%2C11.15625%2012.029296%2C24.033203%20-24.0644526%2C-0.06641%20z%22%2F%3E%3C%2Fsvg%3E);
  }

  /* color: #47c0bf; */
  color: rgb(0 0 0 / 0);
}

.ps-trigger,
.playstation-trigger,
.ps-bumper,
.playstation-bumper {
  color: white;
  --background: #5d5b59;
}

.ps-trigger,
.playstation-trigger {
  border-radius: 0 0 .9em .9em;
}

.xb-start,
.xbox-start,
.xb-menu,
.xbox-menu,
.ps-start,
.playstation-start {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ctitle%3Esony-playstation%3C%2Ftitle%3E%3Cpath%20d%3D%22M9.5%2C4.27C10.88%2C4.53%2012.9%2C5.14%2014%2C5.5C16.75%2C6.45%2017.69%2C7.63%2017.69%2C10.29C17.69%2C12.89%2016.09%2C13.87%2014.05%2C12.89V8.05C14.05%2C7.5%2013.95%2C6.97%2013.41%2C6.82C13%2C6.69%2012.76%2C7.07%2012.76%2C7.63V19.73L9.5%2C18.69V4.27M13.37%2C17.62L18.62%2C15.75C19.22%2C15.54%2019.31%2C15.24%2018.83%2C15.08C18.34%2C14.92%2017.47%2C14.97%2016.87%2C15.18L13.37%2C16.41V14.45L13.58%2C14.38C13.58%2C14.38%2014.59%2C14%2016%2C13.87C17.43%2C13.71%2019.17%2C13.89%2020.53%2C14.4C22.07%2C14.89%2022.25%2C15.61%2021.86%2C16.1C21.46%2C16.6%2020.5%2C16.95%2020.5%2C16.95L13.37%2C19.5V17.62M3.5%2C17.42C1.93%2C17%201.66%2C16.05%202.38%2C15.5C3.05%2C15%204.18%2C14.65%204.18%2C14.65L8.86%2C13V14.88L5.5%2C16.09C4.9%2C16.3%204.81%2C16.6%205.29%2C16.76C5.77%2C16.92%206.65%2C16.88%207.24%2C16.66L8.86%2C16.08V17.77L8.54%2C17.83C6.92%2C18.09%205.2%2C18%203.5%2C17.42Z%22%20%2F%3E%3C%2Fsvg%3E);
  }
}

.ps-home,.playstation-home {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ctitle%3Esony-playstation%3C%2Ftitle%3E%3Cpath%20d%3D%22M9.5%2C4.27C10.88%2C4.53%2012.9%2C5.14%2014%2C5.5C16.75%2C6.45%2017.69%2C7.63%2017.69%2C10.29C17.69%2C12.89%2016.09%2C13.87%2014.05%2C12.89V8.05C14.05%2C7.5%2013.95%2C6.97%2013.41%2C6.82C13%2C6.69%2012.76%2C7.07%2012.76%2C7.63V19.73L9.5%2C18.69V4.27M13.37%2C17.62L18.62%2C15.75C19.22%2C15.54%2019.31%2C15.24%2018.83%2C15.08C18.34%2C14.92%2017.47%2C14.97%2016.87%2C15.18L13.37%2C16.41V14.45L13.58%2C14.38C13.58%2C14.38%2014.59%2C14%2016%2C13.87C17.43%2C13.71%2019.17%2C13.89%2020.53%2C14.4C22.07%2C14.89%2022.25%2C15.61%2021.86%2C16.1C21.46%2C16.6%2020.5%2C16.95%2020.5%2C16.95L13.37%2C19.5V17.62M3.5%2C17.42C1.93%2C17%201.66%2C16.05%202.38%2C15.5C3.05%2C15%204.18%2C14.65%204.18%2C14.65L8.86%2C13V14.88L5.5%2C16.09C4.9%2C16.3%204.81%2C16.6%205.29%2C16.76C5.77%2C16.92%206.65%2C16.88%207.24%2C16.66L8.86%2C16.08V17.77L8.54%2C17.83C6.92%2C18.09%205.2%2C18%203.5%2C17.42Z%22%20%2F%3E%3C%2Fsvg%3E)
  }
}

.deck-a,
.deck-b,
.deck-x,
.deck-y,
.deck-steam,
.deck-qam {
  --background: #222;
  color: #d9def1;
  border-radius: 50%;
  --shadow: #556;
  --shadow-factor: 1.9;
}

.deck-power {
  --background: #f16f33;
  --shadow-factor: 0.5;
  border-radius: 50%;
  height: 0.9lh;
  width: 0.6lh;

  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ctitle%3Epower%3C%2Ftitle%3E%3Cpath%20d%3D%22M16.56%2C5.44L15.11%2C6.89C16.84%2C7.94%2018%2C9.83%2018%2C12A6%2C6%200%200%2C1%2012%2C18A6%2C6%200%200%2C1%206%2C12C6%2C9.83%207.16%2C7.94%208.88%2C6.88L7.44%2C5.44C5.36%2C6.88%204%2C9.28%204%2C12A8%2C8%200%200%2C0%2012%2C20A8%2C8%200%200%2C0%2020%2C12C20%2C9.28%2018.64%2C6.88%2016.56%2C5.44M13%2C3H11V13H13%22%20%2F%3E%3C%2Fsvg%3E);
  }
}

.deck-stick {
  border-radius: 50%;
  color: #d9def1;
}

.deck-bumper,
.deck-trigger {
  --background: #2b2b2b;
  color: white;
}

.controller-glyph,
.xb-home,
.xbox-home,
.xb-start,
.xbox-start,
.xb-menu,
.xbox-menu,
.ps-start,
.playstation-start
.ps-home,
.playstation-home,
.deck-qam,
.deck-power {
  display: inline-block;
  color: transparent;
  vertical-align: middle;

  &:before {
    inset: 0;
    background-position: center;
    background-repeat: none;
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

.deck-steam,
.deck-qam {
  border-radius: .5lh;
  text-transform: uppercase;
  width: 7ch;
  display: inline-block;
  text-align: center;
  overflow: hidden;
}

.deck-qam {
  &:before {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ctitle%3Edots-horizontal%3C%2Ftitle%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M16%2C12A2%2C2%200%200%2C1%2018%2C10A2%2C2%200%200%2C1%2020%2C12A2%2C2%200%200%2C1%2018%2C14A2%2C2%200%200%2C1%2016%2C12M10%2C12A2%2C2%200%200%2C1%2012%2C10A2%2C2%200%200%2C1%2014%2C12A2%2C2%200%200%2C1%2012%2C14A2%2C2%200%200%2C1%2010%2C12M4%2C12A2%2C2%200%200%2C1%206%2C10A2%2C2%200%200%2C1%208%2C12A2%2C2%200%200%2C1%206%2C14A2%2C2%200%200%2C1%204%2C12Z%22%20%2F%3E%3C%2Fsvg%3E);
  }

  color: transparent;
}