/*
CSS for The Thirsty Games
Author: Anjosustrakr
*/

body {
	background-color: #353C46;
	color: #EEEEEE;
	font-family: Verdana, Arial, sans-serif;
	width: 60vw;
	margin-left: 20vw;
	margin-top: 140px;
	text-align: center;
}

header {
	position: fixed;
	top: 0;
	width: 60vw;
	height: 120px;
	background: #353C46 url(./images/banner.png) no-repeat;
	background-position: center;
}

@media only screen and (max-width: 1175px) {
	header {
		background-size: contain; /* Shrink the title banner to fit the screen */
	}
}

#content {
	min-height: calc(100vh - 190px); /* Keep footer at the bottom of the page */
}

#setup p, #disclaimer p {
	line-height: 140%;
}

footer {
	font-size: 10pt;
	color: #8393ac;
}

footer p {
	margin: 0.3em;
}

h1 {
	margin-bottom: 0;
	color: #48B2EF;
	font-size: 18pt;
}

h2 {
	margin-top: 0;
	color: #87DCFF;
	font-size: 19pt;
}

.darkback {
	padding: 10px;
	background-color: #2F343D;
	border-radius: 20px;
	margin-bottom: 1em;
}

#story {
	font-style: italic;
}

.darkback p, .darkback li {
	padding: 0;
	margin: 0.5em;
}

ul {
	margin-top: 0.2em;
}

ol {
	display: inline-block;
	text-align: left;
	margin-top: 0;
}

ol li {
	line-height: 140%;
}

.district, #day {
	font-family: Tahoma, Cambria, sans-serif;
	font-weight: bold;
	font-size: 120%;
	letter-spacing: 1px;
	color: #48B2EF;
	-webkit-text-stroke: 0.75px #1d648f;
    -webkit-text-fill-color: #48B2EF;
}

.district.dead {
	color: #777777;
	-webkit-text-stroke: 0.75px #555555;
    -webkit-text-fill-color: #777777;
}

.event {
	line-height: 160%;
	margin-top: 1em;
}

.combatLog {
	margin-top: 0;
	padding: 0 1%;
	background-color: #2F343D;
	border-radius: 20px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.centered {
	text-align: center;
}

.veiled {
	color: #9b66d1;
	font-weight: bold;
}

.stat {
	font-weight: bold;
}

#victor {
	margin-bottom: 2.5em;
}

/*
Buttons, inputs, and selects
*/
button, input::-webkit-file-upload-button, select {
	border-style: none;
	border-radius: 7px;
	padding: 7px;
	font-size: 12pt;
	font-weight: bold;
	color :#353C46;
	background-color: #87DCFF;
}

button:hover, input::-webkit-file-upload-button:hover, select:hover {
	background-color: #48B2EF;
}

button:disabled, select:disabled {
	background-color: #94949480;
}

input::-webkit-file-upload-button, select {
	padding: 5px;
}

option {
	color :#353C46;
	background-color: #87DCFF;
}

#fileInput {
	padding: 10px;
	background-color: #2F343D;
	border-radius: 10px;
	width: 190px;
}

#btnStart {
	margin-top: 0.5em;
}

.tributeNameInput {
	padding: 7px;
	font-size: 12pt;
	font-weight: bold;
}

::-webkit-input-placeholder {
	font-style: italic;
	font-weight: normal;
}

/*
Links and clickable keywords
*/
a:link {
	font-weight: bold;
	text-decoration: none;
	color: #C057E6;
}

a:visited {
	color: #C057E6;
}

.clickable {
	font-weight: bold;
	cursor: pointer;
}

.clickable:hover, a:hover, a:active {
	filter: brightness(150%);
}

.name {
	color: #87DCFF;
}

.name.freshKill {
	color: #EE0000;
}

.name.zombie {
	color: #72a779;
}

.name.veiled {
	color: #9b66d1;
}

.item {
	color: #C057E6;
}

.districtNum {
	color: #48B2EF;
}

.dead { /* Grays out .name or .districtNum */
	color: #999999;
}

.fight {
	color: #e67c27;
}

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

::-webkit-scrollbar-track {
	background-color: #1F2328; /* Same color as edge of screen to appear invisible (when fullscreen) */
}

::-webkit-scrollbar-thumb {
	background-color: #34404e;
	border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #455364;
}

/*
Tables
*/
table {
	margin-left: auto;
	margin-right: auto;
	table-layout: fixed;
	width: 100%;
}

td {
	padding-bottom: 50px;
}

/*
Website borders
*/
.websiteBorder {
	position: fixed;
	top: 0;
	width: 20vw;
	height: 100%;
	background: #353C46 url(./images/border.png) repeat-y;
	background-position: right;
}

#borderLeft {
	left: 0;
}

#borderRight {
	left: 80vw;
	transform: scaleX(-1);
}

/*
Description boxes
*/
.descBox {
	position: fixed;
	top: 19.5%;
	width: 16vw;
	padding: 10px;
	padding-top: 7px;
	border: 5px double #111111;
	border-radius: 10px;
	text-align: left;
	font-size: 99%;
	background: rgba(0, 0, 0, 0.25);
	overflow-y: scroll;
}

.descBox p {
	line-height: 150%;
}

.descBox::-webkit-scrollbar {
	width: 0;
}

#descBoxTribute {
	left: 2vw;
	height: 61%;
}

#descBoxItem {
	left: 80.5vw;
	padding-bottom: 30px;
}