/*** halloweenify some website elements ***/
/* top spook for sections */
DIV.w SECTION {
	border-top: 1px solid #0f0;
	border-bottom: 1px solid #f70;
	box-shadow: 0px 0px 5px 0px #000, 
		0px 20px 20px -20px rgba(0,255,0,0.8) inset,
		0px -120px 120px -120px rgba(255,144,16,0.33) inset;
}

DIV.w SECTION::before {
	content: "";
	position: relative;
	top: -37px;
	left: -32px;
	margin-right: -64px;
	display: flex;
	height: 5px;
	background-size: 100% 5px;
	background-image: radial-gradient(60% 5px at 50% 5px, #ef5 50%, transparent);
}

@keyframes twinkle {
	0% { color: #f51; text-shadow: none; }
	30% { color: #f51; text-shadow: none; }
	31% { color: #f91; text-shadow: 0px 0px 0.7em #fc7; }
	32% { color: #f51; text-shadow: none; }
	66% { color: #f51; text-shadow: none; }
	67% { color: #f91; text-shadow: 0px 0px 0.7em #fc7; }
	68%  { color: #f51; text-shadow: none; }
	74%  { color: #f51; text-shadow: none; }
	75%  { color: #fb2; text-shadow: 0px 0px 0.7em #fc7; }
	76%  { color: #f51; text-shadow: none; }
	100%  { color: #f51; text-shadow: none; }
}

A, A:visited, A:active { color: #f51; text-decoration: none; animation: twinkle 10s linear infinite; }
H1 A, H2 { color: #f7fff5 !important; animation: none; }
A:hover { color: #FF850A; text-decoration: underline; }

@keyframes textSpook {
	0% { color: #e7ffe5; }
	50% { color: #ffe7e5; }
}

BODY { color: #f7fff5; animation: textSpook 15s linear infinite; }

@keyframes jol {
	0% { text-shadow: 0px -2px 1em #fc7; }
	20% { text-shadow: 0px -1px 1em #fb7; }
	40% { text-shadow: 0px -3px 1em #fa6; }
	60% { text-shadow: 1px -1px 1.1em #fc7; }
	80% { text-shadow: 0px -4px 1em #fd8; }
	100% { text-shadow: 0px -1px 1.1em #fc7; }
}

DIV#jol { font-size: 16pt; animation: jol 2s linear infinite; margin-bottom: 0.5em; }