
html {
	width: 100%;
}

#hunt_display_options {
	display: flex;
	flex-wrap: nowrap;
	height: 200px;
	margin-bottom: 5px;
	width: 100%;
}

.left_panel {
	width: 10%;
}

.center_panel {
	width: 75%;
	border: 2px solid black;
	border-radius: 10px;
	padding-left: 5px;
	overflow: auto;
}

.right_panel {
	width: 10%;
	text-align: right;
}

.mechanics_upgrades {
	box-sizing: border-box;
	width: 100%;
	height: 100px;
	border: 2px solid black;
	border-radius: 10px;
	display: none;
	padding: 5px;
}

.stats_upgrades_and_listing {
	box-sizing: border-box;
	width: 100%;
	min-height: 200px;
	display: none;
	border: 2px solid black;
	border-radius: 10px;
	padding: 5px;
	margin-top: 5px;
}

.housing_current {
	max-width: 25%;
	margin: 5px;
}

.pi {
	position: absolute;
	bottom: 0;
	right: 0;
	color: gray;
	font-size: smaller;
}

@keyframes sunset { /* Sweet fade animation that makes it look like I know what I'm doing */
    from {
		background-color: black;
		color: white;
	}
    to {
		background-color: white;
		color: black;
	}
}

@keyframes shake { /* For jittery things. Based on code from w3schools.com */
    0%   { transform: translate(1px, 1px) rotate(0deg); }
    10%  { transform: translate(-1px, -2px) rotate(-1deg); }
    20%  { transform: translate(-3px, 0px) rotate(1deg); }
    30%  { transform: translate(3px, 2px) rotate(0deg); }
    40%  { transform: translate(1px, -1px) rotate(1deg); }
    50%  { transform: translate(-1px, 2px) rotate(-1deg); }
    60%  { transform: translate(-3px, 1px) rotate(0deg); }
    70%  { transform: translate(3px, 1px) rotate(-1deg); }
    80%  { transform: translate(-1px, -1px) rotate(1deg); }
    90%  { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.end_night_text:last-child { /* Only gets the LAST end_night_text element! */
	animation-name: sunset;
    animation-duration: 2s;
}

.shaky_text {
	animation-name: shake;
	animation-duration: .4s;
	animation-iteration-count: 2;
	display: inline-block;
}

button {
	border-radius: 7px;
}
