/* Fonts */

@font-face {
	font-display: swap;
	font-family: main;
	src: url(temple.woff2);
}

@font-face {
	font-display: swap;
	font-family: gabriola;
	src: url(gabriola.woff2);
}

/* General */

body{
	overflow: hidden;
	-webkit-user-drag: none;
	cursor: url(images/cursor.webp) 0 0, auto;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	outline: none;
	margin: 0;
}

canvas{
	position: absolute;
	width: 100%;
	height: 100%;
}

#Darkness{
	pointer-events: none;
	display: none;
}

#Game{
	transition: 0.5s filter;
	display: none;
}

/* Loading Screen */

#loading_screen{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 200%;
	background-image: url(images/floor.webp);
	transition: 1s opacity;
}

#logo{
	position: fixed;
	top: 50%;
	left: 50%;
	width: min(100vw, calc(1600vh / 9));
	height: min(39.375vw, 70vh);
	transform: translate(-50%, -70%);
	background-image: url(images/logo.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#loading_bar{
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(56.25vw, 100vh);
	height: min(11.25vw, 20vh);
	transform: translate(-50%, min(7.875vw, 14vh));
	background-image: url(images/loading_bar.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#loading_bar_filled_container{
	position: absolute;
	width: 1%;
	height: 100%;
	overflow: hidden;
	transition: 0.1s width;
}

#loading_bar_filled{
	width: min(56.25vw, 100vh);
	height: 100%;
	background-image: url(images/loading_bar_filled.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#loading_bar_current{
	position: absolute;
	top: 30%;
	left: 1.5%;
    transform: translateX(-50%);
	width: min(56.25vw, 100vh);
	height: 40%;
	background-image: url(images/loading_bar_current.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.1s left;
}

#loading_bar_percentage{
	position: absolute;
    font-size: min(3.375vw, 6vh);
    font-family: main;
    color: #e54d15;
    opacity: 0.85;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-text-stroke: 0.2vh rgba(64, 16, 0, 0.25);
}

#vignette{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at 50%,
		rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) min(22.5vw, 40vh),
		rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) min(45vw, 80vh),
		rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) 100%);
}

#loading_screen_tip{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, min(18vw, 32vh));
	font-size: min(1.125vw, 2vh);
	font-family: Trebuchet MS;
    font-style: italic;
    color: #EFF;
	transition: 0.5s font-size, 0.5s text-shadow;
}

#loading_screen_tip:hover{
	text-shadow: 0 0 4vh #EFF;
}

/* HUD */

#HUD{
	opacity: 0;
	pointer-events: none;
	transition: 1s opacity;
}

#exclamation{
	position: relative;
	top: 50%;
	left: calc(100% - min(2.025vw, 3.6vh));
	width: min(1.40625vw, 2.5vh);
	height: min(3.375vw, 6vh);
	transform: translateY(-100%);
	background-image: url('images/!.webp');
	background-size: cover;
}

.bestiary #exclamation{
	top: 20%;
}

#discord_link{
	position: absolute;
    bottom: min(0.5625vw, 1vh);
    right: min(0.5625vw, 1vh);
    color: #EFF;
    font-family: gabriola;
    font-size: min(1.35vw, 2.4vh);
    text-decoration: none;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

#crazygames_link{
	position: absolute;
    bottom: min(0.5625vw, 1vh);
    left: min(0.5625vw, 1vh);
	cursor: url(images/active_cursor.webp) 0 0, auto;
	background-image: url(cg_link.webp);
	width: min(11.25vw, 20vh);
	height: min(5.625vw, 10vh);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Main Buttons */

#main_buttons_container{
	position: fixed;
	display: flex;
	width: 93.4vw;
	left: 3.3vw;
	height: min(5vw, calc(80vh / 9));
	justify-content: space-between;
	padding-top: min(2vw, calc(32vh / 9));
}

.button{
	width: min(16vw, calc(256vh / 9));
	height: min(5vw, calc(80vh / 9));
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.5s filter;
	outline: 0;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

.button:hover, #return:hover, #buy_upgrade:hover, #claim_trophy:hover, .setting_box:hover, .pause_menu_button:hover, #hard_reset:hover, .hard_reset_confirmation_button:hover{
	filter: brightness(1.2);
}

.button:active, #return:active, #buy_upgrade:active{
	filter: brightness(1.5);
}

#bestiary_button{
	background-image: url(images/buttons/bestiary.webp);
}

#trophies_button{
	background-image: url(images/buttons/trophies.webp);
}

#upgrades_button{
	background-image: url(images/buttons/upgrades.webp);
}

#settings_button{
	background-image: url(images/buttons/settings.webp);
}

/* Panels */

.panel{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url(images/blank_panel.webp);
	background-size: 100% 100%;
	padding: min(1vw, calc(16vh / 9));
	display: none;
}

#panel_container{
	position: fixed;
	display: flex;
	width: min(91.8vw, 163.2vh);
	height: min(43.25vw, calc(688vh / 9));
	top: calc(50% + min(3.65625vw, 6.5vh));
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.5s opacity;
	opacity: 0;
}

#panel_1{
	flex-direction: column;
	justify-content: space-between;
}

#panel_2{
	flex-direction: row;
}

#panel_3{
	justify-content: space-evenly;
}

#close_panel{
	position: absolute;
	top: min(-0.5625vw, -1vh);
	left: min(92.25vw, 164vh);
	width: min(3.375vw, 6vh);
	height: min(3.375vw, 6vh);
	transform: translate(-50%, -50%);
	background-image: url(images/close_panel.webp);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

/* Upgrades */

.upgrade_rows_container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 min(2vw, calc(32vh / 9)) 0 min(2vw, calc(32vh / 9));
}

.upgrade_row{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.full_upgrade_row{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.upgrade_button{
	width: min(4.6vw, calc(368vh / 45));
	height: min(4.6vw, calc(368vh / 45));
	background-size: cover;
	transition: 0.5s all;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

.upgrade_number{
	position: relative;
	width: 0;
	height: 0;
	top: 72%;
	left: 65%;
	color: #EFF;
	font-family: Trebuchet MS;
	text-align: right;
	font-size: min(0.9vw, 1.6vh);	
	pointer-events: none;
}

.maxed{
	top: 68%;
	left: 60%;
	color: #FC2 !important;
	text-shadow: 0 0 min(calc(25vw/96), calc(25vh/54)) #FD0;
	font-size: min(1.08vw, 1.92vh);
}

.maxed_text{
	color: #FD2 !important;
	text-shadow: 0 0 min(calc(25vw / 96), calc(25vh / 54)) #000000;
	font-size: min(1.8vw, 3.2vh);
}

.ivy{
	position: relative;
	width: 120%;
	height: 120%;
	top: -10%;
	left: -10%;
	background-size: cover;	background-image: url(images/ivy.webp);
	opacity: 0;
	pointer-events: none;
	transition: 1s all;
}

.unupgradeable{
	opacity: 0.5;
}

.upgrade_title{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	font-size: min(4vw, calc(64vh / 9));
	font-family: main;
}

.upgrade_shortinfo{
	font-style: italic;
	font-size: min(1.0125vw, 1.8vh);
	text-align: center;
}

.fire_upgrade{
	filter: drop-shadow(0 0 min(0.4vw, calc(32vh / 45)) #F80);
}

.spirit_upgrade{
	filter: drop-shadow(0 0 min(0.4vw, calc(32vh / 45)) #08F);
}

.shiny_fire_upgrade{
	filter: drop-shadow(0 0 min(0.4vw, calc(32vh / 45)) #F80) brightness(1.2);
}

.shiny_spirit_upgrade{
	filter: drop-shadow(0 0 min(0.4vw, calc(32vh / 45)) #08F) brightness(1.2);
}

#fire_upgrade_title{
	color: #F73;
	text-shadow: #F40 0 0 min(0.5vw, calc(8vh / 9));
}

#spirit_upgrade_title{
	color: #39D;
	text-shadow: #08F 0 0 min(0.5vw, calc(8vh / 9));
}

#return{
	margin: min(0.5625vw, 1vh) 0 min(0.5625vw, 1vh) 0;
	background-image: url(images/buttons/return.webp);
}

#return, #buy_upgrade{
	display: flex;
	width: min(12.8vw, 22.755vh);
	height: min(4vw, calc(64vh / 9));
	background-size: cover;
	transition: 0.5s filter;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

#buy_upgrade{
	font-family: main;
	color: rgb(108, 132, 124);
	justify-content: center;
	font-size: min(1.8vw, 3.2vh);
	align-items: center;
	background-image: url(images/buttons/blank.webp);
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

#chaotic_crystal{
	position: absolute;
	width: min(6.429375vw, 11.43vh);
	height: min(8.20125vw, 14.58vh);
	top: min(4.21875vw, 7.5vh);
	left: min(43.7625vw, 77.7vh);
	background-image: url(images/chaotic_crystal.webp);
	background-size: cover;
	filter: grayscale(1);
	transition: 0.5s filter;
}

#chaos_title{
	font-family: main;
	font-size: min(2.8125vw, 5vh);
}

#chaos_subtitle{
	font-size: min(1.06875vw, 1.9vh);
	text-align: center;
}

#chaos_text{
	font-family: main;
	font-size: min(3.9375vw, 7vh);
	height: min(1.125vw, 2vh);
	top: min(-1.575vw, -2.8vh);
	position: relative;
	color: #F30;
	text-shadow: 0 0 2vh #F30;
}

#chaos_default_text{
	height: 100%;
	display: flex;
	align-items: center;
	text-align: center;
	line-height: min(2.25vw, 4vh);
}

#upgrade_description_container{
	display: flex;
	flex-direction: column;
}

#upgrade_textboard{
	height: 80%;
	width: 100%;
	background-image: url(images/upgrade_textboard.webp);
	background-size: 100% 100%;
}

#upgrade_text{
	position: relative;
	width: calc(60% - min(1.5vw, calc(8vh / 3)));
	height: calc(200%/3 - min(1vw, calc(16vh / 9)));
	top: min(8.4375vw, 15vh);
	left: min(5.34375vw, 9.5vh);
	color: #EFF;
	font-family: Trebuchet MS;
	padding: min(0.75vw, calc(4vh / 3));
	font-size: min(1.5vw, calc(8vh / 3));
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#upgrade_description{
	justify-content: flex-end;
	align-items: center;
}

.upgrade_name{
	font-family: main;
	font-size: min(2.8125vw, 5vh);
}

.upgrade_subtitle{
	font-size: min(1.29375vw, 2.3vh);
	margin-top: min(1vw, calc(16vh / 9));
}

.upgrade_text{
	display: flex;
	flex-direction: column;
}

.upgrade_stats_row{
	display: flex;
	justify-content: space-between;
	font-size: min(1vw, calc(16vh / 9));
	width: min(9vw, 16vh);
}

.wide{
	width: min(11.25vw, 20vh) !important;
}

.upgrade_predictions{
	color: #2D7;
}

#default_upgrade_text{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inactive{
	pointer-events: none;
	opacity: 0.5;
}

#upgrade_locked{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	font-size: min(4.05vw, 7.2vh);
	font-family: main;
}

/* Coins */

.text_coin{
	width: min(1.125vw, 2vh);
	height: min(1.125vw, 2vh);
	background-image: url(images/coin_icon.webp);
	background-size: cover;
	margin-left: min(0.28125vw, 0.5vh);
	margin-right: min(0.28125vw, 0.5vh);
}

.medium_coin{
	width: min(1.40625vw, 2.5vh) !important;
	height: min(1.40625vw, 2.5vh) !important;
}

.large_coin{
	width: min(1.8vw, 3.2vh) !important;
	height: min(1.8vw, 3.2vh) !important;
}

#ui_coins_earned .text_coin, #wealth .text_coin, #global_wealth .text_coin, #intro_wealth .text_coin{
	width: min(1.8vw, 3.2vh);
	height: min(1.8vw, 3.2vh);
	margin-top: min(0.25vw, calc(4vh / 9));
}

/* Wealth */

#wealth{
	display: flex;
	width: 100%;
	font-family: main;
	color: #F5C71B;
	align-items: center;
	justify-content: center;
	font-size: min(2.8125vw, 5vh);
}

#global_wealth, #intro_wealth{
	position: fixed;
	display: flex;
	width: 100%;
	top: 90%;
	font-family: main;
	color: #F5C71B;
	align-items: center;
	justify-content: center;
	font-size: min(2.8125vw, 5vh);
	pointer-events: none;
}

/* Intro & Outro */

#main_intro, #outro{
	transition: 2s opacity;
	opacity: 0;
}

.intro_fade{
	transition: 2s opacity !important;
}

.intro_button:hover{
	opacity: 1 !important;
}

.large_main_text{
	font-size: min(5.625vw, 10vh) !important;
}

.small_main_text{
	font-size: min(3.375vw, 6vh) !important;
}

#play, #continue, #intro_text, #outro_text, #intro_subtext, #outro_subtext{
	position: fixed;
	width: min(91.8vw, 163.2vh);
	height: min(38.25vw, 68vh);
	left: 50%;
	transform: translate(-50%, -50%);
	color: #EFF;
	font-family: main;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: inherit;
}

#intro_previous_part, #intro_skip{
	position: fixed;
	width: fit-content;
	height: fit-content;
    bottom: min(1.125vw, 2vh);
	color: #EFF;
	font-family: main;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: inherit;
    font-size: min(2.25vw, 4vh);
	opacity: 0;
	transition: 0.5s opacity;
}

#intro_previous_part{
	left: min(1.125vw, 2vh);
}

#intro_skip{
    right: min(1.125vw, 2vh);
}

#play, #continue, #intro_subtext, #outro_subtext{
	top: 50%;
	font-size: min(4.05vw, 7.2vh);
}

#play, #continue, .ghostly{
	animation-duration: 1s;
	animation-name: ghostly;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
}

#intro_text, #outro_text{
	font-family: gabriola;
    top: 20%;
	text-align: center;
    font-size: min(5.625vw, 10vh);
	transition: 2s opacity;
	pointer-events: none;
}

#intro_subtext, #outro_subtext{
	opacity: 0;
	pointer-events: none;
}

/* UI */

#UI{
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 1s opacity;
	pointer-events: none;
}

#ui_timer{
	position: fixed;
	top: 8%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #EFF;
	text-shadow: 0 0 min(calc(25vw / 96), calc(25vh / 54)) #EFF;
	font-family: main;
	font-size: min(3.375vw, 6vh);
	text-align: center;
	pointer-events: none;
	opacity: 0.8;
}

#ui_coins_earned{
	position: fixed;
	width: fit-content;
	top: 92%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #F5C71B;
	font-family: main;
	font-size: min(2.25vw, 4vh);
	text-align: center;
	pointer-events: none;
	transition: 1s opacity;
	display: flex;
	align-items: center;
}

#continue{
	pointer-events: none;
	display: none;
}

#aftermatch_stats{
    display: flex;
    align-items: center;
    font-size: min(2.25vw, 4vh);
}

.firelord_timer{
	color: #FB2 !important;
	text-shadow: 0 0 min(calc(25vw / 36), calc(25vh / 18)) #FB2 !important;
	font-size: min(6.75vw, 12vh) !important;
}

.madness_timer{
	color: #F00 !important;
	text-shadow: 0 0 min(calc(25vw / 36), calc(25vh / 18)) #F00 !important;
}

#dive_in_memories{
    position: fixed;
    color: #EFF;
    top: 90%;
    width: max-content;
	left: 50%;
	transform: translateX(-50%);
    font-family: main;
    font-size: min(2.8125vw, 5vh);
    text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: 1s opacity;
}

/* Boss */

#boss_hp_bar{
	position: absolute;
	top: 5%;
	left: 50%;
	width: min(50vw, (800vh / 9));
	height: min(3.125vw, (50vh / 9));
	transform: translateX(-50%);
	background-image: url(images/boss_hp_bar.webp);
	opacity: 0;
	display: none;
	pointer-events: none;
	transition: 3s opacity;
	background-size: 100%;
	background-repeat: no-repeat;
}

#boss_hp{
	position: relative;
	top: min(0.29296875vw, calc(25vh / 48));
	left: min(0.29296875vw, calc(25vh / 48));
	width: 98.828125%;
	height: 79.6875%;
	background-image: url(images/boss_hp.webp);
	display: flex;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#boss_hp_number{
	position: relative;
	top: -5%;
	left: min(25vw, calc(400vh / 9));
	color: #ED0;
	transform: translateX(-50%);
	font-family: main;
	font-size: min(2.25vw, 4vh);
}

.boss_timer{
	font-size: min(4.5vw, 8vh) !important;
	width: 90% !important;
	color: #F00 !important;
	text-shadow: 0 0 min(calc(25vw / 36), calc(25vh / 18)) #F00 !important;
}

/* Bestiary */

.bestiary{
	width: min(14.0625vw, 25vh);
	height: min(14.0625vw, 25vh);
	background-size: cover;
	transition: 0.5s transform, 0.5s filter;
}

.bestiary_section{
	position: relative;
	height: 100%;
	width: 40%;
	display: flex;
	align-content: space-evenly;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.bestiary:hover, .trophy:hover{
	filter: brightness(1.2);
}

.viewed{
	transform: scale(1.1);
}

#bestiary_unselected_text, #bestiary_unlock_text, #bestiary_canvas, #bestiary_info_container{
	position: absolute;
	left: 50%;
	width: min(calc(50vw/3), calc(800vh/27));
	height: min(calc(50vw/3), calc(800vh/27));
	transform: translate(-50%, -50%);
	text-align: center;
}

#bestiary_info_container, #bestiary_canvas{
	background-color: rgba(128, 128, 128, 0.2);
	box-shadow: 0 0 min(calc(25vw / 12), calc(100vh / 27)) rgba(128, 128, 128, 0.5);
	border-radius: min(calc(25vw / 12), calc(100vh / 27));
}

#bestiary_unselected_text, #bestiary_unlock_text{
	pointer-events: none;
	color: #EFF;
	font-family: main;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: min(2vw, calc(32vh / 9));
}

#bestiary_unselected_text, #bestiary_canvas{
	top: 28.5%;
}

#bestiary_unlock_text, #bestiary_info_container{
	top: 71.5%;
}

.bestiary_info{
	width: 30%;
	display: flex;
	align-items: center;
}

.bestiary_info_row{
	width: 60%;
	display: flex;
	justify-content: space-between;
}

.bestiary_text{
	width: 20%;
}

.bestiary_icon{
	margin-right: min(calc(25vw / 96), calc(25vh / 54));
	width: min(calc(25vw / 16), calc(25vh / 9));
	height: min(calc(25vw / 16), calc(25vh / 9));
	background-size: cover;
}

#bestiary_name{
	font-size: min(calc(25vw / 12), calc(100vh / 27));
	color: #EFF;
	font-family: main;
}

#bestiary_description{
	width: 90%;
	height: 40%;
	font-size: min(calc(25vw / 16), calc(25vh / 9));
	color: #EFF;
	font-family: main;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#bestiary_hp_icon
{
	background-image: url(images/bestiary/hp_icon.webp);
}

#bestiary_speed_icon
{
	background-image: url(images/bestiary/speed_icon.webp);
}

#bestiary_reward_icon
{
	background-image: url(images/bestiary/reward_icon.webp);
}

#bestiary_total_icon
{
	background-image: url(images/bestiary/total_icon.webp);
}

.bestiary_text{
	font-size: min(calc(175vw / 96), calc(175vh / 54));
	color: #EFF;
	font-family: main;
}

#bestiary_main{
	width: 100%;
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
	display: none;
}

/* Trophies */

#trophies_container{
	width: 100%;
	height: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.trophy_row{
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.trophy{
	width: min(6.75vw, 12vh);
	height: min(6.75vw, 12vh);
	background-size: cover;
	transition: 0.5s transform, 0.5s filter;
	background-image: url(images/trophies/locked.webp);
}

#trophy_description{
	margin-top: min(0.9vw, 1.6vh);
	justify-content: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: min(2.25vw, 4vh);
	color: #EFF;
	font-family: main;
	text-align: center;
	position: relative;
	width: 98%;
	height: min(5.625vw, 10vh);
	left: 1%;
	border-radius: min(0.5625vw, 1vh);
	box-shadow: 0 0 min(1.125vw, 2vh) rgba(128, 255, 200, 0.1);
	background-color: rgba(128, 255, 200, 0.1);
}

#claim_trophy{
	background-image: url(images/buttons/blank.webp);
    width: min(calc(100vw / 6), calc(800vh / 27));
    height: min(calc(125vw / 24), calc(250vh / 27));
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(2.25vw, 4vh);
	color: rgb(108, 132, 124);
	transition: 0.5s filter;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

#total_trophies_underlayer{
    position: relative;
    height: min(0.5625vw, 1vh);
    background-color: #424;
    width: 98%;
    border-radius: min(0.5625vw, 1vh);
    box-shadow: 0 0 min(1.125vw, 2vh) #828;
    left: 1%;
    margin-top: min(0.9vw, 1.6vh);
}

#total_trophies{
    position: relative;
    height: min(0.5625vw, 1vh);
    background-color: #EFF;
    width: 0%;
    border-radius: min(0.5625vw, 1vh);
    box-shadow: 0 0 min(1.125vw, 2vh) #EFF;
    transition: 1s width;
}

#total_trophies_text{
	transform: translateY(-62%);
	text-align: center;
	font-size: min(1.8vw, 3.2vh);
	font-family: main;
	color: #EFF;
	text-shadow: 0 0 min(calc(25vw / 96), calc(25vh / 54)) #828;
}

#trophy_column_icons{
	position: relative;
    left: 50%;
    transform: translateX(-50%);
	width: 99%;
	height: min(2.8125vw, 5vh);
	display: flex;
	justify-content: space-around;
}

.trophy_column_icon{
	width: min(2.8125vw, 5vh);
	height: min(2.8125vw, 5vh);
	background-size: cover;
}

/* Settings */

.setting_box{
	width: min(4.5vw, 8vh);
    height: min(4.5vw, 8vh);
    background-image: url(images/checkbox_0.webp);
    border-radius: min(0.5625vw, 1vh);
    background-size: cover;
	transition: 0.5s filter;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

.setting_text{
	font-family: main;
    font-size: min(2.8125vw, 5vh);
    color: #EFF;
    transform: translateY(-0.5vh);
}

.setting{
    display: flex;
	flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.slider_type{
	flex-direction: column;
	height: 27.5%;
	transform: translate(-50%, -50%);
	position: fixed;
}

.box_type{
	flex-direction: row;
}

.setting_slider{
    width: min(21vw, 38.4vh);
    height: min(4.21875vw, 7.5vh);
	background-image: url(images/stone_bar.webp);
    background-size: contain;
}

#setting_0{
	top: 20%;
	left: 33%;
}

#setting_1{
	top: 20%;
	left: 67%;
}

#pause_menu_setting_0, #pause_menu_setting_1{
	position: initial;
	transform: none;
}

#setting_4{
	top: 50%;
	left: 33%;
}

#setting_5{
	top: 50%;
	left: 67%;
}

#setting_6{
	top: 75%;
	left: 33%;
}

#setting_7{
	top: 75%;
	left: 67%;
}

#setting_4_slider, #setting_5_slider{
	height: 100%;
	background-image: url(images/madness_bar.webp) !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#setting_5_slider{
	background-image: url(images/searing_light_bar.webp) !important;
}

#slider_thumb_4{
	top: 40%;
}

#slider_thumb_5{
	top: 50%;
}

#setting_4, #setting_5{
	display: none;
}

#setting_6, #setting_7{
	display: none;
    position: fixed;
    width: 20%;
    transform: translate(-50%, -50%);
}

.slider_thumb{
	position: relative;
	width: min(3.375vw, 6vh);
	height: min(3.375vw, 6vh);
	top: 7%;
	transform: translateX(-50%);
	background-image: url(images/slider_thumb.webp);
	background-size: cover;
}

/* Pause Menu */

#pause_menu{
    position: absolute;
	display: flex;
    width: min(19.53125vw, calc(625vh / 18));
    height: min(calc(4125vw / 144), calc(1375vh / 27));
    background-image: url(images/blank_textboard.webp);
    background-size: 100% 100%;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
	opacity: 0;
	pointer-events: none;
	transition: 0.5s opacity;
}

#pause_menu_container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
	top: 25%;
    position: relative;
    height: 67%;
    width: 100%;
	left: -0.3%;
}

#pause_menu_container .setting_text
{
	font-size: min(1.8vw, 3.2vh);
}

#pause_menu_container .setting_slider
{
	width: min(11.25vw, 20vh);
	height: min(2.1375vw, 3.8vh);
}

#pause_menu_container .slider_thumb
{
	position: relative;
	top: -12%;
    left: 14%;
	width: min(2.671875vw, 4.75vh);
	height: min(2.671875vw, 4.75vh);
}

#pause_menu_buttons_container{
	height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.pause_menu_button{
    width: min(11.263725vw, 20.0244vh);
    height: min(3.52vw, calc(56.32vh / 9));
    background-image: url(images/buttons/blank.webp);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: main;
    color: rgb(108, 132, 124);
    font-size: min(1.8vw, 3.2vh);
	transition: 0.5s filter;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

#hard_reset{
	position: fixed;
    left: 50%;
    top: 90%;
	width: 20%;
	height: 10%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: main;
	font-size: min(2.025vw, 3.6vh);
	color: #b61e00;
	cursor: url(images/active_cursor.webp) 0 0, auto;
	background-position: center;
	background-image: url(images/buttons/reset.webp);
	background-size: contain;
	background-repeat: no-repeat;
	transition: 0.5s filter;
}

/* Hard Reset */

#hard_reset_confirmation_container{
	position: relative;
    width: 100%;
    top: 30%;
    height: 40%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

#hard_reset_confirmation_text{
	font-family: Trebuchet MS;
    color: #EFF;
    text-align: center;
	font-size: min(1.35vw, 2.4vh);
    line-height: min(2.25vw, 4vh);
}

#hard_reset_confirmation_buttons_container{
    width: 40%;
    display: flex;
    justify-content: space-between;
    height: 30%;
}

#cancel_hard_reset{
    color: rgb(108, 132, 124);
    background-image: url(images/buttons/blank.webp);
}

#confirm_hard_reset{
    color: #b61e00;
    background-image: url(images/buttons/reset.webp);
}

.hard_reset_confirmation_button{
    width: 44%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	font-family: main;
    font-size: min(2.25vw, 4vh);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	transition: 0.5s filter;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

/* Trophy Tracker */

#track_trophy_container{
	position: absolute;
	display: none;
	top: 91.5%;
	left: 90%;
	transform: translate(-50%, -50%);
	align-items: center;
	justify-content: space-between;
	width: min(10.6875vw, 19vh);
}

#track_trophy_checkbox{
	background-image: url(images/checkbox_0.webp);
	width: min(2.25vw, 4vh);
	height: min(2.25vw, 4vh);
	background-size: contain;
	cursor: url(images/active_cursor.webp) 0 0, auto;
}

#track_trophy_text{
	font-family: main;
	color: #EFF;
	font-size: min(1.575vw, 2.8vh);
	text-align: center;
}

#trophy_tracker{
	position: absolute;
    top: 5%;
    right: min(-2.25vw, -4vh);
	padding-right: min(2.25vw, 4vh);
    background: linear-gradient(to left, rgba(76.5, 76.5, 76.6, 1), rgba(25.5, 25.5, 25.5, 1));
    width: min(13.5vw, 24vh);
    height: min(3.375vw, 6vh);
    border-radius: min(1.6875vw, 3vh) 0 0 min(1.6875vw, 3vh);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #EFF;
    font-family: Trebuchet MS;
    font-style: italic;
    font-size: min(0.81vw, 1.44vh);
	box-shadow: 0 0 min(1.125vw, 2vh) #EFF;
    line-height: 150%;
	transition: 5s all, 5s filter cubic-bezier(1, 0.71, 0.16, 2.21);
}

/* Mobile */

#mobile_pause_button, #mobile_shooting_button, #mobile_firelord_button{
	position: absolute;
	top: min(4.5vw, 8vh);
	right: min(4.5vw, 8vh);
	width: min(4.5vw, 8vh);
	height: min(4.5vw, 8vh);
	background-image: url(images/blank_round_button.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transition: 1s opacity;
}

#mobile_pause_button{
	right: unset;
	left: min(4.5vw, 8vh);
	background-image: url(images/mobile_pause.webp);
}

#mobile_firelord_button{
	right: min(13.5vw, 24vh);
	background-image: url(images/mobile_firelord.webp);
}

/* Vertical Ratio */

@media (max-aspect-ratio: 16/9){
	#play, #continue, #intro_subtext, #outro_subtext{
		font-size: min(max(4.05vw, 7.2vh), 10vw);
	}
	#discord_link, #crazygames_link{
		font-size: min(max(1.35vw, 2.4vh), 2.4vw);
	}
	#ui_coins_earned .text_coin{
		width: max(1.8vw, 3.2vh);
		height: max(1.8vw, 3.2vh);
		margin-left: min(max(0.28125vw, 0.5vh), calc(25vw / 36));
		margin-right: min(max(0.28125vw, 0.5vh), calc(25vw / 36));
	}
	.large_coin{
		width: min(max(1.8vw, 3.2vh), calc(40vw / 9)) !important;
		height: min(max(1.8vw, 3.2vh), calc(40vw / 9)) !important;
	}
	#global_wealth .text_coin, #intro_wealth .text_coin{
		width: max(1.8vw, 3.2vh);
		height: max(1.8vw, 3.2vh);
		margin-top: max(0.25vw, calc(4vh / 9));
	}
	#global_wealth, #intro_wealth{
		font-size: max(2.8125vw, 5vh);
	}
	#aftermatch_stats{
		font-size: min(max(2.25vw, 4vh), calc(50vw / 9));
	}
	#ui_coins_earned{
		font-size: max(2.25vw, 4vh);
	}
	#ui_timer{
		text-shadow: 0 0 max(calc(25vw / 96), calc(25vh / 54)) #EFF;
		font-size: max(3.375vw, 6vh);
	}
	#main_buttons_container{
		height: max(5vw, calc(80vh / 9));
		padding-top: max(2vw, calc(32vh / 9));
	}
	.button{
		width: max(16vw, calc(256vh / 9));
		height: max(5vw, calc(80vh / 9));
	}
	#pause_menu{
		width: max(19.53125vw, calc(625vh / 18));
		height: max(calc(4125vw / 144), calc(1375vh / 27));
	}
	#pause_menu_container .setting_text{
		font-size: max(1.8vw, 3.2vh);
	}
	#pause_menu_container .setting_slider{
		width: max(11.25vw, 20vh);
		height: max(2.1375vw, 3.8vh);
	}
	#pause_menu_container .slider_thumb{
		width: max(2.671875vw, 4.75vh);
		height: max(2.671875vw, 4.75vh);
	}
	.pause_menu_button{
		width: max(11.263725vw, 20.0244vh);
		height: max(3.52vw, calc(56.32vh / 9));
		font-size: max(1.8vw, 3.2vh);
	}
	#mobile_pause_button, #mobile_shooting_button, #mobile_firelord_button{
		top: max(2.8125vw, 5vh);
		right: max(2.8125vw, 5vh);
		width: max(2.8125vw, 5vh);
		height: max(2.8125vw, 5vh);
	}
	#mobile_firelord_button{
		top: max(8.4375vw, 15vh);
	}
	#mobile_pause_button{
		right: unset;
		left: max(2.8125vw, 5vh);
	}
	#intro_skip, #intro_previous_part{
		font-size: min(max(2.25vw, 4vh), 5vw);
		bottom: max(1.125vw, 2vh);
	}
	#intro_previous_part{
		left: max(1.125vw, 2vh);
	}
	#intro_skip{
		right: max(1.125vw, 2vh);
	}
	#intro_text, #outro_text{
		font-size: max(5.625vw, 10vh);
	}
	.large_main_text{
		font-size: min(max(5.625vw, 10vh), 10vw) !important;
	}
	.small_main_text{
		font-size: min(max(3.375vw, 6vh), 6vw) !important;
	}
	#dive_in_memories{
		font-size: min(max(2.8125vw, 5vh), 6vw);
	}
	#trophy_tracker{
		top: 15%;
		width: min(max(13.5vw, 24vh), 30vw);
		height: min(max(3.375vw, 6vh), 7.5vw);
		border-radius: min(max(1.6875vw, 3vh), 3.75vw) 0 0 min(max(1.6875vw, 3vh), 3.75vw);
		font-size: min(max(0.81vw, 1.44vh), 2vw);
		box-shadow: 0 0 min(max(1.125vw, 2vh), 2.5vw) #EFF;
	}
}

/* Animations */

@keyframes ghostly{
	from{
		opacity: 0.3;
	}
	to{
		opacity: 0.8;
	}
}