@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>img {
			display: inline-flex;
			height: auto;
			vertical-align: middle;
			padding-right: 2px;
		}

		& a:has(figure) {
			height: fit-content;
		}

		& figure {
			margin: 0;
			padding: var(--pad-m);

			& figcaption {
				width: 100%;
				padding-top: inherit;
			}
		}
	}
}

header {
	& a {
		display: flex;
	}

	& svg {
		width: 32px;
		height: 32px;
		margin-right: var(--pad-m);
	}
}

footer {
	color: var(--dark);
	display: flex;
	flex-wrap: wrap;
	font-family: "Nosey Rodent", sans-serif;
	inset-block: 100%;
	justify-content: center;
	margin-left: var(--view);
	overflow-y: hidden;
	position: sticky;
	text-align: center;
	width: calc(100% - var(--view));
	word-break: break-all;
	z-index: -1;

	& #message {
		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 details {
	& 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 {
		display: inline-flex;
	}

	& 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 {
		margin-top: var(--pad-l);

		&: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;
		}
	}

	& figure img {
		width: 100%;
	}
}

#artworks {
	& ul {
		display: grid;
		grid-template-columns: repeat(auto-fill,
				minmax(min(var(--thumb), 100%), 1fr));
		gap: var(--pad-l);

		& a {
			display: block;
		}
	}

	& 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;
			}
		}

		& .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;
			}
		}

		.addendum,
		.post-warning,
		aside {
			margin: var(--pad-l) 0;
			padding: var(--pad-l);
		}
	}

	& #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;
			}
		}
	}
}

/* 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 #message {
		margin: 0 auto;
		width: 100%;
	}

	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;
		}
	}
}