/* generic */

:root {
	--primary: #EEE2DE;
	--secondary: #EA906C;
	--tertiary: #B31312;
	--quaternary: #2B2A4C;
	--quaternary-fade: rgba(43, 42, 76, 0.4);
	--max-width: 400px;
}

/* dark theme from meta tag, switches all instances of primary color with quaternary and vice versa, and secondary with tertiary and vice versa */
@media (prefers-color-scheme: dark) {
	:root {
		--primary: #2B2A4C;
		--secondary: #B31312;
		--tertiary: #EA906C;
		--quaternary: #EEE2DE;
		--quaternary-fade: rgba(238, 226, 222, 0.4);
	}
}

::-webkit-scrollbar {
  width: 10px;
	/* display: none; */
}
::-webkit-scrollbar-track {
	background: var(--secondary);
	/* rounded corners */
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background: var(--tertiary);
	border-radius: 10px;
}
::-webkit-scrollbar-corner {
	background: var(--secondary);
}
/* the same scrollbar stuff but for firefox */
* {
	scrollbar-color: var(--tertiary) var(--secondary);
	scrollbar-width: thin;
}

body {
	margin: 0;
	padding: 0;
}
html{
	overscroll-behavior: none;
}

.textShow {
	color: var(--quaternary);
}
.text3d {
	text-shadow: 4px 4px 0px var(--quaternary-fade);
}

#main_cont {
	/* cover whole page */
	position: relative;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	/* 100% of page height unless its contents are larger than the page */
	min-height: 100vh;
	/* gradient background from bottom right to top left covering whole page */
	background: var(--primary);
	background: linear-gradient(320deg, var(--secondary) 0%, var(--primary) 55%);
	font-family: sans-serif;
	margin: 0;
}

#centered_cont {
	/* TODO decide if this looks good */
	max-width: var(--max-width);
	background-color: transparent;
	/* box-shadow: 10px 0 5px 5px var(--quaternary-fade),
							-10px 0 5px 5px var(--quaternary-fade),
              inset 10px 0 5px -5px var(--quaternary-fade),
              inset -10px 0 5px -5px var(--quaternary-fade); */
	margin: 0 auto;
	overflow: hidden;
	width: min(400px, calc(100vw - 12vw));
	padding: 0 6vw;
	/* min-height: calc(2em + 42px + 20px + 100vh); */
}
#buttonUnderScroll {
	height: calc(2em + 42px + 20px);
}
.blankSpaceSep {
	height: 50px;
}

#installContainer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	text-align: center;
	background-color: transparent;
	opacity: 1;
}
#installBg {
	background-color: var(--quaternary);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* 40% opacity */
	opacity: 0.2;

	box-shadow: 0px -6px 7px var(--quaternary);

}
#installButton {
	/* gradient from primary to secondary angle 320deg */
	background: var(--primary);
	background: linear-gradient(320deg, var(--secondary) -20%, var(--primary) 100%);

	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	border: none;
	border-radius: 4px;
	opacity: 1;
	/* appear on top of the installBg */
	position: relative;
	z-index: 1;

	box-shadow: 4px 4px 20px var(--quaternary);

	/* text title case */
	text-transform: capitalize;
}