:root {

	--global---gap: 15pt;
	--global---padding: 10pt;
	--global---border-radius: 10pt;

	--color---folly: #FD4755;
	--color---background: #FFFFFF;
	--color---shadow: #F4F4F4;
	--color---foreground: #000000;

	--font-size---large: 16pt;
	--font-size---medium: 12pt;
	--font-size---small: 10pt;

}

/**
															M A I N
**/

*:not(code):not(i) {
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

body {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

/**
															C O N T A I N E R
**/

.page---container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--global---gap);
	width: 100%;
	max-width: 350px !important;
	height: 100vh;
}

/**
															S P I N N E R
**/

.com---spinner---container {
	display: flex;
	flex-direction: column;
	justify-items: center;
}

.com---spinner {
	position: relative;
	width: 100%;
	height: 50pt;
	transform: scale(1.35);
	pointer-events: none !important;

}

.com---spinner > img {
	position: absolute;
	top: 0;
	left: calc(50% - 25pt);
	width: 50pt;
	height: 50pt;
	pointer-events: none !important;
}

.com---spinner---inner {
	z-index: 1;
	animation-name: com---spinner---inner-beat;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	pointer-events: none !important;
}

@keyframes com---spinner---inner-beat {
	0% { transform: scale(0.9); }
	20% { transform: scale(0.75); }
	50% { transform: scale(1); }
	80% { transform: scale(0.75); }
	100% { transform: scale(0.9); }
}

.com---spinner---outer {
	z-index: 1;
	animation-name: com---spinner---outer---spin;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	pointer-events: none !important;
}

@keyframes com---spinner---outer---spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/**
															T E X T
**/

.com---text---container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: var(--global---gap);
	margin: var(--global---padding) 0 0 0 !important;
	padding: 0 !important;
}

.com---text---container > h1  {
	font-size: var(--font-size---large);
	text-align: center;
	margin: 0 !important;
	padding: 0 !important;
}

.com---text---container > h4  {
	font-size: var(--font-size---medium);
	text-align: center;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal;
}

.com---text---container > h4 > span {
	font-weight: bold;
}

.com---text---container > code {
	display: block;
	width: 100%;
	background-color: var(--color---shadow);
	padding: var(--global---padding);
	border-radius: var(--global---border-radius);
	font-size: var(--font-size---small);
}

/**
															B U T T O N
**/

.com---button---container {
	display: flex;
	justify-content: center;
	flex-direction: row;
	padding-top: var(--global---padding);
}

.com---button---container > button {
	display: block;
	justify-content: center;
	padding: var(--global---padding) calc(var(--global---padding) * 2);
	font-weight: bold;
	background-color: var(--color---folly);
	color: var(--color---background);
	border-radius: var(--global---border-radius);
	border: none !important;
	cursor: pointer !important;
	transition: 0.15s;
}

.com---button---container > button > span {
	font-size: var(--font-size---small);
}

.com---button---container > button > i {
	font-size: var(--font-size---small);
	margin-right: var(--global---padding);
}

.com---button---container > button:hover {
	opacity: 0.5;
}