/* visitor.css */


html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	background:
		repeating-linear-gradient(
			45deg,
			#ff00ff 0px,
			#ff00ff 18px,
			#00ffff 18px,
			#00ffff 36px,
			#ffff00 36px,
			#ffff00 54px,
			#00ff00 54px,
			#00ff00 72px
		) !important;
	font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
	color: #000080 !important;
	padding: 24px !important;
	cursor: crosshair;
}

/* Main box */
.card {
	max-width: 1100px !important;
	background: #fff7c2 !important;
	border: 6px ridge #ff00ff !important;
	border-radius: 0 !important;
	box-shadow:
		0 0 0 4px #00ffff,
		0 0 0 8px #ffff00,
		8px 8px 0 #000080 !important;
	padding: 20px !important;
}

/* Retro heading */
h1 {
	margin: 0 0 16px !important;
	font-size: 40px !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	color: #ff0000 !important;
	text-shadow:
		2px 2px 0 #ffff00,
		4px 4px 0 #00ffff,
		6px 6px 0 #ff00ff !important;
	background: #000080 !important;
	border: 4px outset #c0c0c0 !important;
	padding: 12px !important;
}

h1::before {
	content: "★ ";
	color: #ffff00;
}

h1::after {
	content: " ★";
	color: #00ffff;
	display: inline;
	width: auto;
	height: auto;
	background: none;
	margin: 0;
}

/* Paragraph text */
p,
.note {
	color: #0000cc !important;
	font-size: 20px !important;
	font-weight: bold;
}

/* Button */
button {
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: bold !important;
	background: linear-gradient(to bottom, #ffff00, #ff9900) !important;
	color: #000080 !important;
	border: 4px outset #ffffff !important;
	border-radius: 0 !important;
	padding: 10px 16px !important;
	box-shadow: 4px 4px 0 #ff00ff !important;
	text-transform: uppercase;
}

button:hover {
	background: linear-gradient(to bottom, #00ffff, #00ccff) !important;
	color: #ff0000 !important;
	transform: translate(-1px, -1px);
}

button:active {
	border-style: inset !important;
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #ff00ff !important;
}

/* Table */
table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin-top: 18px !important;
	background: #ffffff !important;
	border: 5px groove #0000ff !important;
}

tr:nth-child(odd) td {
	background: #e6ffff !important;
}

tr:nth-child(even) td {
	background: #fff0ff !important;
}

tr:hover td {
	background: #ffff99 !important;
}

td {
	padding: 12px !important;
	border-bottom: 2px dashed #ff00ff !important;
	vertical-align: top;
	font-size: 18px !important;
	color: #000080 !important;
}

td:first-child {
	width: 290px !important;
	font-weight: 900 !important;
	color: #ff0000 !important;
	background: #ccffcc !important;
	text-shadow: 1px 1px 0 #ffff00;
	border-right: 3px solid #00cccc !important;
}

/* JSON / code blocks */
pre {
	margin: 0 !important;
	padding: 14px !important;
	background: #000080 !important;
	color: #00ff00 !important;
	border: 4px inset #c0c0c0 !important;
	border-radius: 0 !important;
	font-family: "Courier New", monospace !important;
	font-size: 16px !important;
	line-height: 1.4;
	text-shadow: 0 0 4px #00ff00;
	overflow-x: auto;
}

/* Links */
a {
	color: #ff00ff !important;
	font-weight: bold;
	text-decoration: underline wavy #00ffff 2px;
}

a:hover {
	color: #ff0000 !important;
	background: #ffff00;
}

/* Fun decorative line under intro text */
p:first-of-type {
	background: #00ffff !important;
	border: 3px dotted #ff00ff !important;
	padding: 10px !important;
	display: inline-block;
	box-shadow: 4px 4px 0 #ffff00;
}

/* Optional old-school blinking effect for note */
.note {
	animation: retroblink 1s steps(2, start) infinite;
}

@keyframes retroblink {
	50% {
		visibility: hidden;
	}
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

::-webkit-scrollbar-track {
	background: #ffff00;
}

::-webkit-scrollbar-thumb {
	background: #ff00ff;
	border: 3px solid #00ffff;
}