:root {
	color-scheme: light dark;
}
body {
	color: light-dark(#000000, #ffffff);
	background-color: light-dark(#eeeeee, #161616);
}
.namelogo, .namelogo * {
	display: flex;
	align-items: baseline;
	width: fit-content;
}
.namelogo {
	.name {
		padding: 1px;
	}
	*::after, *::before {
		font-weight: lighter;
		font-style: italic;
	}
	&:hover {
		&::before {
			font-family: monospace;
			content: "mailto: <";
		}
		&::after {
			font-family: monospace;
			content: ">";
		}
	}
	&:has(.name:hover) .name,
	&:has(.nick:hover) .nick {
		border: solid;
		&:is(.nick)::after { content: "\2014Me!"; }
		&:is(.name) {
			position: relative;
			&::after {
				position: absolute;
				top: 100%;
				left: 0;
				content: "=Sebastien(Me!)";
			}
		}
	}
	&:has(.domain:hover) .domain {
		border-top: solid;
		border-bottom: solid;
		.nick ~ & { border-left: solid; }
		.name ~ & {
			border-right: solid;
			margin-left: -4px;
			&::after { content: "\2014You are here."; }
		}
	}
}
header {
	.fuckmeiguess {
		display: flex;
		justify-content: center;
		nav {
			width: 50%;
			ul {
				display: flex;
				list-style-type: none;
				li { flex: 1; text-align: center; }
			}
		}
	}
}
main {
	display: flex;
}
section {
	text-align: justify;
	padding: 0 1em;
	min-width: 0;
	flex: 1;
	&.ublog {
		flex: 0.5;
		display: flex;
		flex-direction: column-reverse;
		h2 { order: 1; }
		article {
			padding: 1em 0;
			article + & {
				border-bottom: solid gray 1px;
			}
			> *:first-child {
				margin-top: 0;
			}
			p:has(+ footer), footer {
				display: inline;
			}
			footer {
				color: gray;
				font-style: italic;
				a {
					all: inherit;
					cursor: pointer;
					&:hover {
						text-decoration: underline;
						&::before {content: "#"; }
					}
				}
			}
		}
	}
	+ section {
		border-left: solid gray 1px;
	}
}
hr {
	border-top: solid gray 1px;
}
footer {
	width: 100%;
	text-align: center;
}
abbr {
	font-variant: all-small-caps;
	font-size: larger;
}
.quot, q, blockquote {
	all: initial;
	&::before { content: "\201C"; }
	&::after  { content: "\201D"; }
}
.emoticon {
	font-family: sans-serif;
}
pre {
	overflow: auto;
	scrollbar-color: light-dark(#000000, #ffffff),
			 light-dark(#eeeeee, #161616);
}
blockquote {
	display: block;
	> p { display: inline; }
}