/* GLOBAL */

:root {
	--light-blue: #cce8ff;
	--med-blue: #91bad8;
	--dark-blue: #1d5480;
	--green: #baf2d1;
	--yellow: #ffe45c;
	--lissa: #ffdbff;
	--box-bg: #236190;
	--open-bg: rgb(35, 97, 144, 0.9);
}

body {
	background-color: var(--dark-blue);
	color: var(--light-blue);
}

.bg-image {
	content: url("/assets/images/layout/dark.gif");
}

.global-menu,
main {
	background-color: var(--box-bg);
}

#global-skip {
	background-color: var(--dark-blue);
}

.box-bg {
	background-color: var(--open-bg);
}

.global-nav,
main,
.webrings,
.buttons,
.webrings,
article,
.era-group,
.dark {
	border-color: var(--light-blue);
}

.light {
	border-color: var(--med-blue);
}

a,
#global-skip {
	color: var(--green);
}

*:focus {
	outline-color: var(--light-blue);
}

a:hover:not(:has(.webrings)),
.current {
	color: var(--yellow);
}

.switch,
.shell-group button:not(dialog button) {
	background-color: transparent;
	color: var(--light-blue);
	border-color: var(--light-blue);
}

.lissa a,
.lissa a:hover {
	color: var(--lissa) !important;
	text-decoration: none;
	font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
	text-align: center;
}