: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 {
	border: solid;
	display: flex;
}
section {
	flex: 1;
}
section + section {
	border-left: solid;
	padding-left: 1%;
}
section.ublog {
	flex: 0.5;
}
footer {
	width: 100%;
	text-align: center;
}