html {
	scrollbar-gutter: stable;
	scrollbar-color: #333 #111;
	scrollbar-width: thin;
}

body {
	--background: #060505;

	--text: #777;
	--text-bright: #999;
	--text-brightest: #CCC;
	--text-dark: #333;
	--text-primary: #900;
	--text-accent: #636;
	--text-placeholder: rgba(255,255,255,0.2);
	--text-invert: #000;

	--link-nav: #999696;
	--link-normal: #900;
	--link-active: #F00;
	--link-hover: #F00;
	--link-visited: #900;

	color: var(--text);
	background-image:
		linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.4) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.4) 100%),
		url('/images/ui/damask-002-red.png');
	background-attachment: fixed;

	scrollbar-gutter: stable;
	scrollbar-color: var(--color-primary) var(--color-primary-dark);
	scrollbar-width: thin;
}

.loader, .loader::before, .loader::after {
	justify-self: center;
	align-self: center;
	position: relative;
	display: block;
	height: 20px;
	width: 20px;
	margin: 5px 30px;
	background-color: var(--color-primary);
	border: 2px solid #000;
	border-radius: 50%;
	box-shadow: inset -2px -2px 5px #000, inset 2px 2px 5px var(--color-primary-bright);
}

.loader::before, .loader::after {
	content: '';
	position: absolute;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	z-index: -1;
}

.loader         { animation: loader-scale 1s infinite alternate; }
.loader::before { right: calc(100% + 10px); animation: loader-left  1s infinite alternate; }
.loader::after  { left:  calc(100% + 10px); animation: loader-right 1s infinite alternate; }

@keyframes loader-scale { 100% { width: 30px; height: 30px; margin: 0 20px } }
@keyframes loader-left  { 100% { right: calc(50% - 10px); } }
@keyframes loader-right { 100% { left:  calc(50% - 10px); } }

/*-- Links --*/
a         { color: var(--link-normal);  text-decoration: none; }
a:visited { color: var(--link-visited); text-decoration: none; }
a:hover   { color: var(--link-hover);   text-decoration: none; }
a:active  { color: var(--link-active);  text-decoration: none; }

p a:not(.button)         { border-bottom: 1px dotted var(--link-normal); }
p a:not(.button):visited { border-bottom: 1px dotted var(--link-visited); }
p a:not(.button):hover   { border-bottom: 1px solid  var(--link-hover); }
p a:not(.button):active  { border-bottom: 1px solid  var(--link-active); }

/*-- Text --*/
strong { color: var(--text-bright); }

body > header {
	background:
		linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%),
		url('/images/ui/header-bg-001.png');
	box-shadow: 0px 5px 15px #000;
}

#masthead {
	margin: 10px;
	color: var(--text-primary);
	font-family: var(--font-accent-family);
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	text-shadow: 1px 1px 5px #000;
}

#wrapper {

}

#blood-orb, #blood-orb video {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
#blood-orb { margin: 0 auto; }
#blood-orb video { filter: drop-shadow(0px 0px 10px #000) contrast(140%); }

#blood-orb::after
{
	display: block;
	content: '';
	position: absolute;
	top: 20px;
	left: 20px;
	width: 60px;
	height: 60px;
	background: url('/images/icons/vampire.png') 50% 50% no-repeat;
	background-size: contain;
}

ul.breadcrumb      { background: linear-gradient(to right, var(--trans-black) 0%, transparent 100%); }
ul.breadcrumb li a { font-weight: bold; text-shadow: 0 0 10px var(--color-primary); }
ul.breadcrumb svg  { filter: drop-shadow(0 0 10px var(--color-primary)); }

.scrollable {
	scrollbar-gutter: stable;
	scrollbar-color: var(--color-primary) var(--color-primary-dark);
	scrollbar-width: thin;
}

.notification
{
	color: var(--text-bright);
	background: linear-gradient(to top, var(--color-primary-dark) 0%, var(--trans-black) 80%);
	border: 1px solid var(--color-primary);
	box-shadow: inset 0 0 10px var(--color-black), 0 0 20px 10px var(--color-black);
}

.notification.error {
	color: var(--error-light);
	border: 1px solid var(--color-primary);
	background: linear-gradient(to top, var(--trans-primary-light) 0%, var(--trans-primary-dark) 80%);
}
.notification.error::before
{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 35px;
	background-image: url('/images/ui/blood-drip.png');
	background-size: contain;
	background-repeat: repeat-x;
	filter: brightness(0.5);
}


.panel, a.panel, [class*="panel-"], a[class*="panel-"] {
	position: relative;
	margin: 1rem 0;
	padding: 20px;
	background: var(--trans-black);
	border: 1px solid var(--color-primary);
	box-shadow: 0px 0px 15px var(--trans-primary), inset 0px 0px 15px var(--trans-black);
}

.panel-dark, a.panel-dark {
	background: var(--tint-black);
	border: 1px solid var(--color-primary-dark);
	box-shadow: 0px 0px 15px var(--trans-black), inset 0px 0px 15px var(--trans-black);
}

.panel-light, a.panel-light {
	background: var(--tint-accent);
	box-shadow: 0px 0px 15px var(--trans-black), inset 0px 0px 15px var(--trans-primary);
}

.panel-notice, a.panel-notice {
	background: var(--trans-primary);
	box-shadow: 0px 0px 15px var(--trans-black), inset 0px 0px 15px var(--trans-black);
}

.panel-error, a.panel-error {
	color: var(--error-light);
	background: linear-gradient(to top, var(--trans-primary-light) 0%, var(--trans-primary-dark) 100%);
	box-shadow: 0px 0px 15px var(--trans-black), inset 0px 0px 15px var(--trans-black);
}

.panel-error::before, a.panel-error::before
{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 35px;
	background-image: url('/images/ui/blood-drip.png');
	background-size: contain;
	background-repeat: repeat-x;
	filter: brightness(0.5);
}

a.panel:hover
{
	background: var(--color-black);
	border: 1px solid var(--color-primary-light);
	box-shadow: 0px 0px 15px var(--color-black), inset 0px 0px 15px var(--color-primary);
}

a.panel-light:hover
{
	background: var(--tint-white);
	border: 1px solid var(--color-primary-light);
	box-shadow: 0px 0px 15px var(--color-black), inset 0px 0px 15px var(--color-black);
}

[class*="panel"] > h2 {
	border-bottom: 1px solid var(--text-primary);
}

#modal .dialog header {
	background: 
		linear-gradient(to top, var(--trans-primary-dark) 0%, var(--trans-primary) 100%),
		url('/images/ui/blood-bg.jpg')
}