/* GLOBAL */

:root {
	--light-blue: #e5f4ff;
	--med-blue: #91bad8;
	--dark-blue: #27729b;
	--green: #007a14;
	--yellow: #796c06;
	--lissa: #bd00bd;
	--box-bg: #fcffff;
	--open-bg: rgb(252, 255, 255, 0.9);
}

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

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

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

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

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

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

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

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

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

.switch {
	background-color: transparent;
	color: var(--dark-blue);
	border-color: var(--dark-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;
}