@font-face {
  font-family: "Stardew Valley";
  src: url("./fonts/StardewValley.eot"); /* IE9 Compat Modes */
  src: url("./fonts/StardewValley.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/StardewValley.otf") format("opentype"), /* Open Type Font */
    url("./fonts/StardewValley.svg") format("svg"), /* Legacy iOS */
    url("./fonts/StardewValley.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/StardewValley.woff") format("woff"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

body {
	font-family: 'Montserrat', sans-serif;
}

body.day {
	background: url('res/bg.png') no-repeat center center;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.night {
	background: url('res/bg-night.png') no-repeat center center;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

a {
	text-decoration: none;
	color: #6aede4;
	transition: all 0.2s ease-out;
}

a:hover {
	color: #fff;
}

.page-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
}

.header, .footer {
	width: 66%;
	min-width: 1024px;
	margin: 1em 0;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.header > * {
	margin: 0 1em;
	color: #a8caea;
	font-size: 18pt;
	font-family: "Montserrat", sans-serif;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	transition: all 0.2s ease-out;
	min-width: 154px;
}

.header > *:hover {
	color: #fff;
}

.header > a.active {
	color: #fff;
}

.footer {
	color: #a8caea;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
	font-size: 10pt;
	display: flex;
	flex-flow: column;
}

.footer > p {
	margin: 0.25em;
}

.body {
	width: 66%;
	min-width: 1024px;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 1em;
}


.progress-bar::before {
	background: url('res/border.png') no-repeat 0 0 scroll;
	content: '';
	display: inline-block;
	width: 24px;
	height: 80px;
	margin-left: -24px;
}

.progress-bar {
	height: 80px;
	margin: 0 24px;
	display: flex;
	align-items: center;
	transition: all 2s ease-in-out;
}

.progress-bar::after {
	content: '';
	display: inline-block;
	float: right;
	width: 24px;
	height: 80px;
	margin-right: -24px;
}

.progress-content {
	display: flex;
	align-items: center;
	font-family: "Stardew Valley", "Montserrat", sans-serif;
	font-size: 18pt;
	font-smooth: never;
	-webkit-font-smoothing: none;
	color: #fff;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4);
	margin: 0.5em 0;
}

.progress-bar > span {
	width: 100%;
	text-align: right;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-bar.red {
	background: url('res/border.png') repeat-x 0 -80px scroll;
}
.progress-bar.red::before {
	background: url('res/border.png') no-repeat 0 0 scroll;
}
.progress-bar.red::after {
	background: url('res/border.png') no-repeat -24px 0 scroll;
}

.progress-bar.orange {
	background: url('res/border.png') repeat-x 0 -240px scroll;
}
.progress-bar.orange::before {
	background: url('res/border.png') no-repeat 0 -160px scroll;
}
.progress-bar.orange::after {
	background: url('res/border.png') no-repeat -24px -160px scroll;
}

.progress-bar.yellow {
	background: url('res/border.png') repeat-x 0 -400px scroll;
}
.progress-bar.yellow::before {
	background: url('res/border.png') no-repeat 0 -320px scroll;
}
.progress-bar.yellow::after {
	background: url('res/border.png') no-repeat -24px -320px scroll;
}

.progress-bar.green {
	background: url('res/border.png') repeat-x 0 -560px scroll;
}
.progress-bar.green::before {
	background: url('res/border.png') no-repeat 0 -480px scroll;
}
.progress-bar.green::after {
	background: url('res/border.png') no-repeat -24px -480px scroll;
}

.progress-bar.cyan {
	background: url('res/border.png') repeat-x 0 -720px scroll;
}
.progress-bar.cyan::before {
	background: url('res/border.png') no-repeat 0 -640px scroll;
}
.progress-bar.cyan::after {
	background: url('res/border.png') no-repeat -24px -640px scroll;
}


.progress-bar.blue {
	background: url('res/border.png') repeat-x 0 -880px scroll;
}
.progress-bar.blue::before {
	background: url('res/border.png') no-repeat 0 -800px scroll;
}
.progress-bar.blue::after {
	background: url('res/border.png') no-repeat -24px -800px scroll;
}


.progress-bar.purple {
	background: url('res/border.png') repeat-x 0 -1040px scroll;
}
.progress-bar.purple::before {
	background: url('res/border.png') no-repeat 0 -960px scroll;
}
.progress-bar.purple::after {
	background: url('res/border.png') no-repeat -24px -960px scroll;
}

.logo {
	background: url('res/logo.png') no-repeat center center;
	background-size: cover;
	width: calc(380px * 0.75);
	height: calc(209px * 0.75);
	display: inline-flex;
}