:root {
  font-family: "nasin-nanpa", "TX-02", "Berkeley Mono", monospace;
  --text-color: #ebf6ff;
  --text-color-alt: #c1c7db;
  --background-color: #010206;
  --background-color-alt: #1e1b30;
  --link-color: #2a97b1;
  --line-height: 1.5rem;
  --page-width: 100ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-color: #1e1b30;
    --text-color-alt: #010206;
    --background-color: #ebf6ff;
    --background-color-alt: #c1c7db;
  }
}

a:link,
a:visited {
  color: var(--link-color);
}

body {
  max-width: calc(min(var(--page-width), round(down, 100%, 1ch)));
}

*+* {
  margin-top: 0;
}

.alert {
  font-weight: bold;
}

.alert-todo td {
  background-color: var(--base0b);
  color: var(--background-color);
  border-color: var(--base0b);
}

.alert-tip td {
  background-color: var(--base0c);
  border-color: var(--base0c);
  color: var(--background-color);
}

.alert-note td {
  background-color: var(--base0c);
  border-color: var(--base0c);
  color: var(--background-color);
}

.alert-quote td {
  background-color: var(--base01);
  border-color: var(--base01);
}

p mjx-container {
  background-color: rgba(from var(--background-color-alt) r g b / 0.75);
}

.about-me {
  width: min-content;
  margin: auto;

  td {
    text-align: center;
    line-height: 1rem;

    h1 {
      line-height: 1rem;
      font-size: 1rem;
      margin: 0;
    }
  }
}

.socials {
  --social-icon-size: 4ch;
  --social-name-size: 12ch;

  th {
    text-align: center;
    height: 1em;
  }

  .social-icon {
    width: var(--social-icon-size);
    min-width: var(--social-icon-size);
  }

  .social-name {
    width: var(--social-name-size);
    min-width: var(--social-name-size);
    max-width: var(--social-name-size);
  }

  .social-link {
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(var(--page-width) / 2 - var(--social-icon-size) - var(--social-name-size) - 2ch);
    max-width: calc(var(--page-width) / 2 - var(--social-icon-size) - var(--social-name-size) - 2ch);
  }
}

.social-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.socials-text {
  text-align: center;
  display: flex;
}

.btn-88x31 {
  border: none !important;

  img {
    width: 88px;
    height: 31px;
  }
}