body, html {
 	background: #ece9e0;
}

.hide {
	display: none;
}

input {
	border: none;
	background: 
		repeating-linear-gradient(90deg, 
				dimgrey 0, 
				dimgrey 1ch, 
				transparent 0, 
				transparent 1.5ch) 
			0 100%/100% 2px no-repeat !important;
	color: dimgrey;
	font: 5ch consolas, monospace !important;
	letter-spacing: .5ch !important;
	padding: 0em !important;
	margin-top: 0em !important;
	margin-right: 0em !important;
	margin-bottom: 0em !important;
	margin-left: 0em !important;
	word-spacing: normal !important;
	text-transform: none !important;
	text-indent: 0px !important;
	text-shadow: none !important;
	display: inline-block !important;
	text-align: start !important;	
}
input:focus {
	outline: none;
	color: dodgerblue;
}

.error {
	color: #fff;
	background: #8D2838;
	position: fixed !important;
}
.map, .fixed {
	position: fixed !important;

}
.brown {
	background: #6C6054;
}
.highlight {
	border: 1px solid #000; 
	padding: 2px;
}
.key {
	font: 2ch consolas, monospace;
	margin-left: 40px;
}
.large {
	font: 5ch consolas, monospace;
	background: 
		repeating-linear-gradient(90deg, 
				dimgrey 0, 
				dimgrey 1ch, 
				transparent 0, 
				transparent 1.5ch) 
			0 100%/100% 2px no-repeat;	
}
.index {
	font: 2ch consolas, monospace;
	letter-spacing: 1ch;

}

.pano {
	width: 1706px;
	height: 1000px;
}

.confetti {
	width: 1rem;
	height: 1rem;
	display: inline-block;
	position: absolute;
	top: -1rem;
	left: 0;
	z-index: 150;
}
.confetti .rotate {
	animation: driftyRotate 1s infinite both ease-in-out;
	perspective: 1000;
}
.confetti .askew {
	background: currentColor;
	transform: skewY(10deg);
	width: 1rem;
	height: 1rem;
	animation: drifty 1s infinite alternate both ease-in-out;
	perspective:1000;
}
	
.confetti:nth-of-type(5n) {
	color: #F56620;
}
.confetti:nth-of-type(5n+1) {
	color: #00EAFF;
}
.confetti:nth-of-type(5n+2) {
	color: #EA8EE0;
}
.confetti:nth-of-type(5n+3) {
	color: #EBFF38;
}
.confetti:nth-of-type(5n+4) {
	color: #0582FF;
}

.confetti:nth-of-type(7n) .askew {
	animation-delay: -.6s;
	animation-duration: 2.25s;
}
.confetti:nth-of-type(7n + 1) .askew {
	animation-delay: -.879s;
	animation-duration: 3.5s;
}
.confetti:nth-of-type(7n + 2) .askew {
	animation-delay: -.11s;
	animation-duration: 1.95s;
}
.confetti:nth-of-type(7n + 3) .askew {
	animation-delay: -.246s;
	animation-duration: .85s;
}
.confetti:nth-of-type(7n + 4) .askew {
	animation-delay: -.43s;
	animation-duration: 2.5s;
}
.confetti:nth-of-type(7n + 5) .askew {
	animation-delay: -.56s;
	animation-duration: 1.75s;
}
.confetti:nth-of-type(7n + 6) .askew {
	animation-delay: -.76s;
	animation-duration: 1.5s;
}
	
.confetti:nth-of-type(9n) .rotate {
	animation-duration: 2s;
}
.confetti:nth-of-type(9n + 1) .rotate {
	animation-duration: 2.3s;
}
.confetti:nth-of-type(9n + 2) .rotate {
	animation-duration: 1.1s;
}
.confetti:nth-of-type(9n + 3) .rotate {
	animation-duration: .75s;
}
.confetti:nth-of-type(9n + 4) .rotate {
	animation-duration: 4.3s;
}
.confetti:nth-of-type(9n + 5) .rotate {
	animation-duration: 3.05s;
}
.confetti:nth-of-type(9n + 6) .rotate {
	animation-duration: 2.76s;
}
.confetti:nth-of-type(9n + 7) .rotate {
	animation-duration: 7.6s;
}
.confetti:nth-of-type(9n + 8) .rotate {
	animation-duration: 1.78s;
}

@keyframes drifty {
	0% {
		transform: skewY(10deg) translate3d(-250%, 0, 0);
	}
	100% {
		transform: skewY(-12deg) translate3d(250%, 0, 0);
	}
}
@keyframes driftyRotate {
	0% {
		transform: rotateX(0);
	}
	100% {
		transform: rotateX(359deg);
	}
}