@font-face {
	font-family: "AmaticSCRegular";
	src: url("fonts/AmaticSC-Regular.ttf");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AmaticSCBold";
	src: url("fonts/AmaticSC-Bold.ttf");
	font-weight: bold;
	font-style: bold;
}

@font-face {
	font-family: 'isadt-icons';
	src:
		url('fonts/isadt-icons.ttf?pnxhhs') format('truetype'),
		url('fonts/isadt-icons.woff?pnxhhs') format('woff'),
		url('fonts/isadt-icons.svg?pnxhhs#isadt-icons') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'isadt-icons' !important;
	/*speak: never;*/
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-backpack:before {
	content: "\e900";
}
.icon-cog:before {
	content: "\e994";
}
.icon-cogs:before {
	content: "\e995";
}
.icon-briefcase:before {
	content: "\e9ae";
}

.icon-button {
	font-size: 40px;
}

.icon-button:hover {
	text-shadow: white 0px 0px 5px;
}


button:focus, button:active {
	outline: none;
}

canvas {
	transition: 0.5s;
	transition-property: -webkit-filter, filter;
	cursor: crosshair;
	outline: none;
}

.toggle {
	background: rgba(127,127,127,0.5);
	border-radius: 5px;
	padding: 5px;
	margin: 5px;
	text-align: center;
	box-shadow: 0px 0px 5px rgba(0,0,0,1);
	cursor: pointer;
}

.toggle:hover {
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
}

.toggle-active {
	background: rgba(255,255,255,0.5);
	box-shadow: inset 0px 0px 5px rgba(0,0,0,1);
}

.toggle-active:hover {
	box-shadow: inset 0px 0px 2px rgba(0,0,0,1);
}

.range {
	-webkit-appearance: none;
	display: block;
	background: none;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: "blur(5px)";
	border: solid 1px white;
	border-radius: 5px;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,1);
	position: relative;
	text-align: center;
	cursor: grab;
	outline: none;
}

.range::before {
	content: attr(data-before);
	position: absolute;
	width: 100%;
	padding-top: 2px;
	font-size: 20px;
	font-family: fantasy;
	pointer-events: none;
	color: white;
}

.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: rgba(255,255,255,0.5);
	width: 16px;
	height: 28px;
	border-radius: 5px;
	border: solid 1px rgba(0,0,0,1);
}

.range::-moz-range-thumb {
	background: rgba(255,255,255,0.5);
	width: 16px;
	height: 28px;
	border-radius: 5px;
	border: solid 1px rgba(0,0,0,1);
}

.highlight {
	box-shadow: 0px 0px 20px #00ff00;
}

.widget {
	position: absolute;
	pointer-events: all;
}

.widget .content {
	/*overflow: auto;*/
	/*color: #000000;*/
}

.window {
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #000000;
	overflow: hidden;
}

.window .header {
	background: #666666;
	color: #ffffff;
	padding: 2px;
}

.modal {
	position: absolute;
	z-index: 1000;
	display: flex;
	width: 100%;
	height: 100%;
	/*backdrop-filter: blur(10px);
	transition-property: backdrop-filter;*/
}

.modal .content {
	display: inline-block;
	margin: auto;
	pointer-events: all;
}

.modal .content .header {
	font-size: 24px;
}

.escape-menu {
	color: rgba(255,255,255,1);
	text-shadow: 0px 0px 5px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1);
	font-family: Impact;
	padding: 10px;
	/*border: solid white 5px;
	border-radius: 10px;
	backdrop-filter: blur(5px);*/
}

.escape-menu button {
	color: rgba(255,255,255,1);
	text-shadow: 0px 0px 5px rgba(0,0,0,1);
	background: none;
	border: none;
	display: block;
	padding: 0px;
	font-family: fantasy;
	font-size: 24px;
}

.escape-menu button:hover {
	/*background: rgba(255, 255, 255, 1);*/
	border-left: solid 5px white;
}

.graphics {
	display: block;
	overflow: hidden;
	transition: height 0.5s;
}

.gauge {
	width: 100px;
	height: 100px;
	background: white;
	border-radius: 100px;
	box-shadow: 0px 0px 5px #000000, 0px 0px 5px #000000 inset;
	transform: translate(-50%, -50%);
	overflow: hidden;
	border: solid 10px #A35A00;
}

.gauge .label {
	margin-top: 20px;
	text-align: center;
}

.gauge .pin {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 0% 0%;
	transform: rotate(-90deg);
	transition: 0.5s;
	transition-property: transform;
}

.gauge .needle {
	width: 50px;
	height: 5px;
	background: #ff0000;
	box-shadow: 0px 0px 5px #000000;
	transform: translate(0, -50%);
}

.floating-gauge {
	transform: translate(-50%, -50%) scale(0.25, 0.25);
	opacity: 0.25;

	transition: 0.5s;
	transition-property: transform, opacity;
}

.floating-gauge:hover {
	transform: translate(-50%, -50%) scale(1, 1);
	opacity: 1;
}

.counter {
	display: inline-flex;
	z-index: 500;
	position: absolute;
	left: 100%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 100px;
	background: white;
	border: solid 2px red;
	box-shadow: 0px 0px 5px #000000;
}

.counter .text {
	margin: auto;
}

.title {
	font-family: "AmaticSCBold";
	font-size: 100px;
}

.loading {
	font-family: "AmaticSCBold";
	font-size: 100px;
	animation-name: pulse;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.jar {
	border: solid 10px white;
	border-radius: 25px;
	padding: 10px;
	position: relative;
	background: linear-gradient(0deg, green 90%, transparent);
	background-size: 100% 110%;
	background-repeat: no-repeat;
	background-position-y: -1000%;
	box-shadow: inset 0px 0px 54px black;
	font-family: Impact;
}

.jar::before{
	background: white;
	border: solid 10px white;
	border-radius: 5px;
	width: 10px;
	height: 90px;
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
}

.blur {
	animation-name: blur;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.hud {
	font-family: Impact;
	color: white;
	text-shadow: black 0 0 5px;
}

.hud button {
	display: block;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: solid white 2px;
	border-radius: 10px;
	padding: 10px;
	font-family: Impact;
	color: white;
	text-shadow: black 0 0 5px;
	background: none;
	width: 100%;
	margin-bottom: 5px;
}

.hud .stats {
	display: inline-block;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	text-align: left;
	border: solid white 2px;
	border-radius: 10px;
	padding: 10px;
}

.info-card {
	pointer-events: none;
	position: initial;
}

.info-card .content{
	width: max-content;
	text-align: left;
	color: white;
	text-shadow: black 0 0 5px, black 0 0 5px;
	font-family: Impact;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: solid white 2px;
	border-radius: 10px;
	padding: 10px;
}

.inventory-label {
	pointer-events: none;
	color: white;
	font-family: Impact;
}

.radial-gauge {
	--gauge-size: 200px;
	--border-thickness: 20px;
	--cap-thickness: 20px;
	--inside-thickness: calc(var(--gauge-size) - var(--border-thickness) - var(--cap-thickness));

	position: absolute;
	left: 0px;
	bottom: 0px;
	/*background: radial-gradient(farthest-side at 0% 100%, rgb(148 148 148) 10%, rgb(255 255 255) 11%, rgb(68 68 68) 12%, rgb(39 39 39) 88%, rgb(148 148 148) 90%, rgb(148 148 148) 98%, rgb(255 255 255) 99%, rgb(68 68 68) 100%, rgba(0,0,0,0) 101%);*/
	background: radial-gradient(farthest-side at 0% 100%, rgb(148 148 148) calc(var(--cap-thickness) - 4px), rgb(255 255 255) calc(var(--cap-thickness) - 2px), rgb(68 68 68) var(--cap-thickness), rgb(39 39 39) calc(var(--gauge-size) - var(--border-thickness)), rgb(148 148 148) calc(var(--gauge-size) - var(--border-thickness) + 4px), rgb(148 148 148) calc(var(--gauge-size) - 4px), rgb(255 255 255) calc(var(--gauge-size) - 2px), rgb(68 68 68) var(--gauge-size), rgba(0,0,0,0) calc(var(--gauge-size) + 2px));
	width: var(--gauge-size);
	height: var(--gauge-size);
	border-radius: 0px 1000px 0px 0px;
	overflow: hidden;
}

/* shiny red tube
radial-gradient(farthest-corner at 0% 100%, rgba(255, 0, 0, 0) 46%, rgba(255, 0, 0, 1) 48%, rgba(255, 255, 255, 1) 52%, rgba(255, 0, 0, 1) 53%, rgba(255, 0, 0, 0) 54%);
radial-gradient(farthest-side at 0% 100%, rgba(255, 0, 0, 0) 82%, rgba(255, 0, 0, 1) 90%, rgba(255, 255, 255, 1) 93%, rgba(255, 0, 0, 1) 94%, rgba(255, 0, 0, 0) 100%);
*/

.radial-gauge .bar {
	--inner-radius: calc(var(--bar-radius) - var(--bar-thickness));

	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	/*background: radial-gradient(farthest-side at 0% 100%, rgba(0, 0, 0, 0) calc(var(--bar-radius) - var(--bar-thickness)), var(--bar-color) calc(var(--bar-radius) - var(--bar-thickness) * 0.5), rgba(0, 0, 0, 0) var(--bar-radius));*/
	/*background: radial-gradient(farthest-side at 0% 100%, 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + var(--inside-thickness) * var(--inner-radius)),
		var(--bar-bgcolor) calc((var(--gauge-size) - var(--border-thickness)) * (var(--bar-radius) - var(--bar-thickness) * 0.5)), 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + (var(--inside-thickness) * var(--bar-radius))));*/
	background: radial-gradient(farthest-side at 0% 100%, 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--inner-radius) + 0.06)), 
		rgba(128, 128, 128, 1) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--inner-radius) + 0.08)), 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--inner-radius) + 0.12)));
	transform-origin: bottom left;
	border-radius: 0px 1000px 0px 0px;
}

.radial-gauge .bar:before {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: radial-gradient(farthest-side at 0% 100%, 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + var(--inside-thickness) * var(--inner-radius)),
		var(--bar-color) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--bar-radius) - var(--bar-thickness) * 0.5)), 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + (var(--inside-thickness) * var(--bar-radius))));
	border-radius: 0px 1000px 0px 0px;
	content: "";
	transform-origin: bottom left;
	transform: rotate(var(--bar-rot));
}

.radial-gauge .bar:after {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: radial-gradient(farthest-side at 0% 100%, 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--bar-radius) - 0.12)), 
		rgba(255, 255, 255, 1) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--bar-radius) - 0.08)), 
		rgba(0, 0, 0, 0) calc(var(--cap-thickness) + var(--inside-thickness) * (var(--bar-radius) - 0.06)));
	border-radius: 0px 1000px 0px 0px;
	content: "";
}

.radial-gauge .fill {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: red;
	/*transform: rotate(-360deg);*/
	transform-origin: bottom left;
	border-radius: 0px 1000px 0px 0px;
}

.radial-gauge .cap {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 25%;
	height: 25%;
	border-radius: 0px 1000px 0px 0px;
	background: gray;
}

@keyframes pulse {
	from {
		text-shadow: white 0px 0px 0px;
	}

	50% {
		text-shadow: white 0px 0px 50px;
	}

	to {
		text-shadow: white 0px 0px 0px;
	}
}

@keyframes blur {
	from {
		backdrop-filter: blur(0px);
	}

	to {
		backdrop-filter: blur(10px);
	}
}