.unselectable {
  /*セレクト禁止 (文字を選択できなくなる)*/
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Standard syntax */
}

:root {
  --color1: #d9e8fa;
  --color2: #b8d0ed;
  --color3: #1d3d5e;
  --color4: #0d2d4d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: black;

  /* Light Mode */
  --color: var(--color3);
  --bg-color: var(--color1);
  --body-color: var(--color2);

  /* 0.3s に js から変える */
  --default-transition: 0s ease-in-out 0s;
  --scrollbar-width: 0px;
}

.darkmode {
  /* Dark Mode */
  --color: var(--color2);
  --bg-color: var(--color3);
  --body-color: var(--color4);
}

#entire-page {
  overflow-x: hidden;
  overflow-y: scroll;
  /* display: flex;
  flex-direction: row;
  justify-content: center; */
  width: 100vw;
  height: 100vh;
  scrollbar-color: #c0c0c080 var(--bg-color);
  font-size: 20px;

  background-color: var(--body-color);
  color: var(--color);
  transition: background-color var(--default-transition), scrollbar-color var(--default-transition);
}

#page-container {
  --width: min(800px, 100vw);
  width: var(--width);
  height: max-content;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bolder;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.serif {
  font-family: serif;
}

.date {
  font-size: 0.7em;
}

.title {
  text-align: center;
  font-size: calc(var(--width) / 10);
  padding: 1em 0;
  transition: color var(--default-transition);
}

/* Card */
#table {
  padding: 0 1.5em;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}

.card-container {
  color: inherit;
  text-decoration: inherit;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--default-transition);
  z-index: 1;
}

.card-container>div {
  overflow: hidden;
}

.card {
  border: 0.1em solid var(--color);
  border-radius: 0.5em;
  padding: 0.5em;
  background-color: var(--bg-color);
  overflow: hidden;
  cursor: pointer;
  transition: color var(--default-transition), background-color var(--default-transition), border-color var(--default-transition);
  margin: 0.5em 0;
  /* color: inherit;
  text-decoration: inherit; */
}

.main {
  position: relative;
}

.name {
  text-align: center;
  margin-bottom: 0.3em;
}

.main-tags,
.sub-tags {
  display: flex;
  flex-direction: row;
  font-size: 16px;
  flex-wrap: wrap;
}

.sub-tags {
  margin: 10px 0;
}

/* 10px = 20px * 0.5em */

.tag-type,
.tag-status,
.tag-accessibility {
  background-color: #a0a0a0;
}

.tag-type {
  padding: 0.2em 0.5em;
  margin: 0.2em 0.4em;
  border-radius: 0.2em;
}

.tag-status {
  padding: 0.2em 0.5em;
  margin: 0.2em 0.4em;
  border-radius: 0.95em;
}

.tag-accessibility {
  padding: 0.2em 0.7em;
  margin: 0.2em;
  clip-path: polygon(0 50%, 0.95em 0, calc(100% - 0.95em) 0, 100% 50%, calc(100% - 0.95em) 100%, 0.95em 100%);
}

.description {
  margin-bottom: 10px;
}

.description-button,
.description-button * {
  position: absolute;
  bottom: 0;
  right: 0;
}

.description-button::before {
  content: "";
  width: 16px;
  height: 16px;
  clip-path: path("M 2 3 L 8 9 L 14 3 L 16 5 L 8 13 L 0 5 Z");
  background-color: var(--color);
  display: block;
  transition: background-color var(--default-transition), clip-path var(--default-transition);
}

.card:has(.check-button:checked) .description-button::before {
  clip-path: path("M 2 13 L 8 7 L 14 13 L 16 11 L 8 3 L 0 11 Z");
}

.check-button {
  width: 8em;
  height: 8em;
  margin: 0;
  bottom: -1em;
  right: -1em;
  opacity: 0;
  cursor: pointer;
}

.sub {
  position: relative;
  top: 0.5em;
  /* height: 0px; */
  /* transition: height var(--default-transition); */

  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms grid-template-rows ease;
}

.card:has(.check-button:checked) .sub {
  /* height: 6em; */
  grid-template-rows: 1fr;
}

.sub>div {
  overflow: hidden;
}

#hidden {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  z-index: -1;
}

#header {
  height: 40px;
  display: flex;
  flex-direction: row-reverse;
  margin: 0 2em;
  z-index: 2;
  position: relative;
}

.icon {
  width: 40px;
  height: 40px;
  position: relative;
  background-color: var(--bg-color);
  padding: 5px;
  cursor: pointer;
  transition: background-color var(--default-transition);
}

.icon::before {
  content: "";
  position: absolute;
  background-color: var(--color);
  transition: background-color var(--default-transition);
  clip-path: var(--icon-url);
}

#language::before {
  width: 1000px;
  height: 1000px;
  clip-path: url("#earth");
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.03);
}

#darkmode::before {
  width: 1000px;
  height: 1000px;
  clip-path: url("#moon");
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.03);
}

#information::before {
  width: 1000px;
  height: 1000px;
  clip-path: url("#i-mark");
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.03);
}

#bug::before {
  width: 1000px;
  height: 1000px;
  /* clip-path: url("#-bug"); */
  /* clip-path: url("icons/icons.svg#-bug"); */
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.03);
}

#settings::before {
  width: 1000px;
  height: 1000px;
  /* clip-path: url("#-settings"); */
  /* clip-path: url("icons/icons.svg#-settings"); */
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.03);
}

#information>.dropdown {
  /* width: calc(var(--width) - 4em - var(--scrollbar-width)); */
  width: calc(var(--width) - 4em);
  right: -80px;
}

#information-container>div {
  text-align: center;
  padding: 0.5em;
}

.dropdown {
  width: 6em;
  top: 2em;
  right: 0;
  position: absolute;
  text-align: right;

  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms grid-template-rows ease;
}

.dropdown>div {
  overflow: hidden;
}

.dropdown div div {
  border: solid var(--color);
  transition: border var(--default-transition);
  border-width: 0.1em 0;
}

.dropdown div div div {
  background-color: var(--bg-color);
  padding: 0 0.5em;
  transition: color var(--default-transition), background-color var(--default-transition);
  border: none;
}

.ribbon>div {
  position: absolute;
  background-color: gray;
  right: 0;
  top: 0;
  transform: rotate(25deg) translate(7.5em, -3em);
  color: white;
  width: 20em;
  text-align: center;
}

.ribbon {
  position: absolute;
  width: calc(100% + 1em);
  height: calc(100% + 1em);
  box-sizing: content-box;
  overflow: hidden;
  top: -0.5em;
  left: -0.5em;
  transition: color var(--default-transition), background-color var(--default-transition), opacity var(--default-transition);
}

.card:has(.check-button:checked) .ribbon {
  opacity: 0.2;
}

#search-box {
  resize: none;
  width: calc(100% - 6.5em);
  height: 40px;
  padding: 0.5em;
  font-size: 20px;
  display: block;
  background-color: var(--body-color);
  color: var(--color);
  border: none;
  transition: background-color var(--default-transition), color var(--default-transition);
  flex-grow: 1;
}

#search-box:focus {
  outline: none;
}

#search-description {
  position: relative;
}

#search-card {
  border: 0.1em solid var(--color);
  border-radius: 0.5em;
  padding: 0.5em;
  background-color: var(--bg-color);
  overflow: hidden;
  margin: 0.5em 0;
  position: relative;
  transition: border-color var(--default-transition), background-color var(--default-transition), color var(--default-transition);
}

#search-box-container {
  position: relative;
  width: calc(100% - 1em);
  height: 100%;
  display: flex;
  flex-direction: row;
}

#search {
  padding: 0 1.5em;
}

#search .check-button {
  right: -5.5em;
}

#search-card:has(.check-button:checked) .description-button::before {
  clip-path: path("M 2 13 L 8 7 L 14 13 L 16 11 L 8 3 L 0 11 Z");
}

#search-button {
  width: 40px;
  height: 40px;
  /* position: absolute; */
  /* right: 2em;
  top: 0.5em; */
  margin: 0 0.5em;
}

#search-icon::before {
  width: 1000px;
  height: 1000px;
  clip-path: url("#search-mark");
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.03);
}

#delete-button {
  width: 40px;
  height: 40px;
  margin-right: 0.5em;
}

#delete-icon::before {
  width: 40px;
  height: 40px;
  clip-path: path("M 15 12 L 22 5 L 25 8 L 18 15 L 25 22 L 22 25 L 15 18 L 8 25 L 5 22 L 12 15 L 5 8 L 8 5 Z");
}

#search-sub {
  position: relative;
  top: 0.5em;
  display: grid;
  grid-template-rows: 0fr;
  transition: 300ms grid-template-rows ease;
}

#search-card:has(.check-button:checked) #search-sub {
  grid-template-rows: 1fr;
}

#search-sub>div {
  overflow: hidden;
}

.search-tag-container {
  transition: background-color var(--default-transition), color var(--default-transition);
  position: relative;
  overflow: hidden;
  border-bottom: 0.2em solid transparent;
}

.search-tag-container:has(.search-tag-button:checked) {
  border-bottom-color: var(--color);
}

.search-tag-container:has(.search-tag-button:checked) div {
  opacity: 1;
}

.search-tag-container div {
  overflow: hidden;
  opacity: 0.5;
}

.search-tag-button,
.favorite-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10em;
  height: 10em;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#footer {
  padding: 1.5em;
}

#copyright {
  font-size: 0.6em;
  text-align: center;
}

#notfound {
  position: absolute;
  text-align: center;
  top: 0;
  padding: 1em 1.5em;
  transform: translate(-50%, 0);
  left: 50%;
  width: 100%;
  opacity: 1;
  transition: opacity var(--default-transition);
}

.favorite {
  width: 40px;
  height: 40px;
  /* transition: background-color var(--default-transition); */
  background-color: inherit;
  /* --s: drop-shadow(0 0 0.05em var(--color));
  filter: var(--s) var(--s) var(--s) var(--s) var(--s); */
  overflow: hidden;
  position: relative;
}

.card .favorite {
  z-index: 2;
}

.favorite::before {
  content: "";
  display: block;
  position: relative;
  margin: 5px;
  width: 1000px;
  height: 1000px;
  clip-path: url("#favorite");
  transform: translate(calc(-50% + 15px), calc(-50% + 15px)) scale(0.035);
  background-color: #80808080;
  transition: background-color var(--default-transition);
}

/* .darkmode .favorite:has(.favorite-button:checked)::before,
.darkmode .search-tag-container .favorite::before {
  background-color: #bb002f;
}

body:not(.darkmode) .favorite:has(.favorite-button:checked)::before,
body:not(.darkmode) .search-tag-container .favorite::before {
  background-color: #ff89a7
} */

.favorite:has(.favorite-button:checked)::before,
.search-tag-container .favorite::before {
  background-color: #ff4372ab;
}

#access-counter {
  padding-top: 5em;
  /* text-align: end; */
}

#access-counter img {
  background-color: var(--color2);
  padding: 5px;
  /* transition: background-color var(--default-transition); */
}

#back-to-top {
  position: absolute;
  right: 0.25em;
  bottom: 0.25em;
  width: 2.5em;
  height: 2.5em;
  background-color: var(--bg-color);
  border: 0.1em solid var(--color);
  border-radius: 0.5em;
  z-index: -1;
  box-sizing: content-box;
  opacity: 0;
  transition: opacity var(--default-transition), z-index var(--default-transition), background-color var(--default-transition), border-color var(--default-transition);
  cursor: pointer;
}

#back-to-top::before {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--color);
  clip-path: path("M 25 15 l 15 15 l -3 3 l -12 -12 l -12 12 l -3 -3 l 15 -15 Z");
  transition: background-color var(--default-transition);
}



@media (any-hover: hover) {
  .card:hover {
    color: var(--bg-color);
    background-color: var(--color);
  }

  .card:hover .description-button::before {
    background-color: var(--bg-color);
  }

  .icon:hover {
    background-color: var(--color);
  }

  .icon:hover::before {
    background-color: var(--bg-color);
  }

  .dropdown div div div:hover {
    background-color: var(--color);
    color: var(--bg-color);
  }

  .search-tag-container:hover {
    background-color: var(--color);
    color: var(--bg-color);
  }

  /* 
  #access-counter a:hover {
    background-color: var(--color);
  } */

  #back-to-top {
    right: calc(0.25em + 17px);
  }

  #back-to-top:hover {
    background-color: var(--color);
  }

  #back-to-top:hover::before {
    background-color: var(--bg-color);
  }
}

.icon:hover .dropdown {
  grid-template-rows: 1fr;
}

/* #scrollbar-measurer {
  position: relative;
  width: 100%;
  height: 0;
} */