/* common */

:root {
	--color-black: hsl(0 0 0);
	--color-white: hsl(0 0 100);
	--color-dark-c: hsl(210 60 20);
	--color-dark-m: hsl(330 60 20);
	--color-dark-y: hsl(30 60 20);
	--color-dark-k: hsl(0 0 20);
	--color-medium-c: hsl(210 60 60);
	--color-medium-m: hsl(330 60 60);
	--color-medium-y: hsl(30 60 60);
	--color-medium-k: hsl(0 0 60);
	--color-light-c: hsl(210 60 96);
	--color-light-m: hsl(330 60 96);
	--color-light-y: hsl(30 60 96);
	--color-light-k: hsl(0 0 96);
	--font-size-xxlarge: 1.5rem;
	--font-size-xlarge: 1.375rem;
	--font-size-large: 1.25rem;
	--font-size-larger: 1.125rem;
	--font-size-medium: 1rem;
	--font-size-smaller: .875rem;
	--font-size-small: .75rem;
	--font-size-xsmall: .625rem;
	--font-size-xxsmall: .5rem;
}

:focus-visible {
	border-radius: .5rem;
	outline: 2px solid var(--color-medium-c);
	outline-offset: 0;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	scrollbar-color: var(--color-medium-k) var(--color-white);
	background: var(--color-white);
	color: var(--color-dark-k);
	font-family: 'Kosugi Maru', sans-serif;
	font-size: clamp(14px, 2svw, 16px);
	line-height: 2;
}

body {
	margin: 0;
}

a {
	color: var(--color-medium-c);
	text-decoration: none;
}

h1 {
	margin: 1rem 0;
	color: var(--color-medium-c);
	font-size: var(--font-size-xxlarge);
}

h2 {
	margin: 1rem 0;
	padding: 1rem 0 0;
	color: var(--color-medium-c);
	font-size: var(--font-size-large);
}

h3 {
	margin: 1rem 0;
	padding: 1em 0 0;
	color: var(--color-medium-c);
	font-size: var(--font-size-medium);
}

h4 {
	margin: 1rem 0;
	padding: 1rem 0 0;
	font-size: var(--font-size-medium);
}

hr {
	margin: 1rem 0;
	border: 0;
	border-block-end: 2px solid var(--color-light-k);
}

img, video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* app */

.app-block {
	display: grid;
	grid: auto 1fr auto / auto;
	min-height: 100svh;
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 50rem;
}

.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 5rem;
	padding: 1rem 0;
	box-sizing: border-box;
}

.app-title {
	display: flex;
	align-items: center;
}

.app-title a {
	display: flex;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
	align-items: center;
}

.app-title img {
	width: 1.5rem;
	height: 1.5rem;
}

.app-title strong {
	display: flex;
	font-size: var(--font-size-large);
	font-weight: bold;
	text-wrap: nowrap;
}

.app-title span:nth-child(1) {
	color: var(--color-medium-c);
}

.app-title span:nth-child(2) {
	color: var(--color-medium-y);
}

.app-title span:nth-child(3) {
	color: var(--color-medium-m);
}

.app-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.app-menu li {
	display: flex;
	align-items: center;
}

.app-menu a {
	display: grid;
	color: var(--color-medium-c);
	text-align: center;
	text-decoration: none;
}

.app-menu a.is-now {
	color: var(--color-medium-m);
}

.app-menu i {
	font-size: var(--font-size-xlarge);
}

.app-menu span {
	font-size: var(--font-size-xsmall);
}

.app-main {
	border-block: 2px solid var(--color-light-k);
}

.app-footer {
	display: flex;
	justify-content: space-between;
	padding: 2rem 0;
}

.app-footer a {
	color: var(--color-medium-k);
	text-decoration: none;
}

/* category */

.category-images {
	display: grid;
	grid: auto / repeat(4, 1fr);
	gap: 1rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.category-images a {
	display: grid;
	overflow: hidden;
	border-radius: .5rem;
}

.category-images img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.category-pages {
	display: grid;
	grid: auto / repeat(3, 1fr);
	gap: 1rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.category-pages a {
	display: grid;
	color: var(--color-medium-k);
	font-size: var(--font-size-smaller);
}

.category-pages img {
	width: 100%;
	border-radius: .5rem;
}

.category-pages span {
	align-self: end;
	overflow: hidden;
	text-overflow: ellipsis;
	text-wrap: nowrap;
}

.category-pager {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin: 1rem auto;
}

.category-pager a,
.category-pager span {
	display: flex;
	place-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 100%;
}

.category-pager a.is-now {
	background: var(--color-medium-c);
	color: var(--color-white);
}

.category-pager span {
	color: var(--color-medium-k);
}

.category-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.category-tags a {
	display: inline-block;
	padding: 0 .5rem;
	border-radius: .5rem;
	background: var(--color-light-k);
	color :var(--color-medium-k);
	font-size: var(--font-size-smaller);
}

.category-tags .is-now {
	background: var(--color-light-c);
	color: var(--color-medium-c);
}

/* page */

.page-contents {
	list-style: disc;
	margin: 1rem 0;
	padding: 2rem 2rem 2rem 3.5rem;
	border-radius: .5rem;
	border: 4px solid var(--color-light-k);
	color: var(--color-dark-k);
}

.page-contents ul {
	list-style: disc;
	padding-inline-start: 1.5rem;
}

.page-contents li {
	padding-inline-start: .5rem;
}

.page-contents a {
	color: inherit;
}

.page-cover {
	margin: 1rem 0;
}

.page-cover img,
.page-cover video {
	border-radius: .5rem;
}

.page-date {
	display: flex;
	gap: 1rem;
	color: hsl(0 0 60);
}

.page-date span {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.page-date i {
	font-size: var(--font-size-medium);
}

.page-date time {
	font-size: var(--font-size-smaller);
}

.page-images {
	display: grid;
	grid: auto / repeat(4, 1fr);
	gap: 1rem;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.page-images a {
	display: grid;
}

.page-images a::after {
	border-radius: .5rem;
}

.page-images img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: .5rem;
}

.page-message-info {
	margin: 1rem 0;
	padding: 1rem 1.5rem;
	border-radius: .5rem;
	background: var(--color-light-c);
	color: var(--color-dark-c);
}

.page-message-warning {
	margin: 1rem 0;
	padding: .5rem 1rem;
	border-radius: .5rem;
	background: var(--color-light-y);
	color: var(--color-dark-y);
}

.page-message-danger {
	margin: 1rem 0;
	padding: .5rem 1rem;
	border-radius: .5rem;
	background: var(--color-light-m);
	color: var(--color-dark-m);
}

.page-pre {
	margin: 1rem 0;
	font: inherit;
	white-space: pre-wrap;
}

/* home */

.home-header {
	display: grid;
	place-items: center;
	margin: 3rem 0;
}

.home-header img {
	border-radius: .5rem;
}

.home-header p {
	margin: 1rem 0;
	padding: 1rem 1.5rem;
	border-radius: .5rem;
	background: var(--color-light-c);
	color: var(--color-dark-c);
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.home-news {
	margin: 3rem 0;
	padding: 1rem 2rem;
	border: 4px solid var(--color-light-k);
	border-radius: .5rem;
}

.home-news dl {
	margin: 1rem 0;
}

.home-news dt {
	color: var(--color-medium-c);
	font-weight: bold;
}

.home-news dd {
	display: list-item;
	list-style: disc;
	margin-inline-start: 1.5rem;
	padding-inline-start: .5rem;
}

.home-news ::marker {
	color: var(--color-medium-c);
}

/* about */

.about-accounts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.about-accounts a {
	display: block;
	padding: .25rem 1rem;
	border-radius: .5rem;
	background: var(--color-light-c);
	color: var(--color-dark-c);
	font-size: var(--font-size-smaller);
	text-decoration: none;
}

.about-indent {
	padding-inline-start: 1.5rem;
	border-inline-start: .25rem solid var(--color-light-k);
}

.about-indent dd {
	margin: 0;
}

.about-links figure {
	display: flex;
	place-items: start;
	gap: 1rem;
	margin: 1rem 0;
	font-size: var(--font-size-smaller);
}

.about-list {
	list-style: disc;
	margin: 1rem 0;
	padding-inline-start: 1.5rem;
}

.about-list li {
	padding-inline-start: .5rem;
}

.about-list ::marker {
	color: var(--color-medium-c);
}

.about-profile {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.about-profile img {
	width: 6rem;
	height: 6rem;
	border-radius: 100%;
}

/* sounds */

.sounds-midi {
	margin: 1rem 0;
}

.sounds-midi figcaption {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sounds-midi time {
	color: var(--color-medium-k);
	font-size: var(--font-size-smaller);
}

/* router */

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	border: 3px solid hsl(0 0 80);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}