@import "tailwindcss";

@plugin "@tailwindcss/typography";

:root {
  --haikei: #f6f5f4;
  --mozi: #1c1b1b;
  --hon: #75726f;
  --hou: #979797;
  --saki: #626f9e;
  --mikan: #b47d5b;

  /* 前 */
  --midori: #7bad7b;
  --koiao: #7d96c9;
  --hai: #626262;
  --usu: #e9e9e9;
  --sen: #9e9ea6;
  --shiki: #fff;

  /* astro-embed */
  .link-preview {
    color: var(--hon);
    margin-top: -0.45rem;
    margin-bottom: 0.55rem;
    font-size: 1.05rem;

    a {
      color: var(--saki);
      transition: 500ms;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    a:hover {
      color: var(--mikan);
      transition: 500ms;
    }
  }

  --link-preview-width: w-full;
}

@media (prefers-color-scheme: dark) {
  :root {
    --haikei: #0d0d0d;
    --mozi: #e6e6e8;
    --sentaku: #7395b4;
    --mikan: #ebab83;
    --midori: #5b815b;
    --koiao: #415674;
    --hai: #828282;
    --usu: #202020;
    --sen: #4a4a51;
    --shiki: #121212;

    /* 光から */
    --hon: #acacac;
    --hou: #616161;
    --saki: #8c9bd1;
  }

  .astro-code,
  .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

@font-face {
  font-family: "Inter Variablele";
  src: url("/fonts/InterVariableKomeFuto.woff2");
  font-feature-settings: "calt", "cv08", "cv05";
  /* 日本語との大きさのバランスを整えたい */
  size-adjust: 105%;
}

@font-face {
  font-family: "Commit Monono";
  font-weight: 400;
  src: url("/fonts/CommitMonoAcha-400-Regular.woff2");
}

@font-face {
  font-family: "Commit Monono";
  font-weight: 700;
  src: url("/fonts/CommitMonoAcha-700-Regular.woff2");
}

html {
  font-family: "Inter Variablele", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  background-color: var(--haikei);
  color: var(--mozi);
}

code {
  font-family: "Commit Monono", "Hiragino Sans", "Noto Sans Mono CJK JP", "Noto Sans JP", monospace;
}

/* https://ics.media/entry/240411/ */
body {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

::selection {
  background-color: var(--saki);
  color: var(--haikei);
}

b {
  font-weight: 600;
}

.mili:hover {
  color: var(--mikan);
  cursor: pointer;
}

.midori {

  a span:hover,
  code:hover {
    color: var(--midori);
  }
}

.hai {
  color: var(--hou);
}

.ao {
  color: var(--ao);
}

.ao:hover {
  color: var(--mikan);
}

.midashi {
  height: 2.25rem;
  display: flex;
  align-items: center;
}

.futatsu {
  display: flex;
  flex-direction: column;
}

.ikisaki {
  a {
    line-height: 1.8rem;
  }

  .pp,
  p {
    color: var(--mikan);
    line-height: 1.8rem;
  }
}

.fuwa {
  a {
    transition: 500ms;
  }

  a:hover {
    color: var(--saki);
    transition: 500ms;
  }
}

.fuwawa {
  a:hover {
    background-color: var(--saki);
  }
}

.midashini {
  font-size: 1.1rem;
  color: var(--hon);
}

/* 2つ合わせた長さ */
@custom-variant hoso {
  @media (width >=61rem) {
    @slot;
  }
}

/* 右側だけ */
@custom-variant migi {
  @media (width >=48rem) {
    @slot;
  }
}

/* 2つ合わせた長さ以下 */
@custom-variant max-hoso {
  @media (width < 61rem) {
    @slot;
  }
}

@utility hamenu {
  position: sticky;
  top: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  z-index: 100000;
  background-color: var(--haikei);
}