* {
  color: var(--color-text);
  font-family: "Din", "SourceHanSansJP";
  font-weight: 700;
}

@media only screen and (max-width: 600px) {
  .is-desktop {
    display: none !important;
  }
}
@media only screen and (min-width: 600px) {
  .is-mobile {
    display: none !important;
  }
}

:root {
  --vh: 0;
  --full-height: calc(var(--vh) * 100);
}

.hidden {
  display: none;
}

.buttons a {
  background: var(--color-text);
  & p,
  span {
    color: var(--color-fill);
  }
}

.light-mode {
  --color-text: #000000;
  --color-fill: #fefefe;
  --color-fill-secondary: #dfe2eb77;
  --translucent: rgb(255, 255, 255, 0.5);
  .is-light-theme {
    display: block;
  }
  .is-dark-theme {
    display: none;
  }
  .btn-color-twitter {
    background-color: rgba(0, 0, 0);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-instagram {
    background-color: rgba(221, 52, 123);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-bluesky {
    background-color: rgba(20, 150, 254);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-fiicen {
    background-color: rgba(86, 0, 249);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-applePodcast {
    background-color: rgba(123, 27, 186);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-youtubeMusic {
    background-color: rgba(241, 56, 85);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-spotify {
    background-color: rgba(36, 211, 78);
    & p,
    span {
      color: #fff;
    }
  }
}

.dark-mode {
  --color-text: #e9e9e9;
  --color-fill: #1c1c1e;
  --color-fill-secondary: #1c1c1e;
  --translucent: rgb(28, 28, 30, 0.4);
  .is-dark-theme {
    display: block;
  }
  .is-light-theme {
    display: none;
  }
  .btn-color-twitter {
    background-color: rgba(255, 255, 255);
    & p,
    span {
      color: #000;
    }
  }
  .btn-color-instagram {
    background-color: rgba(221, 52, 123);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-bluesky {
    background-color: rgba(20, 100, 254);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-fiicen {
    background-color: rgba(86, 0, 249);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-applePodcast {
    background-color: rgba(123, 27, 186);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-youtubeMusic {
    background-color: rgba(241, 56, 85);
    & p,
    span {
      color: #fff;
    }
  }
  .btn-color-spotify {
    background-color: rgb(5 200 53);
    & p,
    span {
      color: #fff;
    }
  }
}

.blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: var(--translucent);
}

::selection {
  background-color: #c6e3c0;
  color: #000000;
}