* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

body, footer {
  background-color: #333333;
}

body, .lang-jp {
  font-family: "Noto Sans", "Noto Sans JP", "Noto Sans TC", sans-serif;
}

html[lang="zh-Hant"] body, .lang-cn {
  font-family: "Noto Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
}

div {
  display: none;
}

header div, main div, footer div, nav div {
  display: block;
  margin: auto;
}

header, main, footer {
  width: 100%;
}

main {
  min-height: 100%;
}

a, summary {
  cursor: pointer;
}

figure {
  margin: 0;
}

img {
  display: block;
}

nav ul, nav ol {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
}

nav li a {
  text-decoration: none;
}

.clear {
  clear: both;
}

/* Footer */

footer {
  font-size: 12px;
  text-align: center;
}

footer > div {
  padding: 20px 0 10px;
}

footer, footer a {
  color: lightgray;
}

footer a span {
  width: 20px;
  height: 20px;
}

footer li {
  display: inline-block;
  padding: 5px;
}

.link-linktree a:hover {
  color: limegreen;
}

.link-bluesky a:hover {
  color: deepskyblue;
}

.link-pixiv a:hover {
  color: dodgerblue;
}

.link-furaffinity a:hover {
  color: orange;
}

.simple-icons--bluesky {
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037c-.856 3.061-3.978 3.842-6.755 3.37c4.854.826 6.089 3.562 3.422 6.299c-5.065 5.196-7.28-1.304-7.847-2.97c-.104-.305-.152-.448-.153-.327c0-.121-.05.022-.153.327c-.568 1.666-2.782 8.166-7.847 2.97c-2.667-2.737-1.432-5.473 3.422-6.3c-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.simple-icons--furrynetwork {
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.91 0C12.79 0 9.69 0 6.6.03c0 .05-.06.05-.09.08a10.5 10.5 0 0 0-3.66 2.57c-.84.87-1.52 1.9-2.06 3c-.2.38-.38.79-.55 1.2c-.02.08-.05.2-.13.25v6.22c.05.08.05.2.08.3a8.66 8.66 0 0 0 3.42 4.83c.03.03.05.09.11.06c-.03-.03-.03-.06-.06-.08c-.24-.36-.46-.69-.67-1.04a9.1 9.1 0 0 1-1.28-5.57a10.1 10.1 0 0 1 1.71-4.53a23 23 0 0 1 3.64-4.18A13 13 0 0 1 10.32.98A8.8 8.8 0 0 1 14.74.2c.7.06 1.39.17 2.07.27L17 .5c.08.03.13.03.21.03c-.38-.16-.76-.33-1.14-.44c-.05-.02-.1-.02-.16-.08zm-1.66.66c-.43.02-.84.05-1.27.13c-.74.14-1.44.36-2.15.58a7.5 7.5 0 0 0-1.44.62c-.02 0-.08 0-.08.06h.05a28 28 0 0 1 3.05-.33c.51-.03 1.06 0 1.57.08c.76.11 1.47.39 2.12.77a10.8 10.8 0 0 1 4.4 4.7a15.1 15.1 0 0 1 1.38 5.43c.06.65.06 1.34.03 2.02l-.08 1.14c-.03.33-.08.66-.14.99a6 6 0 0 1-.27 1.17a11.7 11.7 0 0 1-1.55 2.73c-.49.66-1.05 1.26-1.6 1.86c-.08.08-.13.13-.19.22c.06 0 .06-.03.08-.03a17 17 0 0 0 2.31-1.61a10.9 10.9 0 0 0 3.2-4.45l.17-.41h.03v5.87c0 .02 0-9.17.02-15c0 .02 0 .05-.02.07l-.03-.09a10.8 10.8 0 0 0-1.52-2.73a9.7 9.7 0 0 0-3.12-2.64A9.76 9.76 0 0 0 14.25.66m9.63 6.54l.01-.02zm-13-3.33c-.4-.04-.8.09-1.19.42a2.3 2.3 0 0 0-.62.9c-.33.8-.38 1.58-.22 2.4c.11.63.4 1.18.92 1.58c.52.44 1.12.5 1.66.2c.33-.2.57-.44.76-.77c.33-.57.46-1.2.46-1.85c0-.3-.02-.58-.08-.88a2.8 2.8 0 0 0-.62-1.4a1.7 1.7 0 0 0-1.08-.6zM16 5.15a2.38 2.38 0 0 0-1.72.83c-.3.27-.46.63-.65.98a3.04 3.04 0 0 0-.38 1.53c0 .38.05.74.21 1.1c.28.65.8 1 1.44 1c.47 0 .85-.16 1.2-.43a3.75 3.75 0 0 0 1.5-2.57c.05-.46 0-.93-.17-1.4c-.16-.4-.4-.75-.82-.92a1.6 1.6 0 0 0-.6-.12zM6.38 7.56c-.44.03-.84.2-1.11.6c-.36.5-.47 1.07-.5 1.64c-.02.6.12 1.15.39 1.67c.22.43.51.82.92 1.1c.52.34 1.17.34 1.63.02c.27-.2.46-.47.6-.77c.27-.63.32-1.3.16-1.99a3.3 3.3 0 0 0-1.06-1.86c-.3-.24-.62-.4-1.03-.4zm11.86 2.64a1.84 1.84 0 0 0-.9.2a3.5 3.5 0 0 0-1.81 1.97a2.44 2.44 0 0 0-.11 1.58c.14.5.4.85.9.99c.19.05.4.08.6.08c.32 0 .54-.03.8-.17c.53-.24.93-.6 1.28-1.03a2.9 2.9 0 0 0 .63-2.46a1.3 1.3 0 0 0-1.09-1.12a2 2 0 0 0-.3-.04m-7.11 1.65c-.08 0-.22 0-.35.03a3.6 3.6 0 0 0-1.5.4c-.6.34-1.1.77-1.57 1.26a10 10 0 0 0-1.39 1.83c-.21.38-.35.8-.32 1.23c.03.25.03.47.14.68c.3.39.7.66 1.19.77c.46.08.92.03 1.38-.03c.52-.05 1-.1 1.5-.08c.78.05 1.5.3 2.12.79c.24.2.46.41.73.6c.51.36 1.06.52 1.68.38c.52-.1.87-.43.98-.95c.1-.44.08-.85.02-1.29a9.5 9.5 0 0 0-.37-1.5a10 10 0 0 0-1-2.26c-.3-.5-.66-.93-1.15-1.26a3.7 3.7 0 0 0-2.09-.6M.11 14.64v2.13c.1.13.16.3.22.46a12.8 12.8 0 0 0 2.41 4.18a9.6 9.6 0 0 0 3.83 2.56c.03 0 .05.03.08.03h8.01c.03-.03.03-.03.05-.03a8.7 8.7 0 0 0 1.99-.9a11.4 11.4 0 0 0 4.26-4.8c.43-1.01.65-2.08.7-3.2a.4.4 0 0 0 0-.24c-.02.02-.05.05-.05.08l-.22.7a8.3 8.3 0 0 1-1.87 3.2a8.1 8.1 0 0 1-2.85 1.91c-.95.39-1.95.55-2.99.6c-.76.03-1.49 0-2.22-.05a24 24 0 0 1-3.1-.44a15.5 15.5 0 0 1-3.75-1.36a10.15 10.15 0 0 1-3.3-2.76a7.5 7.5 0 0 1-1.2-2.07'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.simple-icons--linktree {
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m13.736 5.853l4.005-4.117l2.325 2.38l-4.2 4.005h5.908v3.305h-5.937l4.229 4.108l-2.325 2.334l-5.74-5.769l-5.741 5.769l-2.325-2.325l4.229-4.108H2.226V8.121h5.909l-4.2-4.004l2.324-2.381l4.005 4.117V0h3.472zm-3.472 10.306h3.472V24h-3.472z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.simple-icons--pixiv {
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.94 0A4.953 4.953 0 0 0 0 4.94v14.12A4.953 4.953 0 0 0 4.94 24h14.12A4.953 4.953 0 0 0 24 19.06c-.014 1.355 0-14.12 0-14.12A4.953 4.953 0 0 0 19.06 0Zm1.783 5.465h.904a.37.37 0 0 1 .31.17l.752 1.17a6.172 6.172 0 0 1 10.01 4.834a6.172 6.172 0 0 1-9.394 5.265v2.016a.37.37 0 0 1-.37.367H6.724a.37.37 0 0 1-.37-.367V5.834a.37.37 0 0 1 .37-.37m5.804 2.951a3.222 3.222 0 1 0-.002 6.443a3.222 3.222 0 0 0 .002-6.443'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Menu */

.menubtn {
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menubtn div {
  display: block;
}

.menubtn hr {
  background-color: lightgrey;
  border: none;
}

.menubtn:hover hr {
  background-color: #333333;
}

#menuopen {
  background-color: #333333;
  border: 1px solid lightgrey;
}

#menuopen hr {
  margin: 7px 0;
  height: 2px;
  width: 25px;
}

#menuclose {
  border-radius: 100%;
}

#menuclose hr {
  margin: 0;
  height: 4px;
  width: 30px;
  position: relative;
}

#menuclose hr:first-child {
  top: 2px;
  transform: rotate(45deg);
}

#menuclose hr:last-child {
  top: -2px;
  transform: rotate(-45deg);
}

#menuopen:hover, #menuclose:hover {
  background-color: white;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
}

#menu, #menu nav {
  height: 100%;
  width: 100%;
}

#menu nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  overflow-y: auto;
}

#menu a, #menu b {
  font-family: "Anton", sans-serif;
  font-weight: normal;
  font-size: 48px;
  color: lightgrey;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#menu a:hover {
  color: white;
}

#menu select {
  padding: 5px;
  width: 200px;
  font-size: 16px;
  color: white;
  background-color: #333333;
  cursor: pointer;
}

@media (max-width: 800px) {
  #menu a, #menu b {
    font-size: 32px;
  }
}