/* reusable */
.masked-icon {
  display: inline-block;
  width: 24px;
  height: 24px;

  background-color: currentColor;
  mask-image: var(--src);
  mask-size: 100%;
}

/* header */
.page > header > .chips {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.page > header > .chips a {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding: 0.625rem 0.75rem;
  width: 100%;

  background-color: #00000008;
  text-decoration: none;
  color: inherit;

  border-radius: 6px;
  box-shadow: 0 1.5px 1px #0001 inset;
}

.page > header > .chips a span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;

  text-transform: uppercase;
  opacity: 0.6;
}

.page > header > .chips a span .masked-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.page > header > .chips a p {
  font-weight: 500;
  opacity: 0.8;
}

.page > header .socials {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;

  padding: 0.5rem;

  border: 2px dashed var(--stitch-col);
  border-radius: 10px;
}

.page > header .socials > a {
  display: flex;
  justify-content: center;
  align-items: center;

  --accent: var(--foreground);
  background: linear-gradient(to bottom, #fff1 0%, #fff0 75%), linear-gradient(to bottom, #0000 25%, #0001 100%), var(--accent);

  text-decoration: none;
  color: #fff;

  width: 2.5rem;
  height: 2.5rem;

  border-radius: 3px;
  border-style: solid;
  border-color: #0004;

  border-width: 0;
  border-bottom-width: 2px;

  transition: border-width 0.05s;
}

.page > header .socials > a:active {
  border-bottom-width: 0px;
  border-top-width: 2px;
}

.page > header .socials > a[data-variant="discord"] {
  --accent: #5865f2;
}

.page > header .socials > a[data-variant="github"] {
  --accent: #22262c;
}

.page > header .socials > a[data-variant="kofi"] {
  --accent: #ff6433;
}

.page > header .socials > a:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.page > header .socials > a:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* chips */
#local-time {
  font-style: normal;
}

@media screen and (max-width: 640px) {
  .page > header .info,
  .page > header .chips {
    flex-direction: column;
  }

  .page > header .info div {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-color-scheme: dark) {
  .page > header > .chips a {
    background-color: #fff1;
    box-shadow: 0 1.5px 1px #fff1 inset;
  }

  .page > header .socials > a[data-variant="github"] {
    --accent: #edf0f5;
    color: #000;
  }
}