:root {
	--bg-nav-item-hover: hsl(0,0%,65%);
	--bg-nav-item: hsl(0,0%,75%);
	--bg-nav: hsl(0,0%,85%);
	--bg: hsl(0,0%,95%);

	--fg: hsl(0,0%,5%);
	--fg-hover: hsl(0,0%,0%);
	--fg-dull: hsl(0,0%,25%);

	--shadow: hsl(0,0%,50%);

	--error: hsl(0,100%,50%);
}

[data-theme="dark"] {
	--bg-nav-item-hover: hsl(0,0%,35%);
	--bg-nav-item: hsl(0,0%,25%);
	--bg-nav: hsl(0,0%,15%);
	--bg: hsl(0,0%,5%);

	--fg: hsl(0,0%,95%);
	--fg-hover: hsl(0,0%,100%);
	--fg-dull: hsl(0,0%,75%);

	--shadow: hsl(0,0%,50%);

	--error: hsl(0, 100%, 65%);
}

[data-theme="blue"] {
	--bg-nav-item-hover: hsl(210, 50%, 60%);
	--bg-nav-item: hsl(210, 50%, 70%);
	--bg-nav: hsl(210, 50%, 80%);
	--bg: hsl(210, 50%, 90%);

	--fg: hsl(210, 90%, 20%);
	--fg-hover: hsl(210, 90%, 10%);
	--fg-dull: hsl(219,90%,75%);

	--shadow: hsl(210, 50%, 40%);

	--error: hsl(0, 80%, 45%);
}

[data-theme="solarized"] {
	--bg-nav-item-hover: hsl(45, 100%, 40%);
	--bg-nav-item: hsl(45, 100%, 50%);
	--bg-nav: hsl(45, 90%, 60%);
	--bg: hsl(45, 90%, 70%);

	--fg: hsl(210, 10%, 20%);
	--fg-hover: hsl(210, 10%, 10%);
	--fg-dull: hsl(210,10%,75%);

	--shadow: hsl(45, 60%, 30%);

	--error: hsl(10, 80%, 40%);
}

.layout-navbar-top {
	position: sticky;
	top: 0;
	background: var(--bg-nav);
	z-index: 5;
	width: fit-content;
	margin: 0 auto;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 2px 2px 8px var(--shadow);
}

.layout-navbar-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.layout-navbar-center-item {
	margin: 0px 5px;
	padding: 0px 10px;
	border-radius: 5px;
	background: var(--bg-nav-item);
}

.layout-navbar-center-item a,
.layout-btn-theme-switcher {
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: var(--fg);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.layout-navbar-center-item:hover {
	color: var(--fg-hover);
	background: var(--bg-nav-item-hover);
}

.layout-theme-menu {
	padding-top: 10px;
	display: none;
	position: absolute;
}

.layout-theme-menu button {
	width: 50px;
	display: block;
}

body {
	background: var(--bg);
}