/* HOUSEKEEPING */

:root {
	--dark: #2D2922;
	--light: #E3CFB4;

	--accent-a: #943030;
	--accent-b: #DB9942;
	--accent-c: #3E6958;
	--accent-d: #5C8B93;

	--background-color: var(--dark);
	--text-color: var(--light);
	--link-color: var(--accent-b);
	--highlight: hsl(from var(--text-color) h s l / 10%);
	--shadow: hsl(from var(--text-color) h s l / 80%);
}

@view-transition {
  navigation: auto;
}

::view-transition-new(root) {
  animation: fadeIn 0.1s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@supports not (view-transition-name: root) {
	main {
		animation: fadeIn 0.1s ease-out 0.1s both;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--background-color: var(--light);
		--text-color: var(--dark);
		--link-color: var(--accent-c);
	}
}

@font-face {
	font-family: "Junicode";
	src: url("/font/junicode.woff2") format("woff2");
	font-display: block;
}

@font-face {
	font-family: "Cantarell";
	src: url("/font/cantarell.woff2") format("woff2");
	font-display: block;
}

/* /HOUSEKEEPING */

/* MISC/SHARED */

html {
	height: 100%;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: "Junicode", "Book Antiqua", Georgia, system-ui, serif;
	font-weight: 600;
	font-size: 1.5em;
	height: 100%;
	margin: 0;

	display: flex;
	flex-direction: column;
	align-items: center;

	text-shadow: 0 0 4px var(--highlight);
}

main {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

p {
	margin: 0.2em 0;
}

a {
	color: var(--link-color);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.nav-icon {
	line-height: 0;
	display: block;
}
.icon {
	width: 4em;
	height: 4em;
	transition: transform 0.8s ease;
}
.icon:hover {
	transform: rotate(360deg);
}

@keyframes rainbow {
	0%, 100% {
		color: var(--accent-a);
	}
	33% {
		color: var(--accent-b);
	}
	66% {
		color: var(--accent-c);
	}
}

.special-k {
	color: var(--accent-a);
	animation: rainbow 5s ease-in-out infinite;
	font-size: 1.1em;
}

/* /MISC/SHARED */


#index {
	.special-k {
		animation: fadeIn 0.1s ease-out 0.1s both, rainbow 5s ease-in-out infinite;
	}
	font-size: min(1.5em, 5vw);
	#hello {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;

		h1 {
			margin: 0;
			font-size: 1.6em;
		}
		h2 {
			margin: 0;
			font-size: 1.2em;
		}
	}
	nav {
		display: flex;
		gap: 1em;
		font-size: 1.1em;
		padding: 0;
	}
	.wallpaper {
		position: absolute;
		display: flex;
		justify-content: center;
		height: 40%;
		&#wallpaper-top {
			align-items: flex-end;
		}
		* {
			opacity: 0;
			&:hover {
				opacity: 1;
			}
		}
	}
}


#about {
	margin-top: 1em;
	height: auto;
	font-size: min(1.5em, 3vw + 0.5em);
	main {
		justify-content: normal;
		padding-bottom: 1em;
	}
	.icon {

	}
	#content {
		width: 600px;
		max-width: 80vw;
		p {
			margin: 1em 0;
		}


		ul {
			padding-left: 0.5em;
		}
	}
}


#projects {
	margin-top: 1em;
	height: auto;
	font-size: min(1.5em, 3vw + 0.5em);

	.showcase {
		padding: 0;
		width: 600px;
		max-width: 80vw;
		li {
			list-style-type: none;
			a {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 2em;
				text-decoration: none;
				padding: 4px 12px 0;
				&:hover {
					span:first-child {
						text-decoration: underline;
					}
					background-color: var(--highlight);
				}
				span:nth-child(2) {
					text-align: right;
					color: var(--text-color);
				}
			}


		}
	}

}

#links {
	margin-top: 1em;
	height: auto;
	font-size: min(1.5em, 3vw + 0.5em);

	h2 {
		margin-bottom: 0.5rem;
	}

	ul {
		margin-top: 0.5rem;
		padding-left: 1rem;
	}

	.emoji-li {
		padding-left: 0rem;
		li {
			list-style-type: none;
			display: flex;
			margin-left: 0.2rem;
			a {
				margin-left: 0.4em;
			}
		}
	}

	li {
		font-size: 0.8em;
		align-items: center;
		margin-left: 0.8rem;
		a {
			font-size: 1.25em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
			min-width: 0;
		}
	}
}

#blog {
	height: 100vh;
	font-size: min(1.5em, 3vw + 0.5em);
	flex-direction: row;
	align-items: stretch;

	nav {
		width: 200px;
		min-width: 200px;
		background-color: var(--highlight);
		padding: 1em 1em;
		display: flex;
		flex-direction: column;
		.nav-icon {
			align-self: center;
			padding-bottom: 1em;
		}
		ul {
			padding-left: 0.5em;
			margin: 0;

			list-style-type: none;
			font-size: 0.9em;
		}
	}

	main {
		flex: 1;
		justify-content: normal;
		align-items: flex-start;
		padding: 1em 2em;
		box-sizing: border-box;
		height: 100%;
		overflow-y: auto;
		font-size: 0.9em;
	}

	article {
		list-style-type: none;
		margin-bottom: 1em;
		max-width: 960px;
		h2 {
			margin-bottom: -0.2em;
			margin-top: 0.5em;
			padding: 0;
			a {
				color: var(--text-color);
			}
		}
		time {
			font-size: 0.9em;
			color: var(--shadow);
			padding-left: 1em;
		}
		p {
			font-family: "Cantarell";
			font-weight: 500;
			font-size: 0.8em;
			padding-left: 1em;
			text-indent: -1em;
		}
	}
}