html {
	height: 100%;
	min-width: 780px;
	font-family: 'KingthingsPetrock';
	font-size: 16px;
	background-color: #2d2d2d;
	color: #e2e2e2;
	text-shadow: 2px 2px 0px #000000a8;
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}
.main-background {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background-image: url(background.jpg);
	background-size: cover;
	background-position: center;
	filter: blur(30px) brightness(0.22);
	opacity: 1;
	z-index: 0;
}
button {
	background-color: initial;
	border: initial;
	font-family: inherit;
	font-size: 1.6rem;
	color: #e0e0e0;
	text-shadow: inherit;
	cursor: pointer;
	padding: 0.7rem 1.3rem;
	margin: 0;
	transition: all 0.06s ease-out;
	border-radius: 30px;
	border: 1px solid transparent;
}
button span {
	background-color: #4b493d;
	padding: 0 0.3rem;
	line-height: 1.7rem;
	border-radius: 4px;
	border-bottom: 1px solid #646056;
	border-top: 1px solid #877d58;
	display: inline-block;
	color: #d2ceba;
}
button:hover {
	color: #e3e3e3;
	background-color: #121212;
}

/* Top controls */
nav {
    position: sticky;
    top: 0;
    padding: 1rem;
    width: 100%;
    background-color: #141414a1;
}

/* Section */
section {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
	padding: 3rem;
	max-width: 1500px;
	align-items: center;
	z-index: 1;
}
block.player-gauges {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
}

/* Gauge */
.gauge-bar {
    position: relative;
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: column;
    background-image: url(gauge-background.png);
    clip-path: polygon(
        17px 0px,
        calc(100% - 17px) 0%,
        100% 50%,
        calc(100% - 17px) 100%,
        17px 100%,
        0% 50%
    );
    border-radius: 60px;
    align-items: center;
}
.gauge-border {
	height: 3px;
	width: 100%;
	z-index: 1;
}
.gauge-border.top {
    background-image: url(gauge-top-border.png);
}
.gauge-border.bottom {
    background-image: url(gauge-bottom-border.png);
}
gauge-wrapper {
	position: relative;
	margin: 0 3px;
	width: 100%;
}
gauge-wrapper::before {
	content: "";
	position: absolute;
	top: 0px;
	left: -3px;
	width: 20px;
	height: 30px;
	background-image: url(gauge-corners.png);
	z-index: 1;
}
gauge-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	right: -3px;
	width: 20px;
	height: 30px;
	background-image: url(gauge-corners.png);
	background-position: 20px;
	z-index: 1;
}
.gauge-points {
    height: 24px;
    position: relative;
    background-repeat: repeat-x;
    box-shadow: inset 0 0 9px 3px #ff000000;
    overflow: hidden;
}
gauge-info {
	font-size: 2.2rem;
	display: flex;
	justify-content: center;
	gap: 0.3rem;
}
gauge-current {
	width: 5rem;
	text-align: right;
}
gauge-number-separator {
	color: #897c62;
}
gauge-capacity {
	width: 5rem;
	text-align: left;
}
.gauge-gradient {
	position: absolute;
	height: 100%;
	width: 30px;
	right: 0;
	mix-blend-mode: lighten;
}
.gauge-gradient:first-child {
	left: 0;
	transform: rotateY(180deg);
}
.gauge-shadow-points {
    height: 24px;
    background-repeat: repeat-x;
    top: 3px;
    position: absolute;
    filter: brightness(0.6);
	box-shadow: 0px 0px 16px #ff000000;
}
.gauge-transition {
	transition: width 0.24s cubic-bezier(0.22, 1.13, 0.5, 0.92);
}
.gauge-shadow-points.gauge-transition {
	transition-delay: 0.36s;
}
body.enable-alternative-gauge .gauge-gradient:first-child {
	display: none;
}
body.enable-alternative-gauge .gauge-bar {
	align-items: initial;
}
body.enable-stack-gauges .player-gauges {
    flex-direction: column;
}
body.enable-stack-gauges .gauge-bar {
	width: 542px;
}
body.enable-stack-gauges gauge-wrapper {
	width: initial;
}
body.enable-stack-gauges block.player-gauges {
	gap: 1rem;
}

/* Health bar */
health-bar .gauge-points, health-bar .gauge-shadow-points {
    background-image: url(health-strip.png);
}
health-bar .gauge-gradient {
    background-image: url(health-gradient.png);
}
health-bar.gauge-bar.gauge-low {
	animation: health-glow 1.1s ease-in-out infinite;
}
health-bar.gauge-bar.gauge-low .gauge-shadow-points {
	box-shadow: 0px 0px 16px #ff0000a8;
}

/* Magicka bar */
magicka-bar .gauge-points, magicka-bar .gauge-shadow-points {
    background-image: url(magicka-strip.png);
}
magicka-bar .gauge-gradient {
    background-image: url(magicka-gradient.png);
}
magicka-bar.gauge-bar.gauge-low {
	animation: magicka-glow 1.1s ease-in-out infinite;
}
magicka-bar.gauge-bar.gauge-low .gauge-shadow-points {
	box-shadow: 0px 0px 16px #51a4bab4;
}

/* Fatigue bar */
fatigue-bar .gauge-points, fatigue-bar .gauge-shadow-points {
    background-image: url(fatigue-strip.png);
}
fatigue-bar .gauge-gradient {
    background-image: url(fatigue-gradient.png);
}
fatigue-bar.gauge-bar.gauge-low {
	animation: fatigue-glow 1.1s ease-in-out infinite;
}
fatigue-bar.gauge-bar.gauge-low .gauge-shadow-points {
	box-shadow: 0px 0px 16px #25b959;
}

action-bar {
	display: flex;
	gap: 5rem;
}

/* Animations */
@keyframes health-glow {
	0% {box-shadow: inset 0 0 9px 3px #ff0000a8}
	50% {box-shadow: inset 0 0 10px 5px #ff00000f}
	100% {box-shadow: inset 0 0 9px 3px #ff0000a8}
}
@keyframes magicka-glow {
	0% {box-shadow: inset 0 0 9px 3px #51a4bab4}
	50% {box-shadow: inset 0 0 10px 5px #51a4ba0f}
	100% {box-shadow: inset 0 0 9px 3px #51a4bab4}
}
@keyframes fatigue-glow {
	0% {box-shadow: inset 0 0 9px 3px #25b959}
	50% {box-shadow: inset 0 0 10px 5px #25b9590f}
	100% {box-shadow: inset 0 0 9px 3px #25b959}
}

/* Fonts */
@font-face {
	font-family: 'KingthingsPetrock';
	font-weight: normal;
	font-style: normal;
	src: url('Kingthings_Petrock.ttf') format('truetype');
}