@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
:root {
	--booster-bg: #0068df;
	--booster-bg-h: #0276fc;
	--booster-border-color: #00008b;
	--theme-text-color: white;
	--theme-good-color: #39ff39;
	--theme-bad-color: red;
	--booster-border: var(--booster-border-color) solid;
	--global-font: "Noto Sans", sans-serif;
	--theme-button-color: rgb(218, 180, 111);
	--theme-button-hover: rgb(238, 197, 121);
	--theme-ui-bg: #6e562a;
	--theme-ui-text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}

body {
	color: var(--theme-text-color);
	font-family: var(--global-font);
	overflow-x: hidden;
}

img {
	/*
		this is the funniest one yet:
		chrome only supports pixelated while firefox only supports crisp-edges
		they're supposed to be different but crisp-edges on firefox looks the same as pixelated on chrome
		browsers are hilarious
	*/
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

#background {
	background-image: url("/sprites/background.jpg");
	background-size: cover;
	display: block;
	filter: blur(0.3em) brightness(85%); /* TODO: when the new background is done, remove this */
	height: 120%;
	width: 120%;
	left: -5em;
	top: -5em;
	position: fixed;
	z-index: -10;
	overflow: hidden;
}

#loadingscreen {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: black;
	z-index: 10000;
	padding-top: 2em;
}

#loadmessages {
	margin-top: 1em;
}

.flex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
	flex-flow: row wrap;
}

.flex-center {
	justify-content: center;
}

.flex-equal-width > * {
	flex: 1 1 0;
}

.scrollable-col {
	overflow-y: scroll;
	overflow-x: visible;
	transition: 0.15s;
	scrollbar-width: thin;
	padding: 0.2em;
	scrollbar-color: transparent transparent;
}

.scrollable-col:hover {
	scrollbar-color: var(--booster-bg) transparent;
}

/* stupid webkit garbage */
.scrollable-col::-webkit-scrollbar {
	display: block;
	width: 0.21em;
	padding: 0.1em;
	border-radius: 0.2em;
}

.scrollable-col::-webkit-scrolbar-thumb {
	opacity: 0;
	transition: 0.2s;
	border-radius: 0.2em;
}

.scrollable-col:hover::-webkit-scrollbar-thumb {
	opacity: 1;
	background: var(--booster-bg);
}

.full-container {
	padding: 1.9em;
	padding-top: 3em;
}

@media (min-width: 900px) {
	.main-clicker:active {
		transform: scale(0.75);
		filter: drop-shadow(0 0 0.625em #3f3f2fad);
		transition: 0.2s ease;
	}
	.main-clicker:hover:not(:active) {
		transform: scale(1.15);
		filter: drop-shadow(0 0 1.9em #5f5f5f);
	}

	.scrollable-col {
		height: 80vh;
	}
	
	body {
		overflow: hidden;
	}
}

.center {
	margin: auto;
}

.centertext {
	text-align: center;
}

@media (max-width: 900px) {
	
	html {
		zoom: 85%; /* this is really dumb but it makes the page more better on iPhones */
		user-select: none;
		touch-action: pan-y;
	}
	
	.main-clicker:active {
		transform: scale(0.90);
		filter: drop-shadow(0 0 0.625em #3f3f2fad);
		transition: 0.2s ease;
	}
	
	.scrollable-col {
		height: auto;
	}
	
	.booster:last-child {
		margin-bottom: 1.9em;
	}
	
	.col-parent {
		width: 100%;
		flex-basis: 100%;
	}
}

#oat-col {
	flex-basis: 15%;
}

#falling_oats {
	position: fixed;
	top: 0;
	z-index: -5;
}

.scores {
	filter: drop-shadow(0 0 0.32em black);
	font-size: 1.6em;
	user-select: none;
	margin-left: auto;
	margin-right: auto;
}

#oats {
	font-size: 1.25em;
}

#ops {
	font-size: 0.625em;
}

.booster {
	padding: 0.3em 0.2em;
	user-select: none;
	margin-top: 1em;
	background: var(--booster-bg);
	border: var(--booster-border);
	border-radius: 0.5em;
	text-align: left;
	transition: 0.15s;
	max-width: 170em;
	cursor: pointer;
	font-size: 0.9em;
	display: flex;
	align-items: flex-start
}

.booster:hover {
	background: var(--booster-bg-h);
}

.booster:active {
	transform: scale(0.9);
}

.booster img {
	width: 8.9em;
	padding: 0 0.5em;
}

.booster-title {
	font-size: 1.4em;
}

.achievement {
	padding: 0.2em 0.625em;
	margin-left: 0.625em;
	max-width: 94%;
	max-height: 100%;
	pointer-events: none;
	cursor: auto !important;
	display: inline-block;
	filter: drop-shadow(0.2em 0.07em 0.5em #1f1f1f);
}

.prompt {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: inherit;
	padding: 0 1em 0 0.5em;
	filter: drop-shadow(0.3em 0.4em 1.2em #1f1f1f);
}

.ui {
	background: var(--theme-ui-bg);
	border: 5px solid transparent;
	border-image: url("/sprites/border.png") 30 stretch;
	border-radius: 0.5em;
}

.ui.button {
	background: var(--theme-button-color);
	border: 2px solid transparent;
	border-image: url("/sprites/border.png") 30 stretch;
	margin: 0.4em 0 0.2em;
	border-radius: 0.3em;
	cursor: pointer;
	text-shadow: var(--theme-ui-text-shadow);
	transition: 0.1s;
}

.ui.button:hover {
	background: var(--theme-button-hover);
}

.button {
	padding: 0.2em 0.625em;
	max-height: 100%;
	display: inline-block;
}

.enough-money {
	color: var(--theme-good-color);
}

.not-enough-money {
	color: var(--theme-bad-color);
}

.cantbuy {
	opacity: 0.9;
	transform: scale(0.99);
	pointer-events: none;
}

.main-clicker {
	filter: drop-shadow(0 0 0.95em #5f4f3e);
	transition: 0.3s cubic-bezier(.6,-1.47,0,1.77);
	display: block;
	margin: 3.2em auto;
	width: 16.4em;
	cursor: pointer;
}

.link {
	pointer-events: all;
	color: var(--theme-good-color);
}

#achievements {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 6.25em;
	padding: 0 0.95em 0.3em;
	overflow: visible;
	width: 1000%;
}