/*
Made by OpaliteArchitect
*/

html {
	scroll-behavior: smooth;
}

* {
	/*border: 1px solid red;*/
	margin: 0;
	padding: 0;
	user-select: none;
}

a {
	text-decoration: underline;
	color: #fab;
}

button {
	font-size: 1em;
}

button:hover {
	cursor: pointer;
}

body {
	font-family: Verdana, sans-serif;
	text-align: center;
	margin: auto;
	background-image: url("images/body-background.webp");
	width: 80%;
}

@media only screen and (min-width: 600px) {
	body {
		width: 480px;
	}
}

body > header {
	font-family: Georgia, serif;
	padding: 2rem 0;
	background-color: #834;
}

/*
Stats
*/

#stats {
	background-color: #DDD;
	position: sticky;
	top: 0;
	z-index: 1;
	padding-top: 1rem;
}

#tick {
	border: 2px solid #333;
	width: 80%;
	height: 2.5rem;
	margin: auto;
	margin-bottom: 1rem;
	font-size: 1.5em;
	color: #333; /*#DDD*;*/
}

#tick p {
	height: 70%;
	font-family: Georgia, serif;
}

#tickFill {
	height: 30%;
	width: 100%;
	background-color: #333;
	transform-origin: left;
	transform: scaleX(0);
}

/*
Dirt Count Stats
*/

#dirtStats {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
}

.stats {
	display: none;
	margin-bottom: 1rem;
	padding: 0.5rem 0.2rem;
	font-size: 0.8em;
	color: #CCC;
	letter-spacing: 0.2em;
	font-weight: bold;
	border: 2px solid black;
	border-radius: 10px;
	width: 28%;
}

#basicDirtStat {
	display: block;
	background-color: #A21;
}

#rebirthDirtStat {
	background-color: #45B;
}

#prestigeDirtStat {
	background-color: #D83;
}

/* 
Layers & Layers Header
*/

#layers {
	display: flex;
	flex-direction: column;
	font-family: Verdana, sans-serif;
}

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

.layersHeader {
	flex-grow: 1;
	padding: 1rem;
	border-bottom: 2px solid black;
}

.resetBtn {
	width: 75%;
	height: 4rem;
	font-size: 1.4em;
	box-shadow: 1px 1px #444;
}

.resetBtn:hover {
	border: 3px solid #EEE;
	box-shadow: 4px 4px #444;
}

.resetBtn:active {
	transform: translate(1px, 1px);
	box-shadow: 2px 2px #444;
}

.layersHeader details {
	margin-top: 1rem;
}

.layersHeader details summary:hover {
	cursor: pointer;
}

.layersHeader details p {
	text-align: justify;
	text-indent: 2em;
}

/*
upgrades UI
*/

.upgradesContainers {
	flex-grow: 4;
	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1rem;
}

.upgradesContainers ul {
	margin: auto;
}

.upgradesContainers li {
	width: 100%;
}

.upgrades {
	margin: auto;
	border: 1px transparent;
	border-radius: 5px;
	text-align: center;
	border: 1px solid black;
	margin: 1rem 0;
	display: none; 
}

.upgrades > header {
	padding: 1rem;
	border-bottom: 1px solid black;
}

.upgrades > main {
	padding: 2rem;
}

.upgrades > footer {
	display: grid;
	grid-template-columns: auto auto;
	height: 2rem;
	border-top: 1px solid black;
}

.upgrades > footer > span {
	margin: auto;
}

.upgrades > footer > button {
	background-color: inherit;
	border: 2px solid #BBB;
	border-radius: 5px;
}

.upgrades > footer > button:hover {
	box-shadow: 2px 2px #444;
}

.upgrades > footer > button:active {
	transform: translate(1px, 1px);
}

/*
Basic
*/

#basicLayer {
	background-color: #A21;
}

.basicUpgrades {
	background-color: #F00;
}

.basicUpgrades > footer > button:hover {
	background-color: #F44;
}

/*
Rebirth
*/

#rebirthLayer {
	background-color: #45B;
	display: none;
}

#rebirthLayer > header {
	
}

#rebirthLayerHeader {
	display: none;
}

#preRebirthHeader {
	padding: 1rem;
	font-size: 1.5em;
	font-weight: bold;
	display: none;
}

#rebirthBtn {
	background-color: #32F;
}

#rebirthBtn:hover{
	background-color: #55F;
}

#rebirthUpgrades {
	/*display: none;*/
}

.rebirthUpgrades {
	background-color: #00F;
}

.rebirthUpgrades > footer > button:hover {
	background-color: #44F;
}

/*
Prestige
*/

#prestigeLayer {
	background-color: #D83;
	display: none;
}

#prestigeLayer > header {
	display: none;
}

#prestigeBtn {
	background-color: #F93;
}

#prestigeBtn:hover {
	background-color: #FC6;
}

#prestigeTabs {
	height: 2.5rem;
}

#prestigeTabs > ul{
	display: flex;
	list-style-type: none;
	height: 100%;
}

#prestigeTabs li {
	width: 100%;
}

#prestigeTabs button {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: inherit;
	border: none;
}

#prestigeTabs #prestigeTab1Btn {
	
}

#prestigeTab1Btn:hover {
	cursor: default;
}

#prestigeTab1Btn:active {
	
}

#prestigeTabs #prestigeTab2Btn {
	border-left: 1px solid black;
	border-bottom: 2px solid black;
}

#prestigeTab2Btn:hover {
	transform: translateY(2px);
	box-shadow: 0 4px #444;
}

#prestigeTab2Btn:active {
	transform: translateY(5px);
	box-shadow: none;
}

/*
Prestige Upgrades
*/

#prestigeTab1 {
	display: none;
}

.prestigeUpgrades {
	background-color: #F70;
}

.prestigeUpgrades > footer > button:hover {
	background-color: #FA4;
}

/*
Prestige Milestones
*/

#prestigeTab2 {
	display: none;
}

#prestigeTab2 > header{
	padding: 1rem;
}