@import url("./variables.css");
@import url("./nav.css");
@import url("./motion.css");

body {
	font-size: 100%;
	margin: 0;
	padding: 0;
	& a,
	button {
		cursor: pointer;
	}
}
main {
	overflow: hidden;
	padding: var(--pad-xl) var(--pad-xl) 0 calc(var(--view) + var(--pad-xl));
	position: relative;
	width: fit-content;
	margin-bottom: var(--pad-xl);
	& ul[role="list"] {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
	}
	& article {
		color: inherit;
		height: max-content;
		max-width: var(--main);
		padding: var(--pad-xl);
		width: auto;
		&:not(:last-child) {
			margin-bottom: var(--pad-l);
		}
		& s {
			text-decoration-style: line-through;
			text-decoration-thickness: 0.1em;
		}
		& u {
			text-decoration-style: double;
			text-decoration-thickness: 2px;
		}
		& em {
			font-weight: 200;
		}
		& p {
			word-wrap: break-word;
			&:not(li p):not(:last-child) {
				padding-bottom: var(--pad-m);
			}
		}
		& pre {
			display: flex;
			width: auto;
			padding: var(--pad-m);
			white-space: pre-wrap;
			word-break: break-word;
		}
		& a {
			padding: 2px;
			& > img {
				display: inline-flex;
				height: auto;
				vertical-align: middle;
				padding-right: 2px;
			}
			&:has(figure) {
				height: fit-content;
			}
		}
		& figure {
			margin: 0;
			padding: var(--pad-m);
			border-radius: inherit;
			display: flex;
			flex-direction: column;
		}
	}
}
header {
	& a {
		display: flex;
	}
	& svg {
		width: 32px;
		height: 32px;
		margin-right: var(--pad-m);
	}
}
footer {
	color: var(--dark);
	display: inline-flex;
	inset-block: 100%;
	margin: 0 auto;
	position: sticky;
	width: 100%;
	z-index: -1;
	& span {
		width: inherit;
		background-image: var(--transgender);
		padding: 0 var(--pad-s);
	}
}
h1,
h2,
h3,
h4,
h5,
h6 {
	display: block;
	font-size: 2rem;
	font-weight: bold;
	margin: 0;
	width: fit-content;
}
details {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	& summary::marker {
		content: none;
	}
}
svg {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
}
p {
	margin: 0;
}
.paws {
	margin: 0;
	padding: 0 var(--pad-xl);
	& li::marker {
		content: none;
	}
	& li::before {
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		mask-image: var(--paw);
		mask-size: contain;
		mask-repeat: no-repeat;
		margin: 0 0 0 calc(var(--pad-xl) * -1);
	}
}
img[src*="/assets/img/flag/"] {
	height: 32px;
	border-radius: 2px;
	&:first-child {
		margin-left: var(--pad-m);
	}
	&:not(:last-child) {
		margin-right: var(--pad-m);
	}
}
/* home.html */
#bio .emoji {
	display: inline-flex;
	height: 20px;
	vertical-align: middle;
	width: 20px;
	&::after,
	img {
		filter: drop-shadow(0 0 0.5px #000a);
	}
}
#badges ul {
	gap: var(--pad-s);
	padding: 0;
}
#interests {
	& a {
		align-items: center;
		display: inline-flex;
		flex-direction: column;
		height: auto;
		text-align: center;
		width: 120px;
		&:not(:hover, :focus) {
			background: transparent;
		}
		& span:has(img)::after {
			background-image: url("/assets/img/icon/shortcut.png");
			background-size: 100%;
			content: "";
			display: block;
			height: 24px;
			margin: -1.5rem 0 0 -0.5rem;
			pointer-events: none;
			position: absolute;
			width: 24px;
			z-index: 1;
		}
	}
}
.games img {
	height: 48px;
}
.manga img {
	height: 128px;
}
#pkmn {
	background-image: url("/assets/img/pkmn/bg/box.png");
	border-bottom-color: #78a068;
	border-left-color: #c8f8c0;
	border-radius: 4px;
	border-right-color: #78a068;
	border-style: solid;
	border-top-color: #c8f8c0;
	border-width: 3px;
	margin: var(--pad-l) 0 0 0;
	width: fit-content;
	& li {
		display: flex;
		margin-left: -12px;
		margin-top: -8px;
		& span:hover {
			filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
				drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
				drop-shadow(0 2px 3px #000a);
			animation: jump 200ms infinite alternate;
		}
	}
}
#agender {
	background-image: var(--agender);
}
#aromantic {
	background-image: var(--aromantic);
}
#pansexual {
	background-image: var(--pansexual);
}
#badges img {
	max-height: 31px;
	width: 88px;
}
/* changelog.html */
#changelog li {
	&::before {
		content: none;
	}
	&::marker {
		content: initial;
	}
}
/* gallery.html */
#art {
	& h1,
	p {
		margin: 0;
	}
	& p {
		max-width: var(--post);
	}
	& section:has(a:nth-child(n + 2)) {
		display: flex;
		flex-direction: row;
		gap: var(--pad-l);
	}
	& section:has(a:nth-child(n + 3)) {
		flex-direction: column;
	}
	& section {
		&:not(:last-child) {
			margin-bottom: var(--pad-l);
		}
		& a {
			display: flex;
			width: calc(var(--post) - var(--view));
			flex-direction: column;
			height: fit-content;
		}
		& time {
			margin: var(--pad-m) 0 0;
		}
	}
}
#artworks {
	& ul {
		display: grid;
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(var(--thumb), 100%), 1fr)
		);
		gap: var(--pad-l);
		& a {
			display: block;
		}
	}
	& figure {
		margin: 0;
		& img {
			width: 100%;
			height: var(--thumb);
			object-fit: cover;
		}
		& figcaption {
			display: inline-flex;
			font-size: 1.4rem;
		}
		& .count {
			margin: auto 0 0 auto;
		}
	}
}
/* blog.html */
#blog {
	& main article {
		max-width: var(--post);
		& .postscript {
			margin: 0 0 auto auto;
			padding: var(--pad-xl) 0 var(--pad-xxl) 0;
			&::after {
				content: "";
				position: absolute;
				width: 64px;
				height: 64px;
				mask-image: var(--paw);
				mask-size: 100%;
				mask-repeat: no-repeat;
				transform: rotate(15deg);
			}
			& p {
				display: flex;
				flex-direction: column;
				transition: background-color var(--trans);
				margin-top: inherit;
				margin-left: inherit;
				margin-right: var(--avatar);
				margin-bottom: var(--pad-l);
				border-radius: var(--round);
				border-bottom-right-radius: 0;
				width: fit-content;
				padding: var(--pad-m);
				background-color: #0060df;
				color: #fff;
				font-size: 0.8rem;
				word-wrap: anywhere;
				&:hover {
					background-color: #3a76f0;
				}

				& a:has(img:nth-child(n + 2)) {
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
					align-items: center;
					gap: var(--pad-m);
				}
				& > img {
					transition:
						height var(--trans),
						border-radius var(--trans),
						background-color var(--trans);
					border-radius: var(--round);
					min-height: fit-content;
					max-height: var(--image);
				}
			}
			& span:has([alt="Profile picture"]) {
				width: var(--avatar);
				height: var(--avatar);
				display: flex;
				float: right;
				& [alt="Profile picture"] {
					display: flex;
					box-sizing: content-box;
					margin: 0 0 0 auto;
					width: inherit;
					height: inherit;
				}
			}
		}
		& .postscript::after {
			background-color: var(--primary);
		}
		& section:has(figure) {
			display: flex;
			gap: var(--pad-l);
		}
		& aside {
			float: right;
			border-radius: var(--round);
			width: 66%;
		}
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-bottom: var(--pad-m);
		}
		& .post-warning {
			font-size: 1.4rem;
			font-weight: bold;
			text-align: center;
			&::before,
			&::after {
				content: "";
				display: inherit;
				border-width: 2px;
				border-style: dashed;
			}
		}
	}
	& #posts {
		& ul {
			display: flex;
			flex-direction: column;
			gap: var(--pad-l);
			margin: 0;
			padding: 0;
		}

		& a {
			display: flex;
			flex-direction: column;
			font-size: 1.125rem;
			font-weight: bold;
			padding: var(--pad-m);
			text-decoration: none;
			word-break: break-word;
			& time,
			p {
				display: flex;
				font-size: 1rem;
				font-weight: normal;
			}
		}
	}
}
.addendum,
.post-warning,
#blog main article aside {
	margin: var(--pad-l) 0;
	padding: var(--pad-l);
}
/* easter egg :) */
#signal {
	background: black;
	border: 0;
	color: white;
	font-family: "Times New Roman", Times, serif;
	height: 100%;
	margin: 0;
	padding: 0;
	max-height: 100%;
	max-width: 100%;
	position: fixed;
	width: 100%;
	& article {
		align-content: center;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		margin: 0 auto;
		width: fit-content;
		& h1 {
			display: inline-flex;
			font-size: 4rem;
			margin: 0 auto;
		}
		& p {
			font-size: 2rem;
		}
		& a {
			margin: auto 0 0 auto;
		}
		& img {
			border: 4px solid white;
			max-height: 250px;
			max-width: 100%;
			padding: var(--pad-s);
		}
		& button {
			inset-block: 100%;
			bottom: 0;
			position: sticky;
			margin: var(--pad-xl) auto;
			width: fit-content;
		}
	}
}
@media screen and (min-width: 916px) {
	#sidebar {
		display: flex;
	}
	#floating {
		display: none;
	}
	#default button[popovertarget] {
		display: none;
	}
}
@media screen and (max-width: 916px) {
	/* Reset */
	header,
	footer,
	main {
		margin: 0;
		padding: 0;
		width: auto;
	}
	footer span {
		margin: 0 auto;
	}
	article {
		margin: var(--pad-m);
		padding: var(--pad-l);
	}
	header {
		margin: calc(var(--pad-xxl) + var(--pad-l)) 0 0 0;
		& h1 {
			margin: auto 0 0 auto;
			padding-right: var(--pad-m);
		}
	}
	#default::before {
		content: none;
	}
	body::after {
		content: "";
	}
	#blog {
		& main article {
			max-width: initial;
			& aside {
				float: unset;
				width: fit-content;
			}
			& section {
				flex-direction: column;
			}
			& .postscript {
				& p {
					margin-right: var(--pad-sm);
					& > a img {
						height: auto;
						max-height: var(--view);
					}
				}
			}
		}
	}
	#art {
		& p {
			max-width: auto;
		}
		& a:has(img) {
			width: auto;
		}
		& section:has(a:nth-child(n + 2)) {
			flex-direction: column;
		}
	}
}