:root {
	--A: #A82721;
	--V: #254264;
	--F: #E07EA8;
	--B: #733280;
	--Ø: #E6801A;
	--C: #96B226;
	--Æ: #7896D2;
	--O: #EAC73E;
	--D: #127B7F;
	--I: #3FB2BE;
	--Å: #2B8738;
	--Q: #5ABE82;
	--M: #B48CD2;
	--K: #8B8474;
	--G: #BEAA64;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: #f7f7f7;
	font-family: 'Poppins', 'Arial', sans-serif;
	font-weight: 400;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	color: rgba(0, 0, 0, 0.72);
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1, h2, h3 {
	font-weight: 400;
	margin: 0 0 16px 0;
}

b {
	font-weight: 500;
}

h1 {
	font-size: 20px;
	margin-top: 32px;
	margin-bottom: 8px;
	font-weight: 500;
	text-transform: uppercase;
}

h2 {
	font-size: 32px;
	margin-bottom: 24px;
	padding: 0 8px 0 8px;
	text-align: center;
	min-height: 96px;
	white-space: pre-wrap;
}

small {
	margin-top: 64px;
	color: #CCC;
	display: flex;
	white-space: pre-wrap;
	align-items: center;
}

small a {
	display: inline-flex;
	text-decoration: none;
	color: #CCC;
	font-weight: 500;
}

@media only screen and (max-width: 500px) {
	h1 {
		font-size: 16px;
	}
	h2 {
		font-size: 24px;
		min-height: 70px;
	}
}

/* shadows */
/*.shadow1dp { box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }
.shadow2dp { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.shadow4dp { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
.shadow6dp { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); }
.shadow8dp { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); }
.shadow16dp { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }
.shadow24dp { box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); }*/

/* shadows */
.shadow1dp { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) }
/* .shadow2dp { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } */
.shadow2dp { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
.shadow4dp { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.shadow6dp { box-shadow: 0 6px 17px rgba(0, 0, 0, 0.08); }
.shadow8dp { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.shadow10dp { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.shadow16dp { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1); }
.shadow24dp { box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.1); }

.colorA { color: var(--A); }
.colorV { color: var(--V); }
.colorF { color: var(--F); }
.colorB { color: var(--B); }
.colorØ { color: var(--Ø); }
.colorC { color: var(--C); }
.colorÆ { color: var(--Æ); }
.colorO { color: var(--O); }
.colorD { color: var(--D); }
.colorI { color: var(--I); }
.colorÅ { color: var(--Å); }
.colorQ { color: var(--Q); }
.colorM { color: var(--M); }
.colorK { color: var(--K); }
.colorG { color: var(--G); }

@keyframes changeColor {
	0% 	{ background-color: var(--A); }
	6%	{ background-color: var(--V); }
	12% { background-color: var(--F); }
	18% { background-color: var(--B); }
	24% { background-color: var(--Ø); }
	30% { background-color: var(--C); }
	36% { background-color: var(--Æ); }
	42% { background-color: var(--O); }
	48% { background-color: var(--D); }
	54% { background-color: var(--I); }
	60% { background-color: var(--Å); }
	66% { background-color: var(--Q); }
	72% { background-color: var(--M); }
	78% { background-color: var(--K); }
	86% { background-color: var(--G); }
	100% { background-color: var(--A); }
}

@keyframes pinTick {
	0% { transform: rotateZ(0deg); }
	50% { transform: rotateZ(-45deg); }
	100% { transform: rotateZ(0deg); }
}

.outerWheel {
	border-radius: 50%;
	width: 500px;
	height: 500px;
	border: 16px solid #FFF;
	position: relative;
	background-color: #FFF;
	display: flex;
	flex-direction: column;
}

.outerWheel .wheelPin {
	position: absolute;
	top: -20px;
	font-size: 32px;
	left: calc(50% - 16px);
	color: #FFF;
	pointer-events: none;
	text-shadow: 0px 0px 1px  #666;
	transform-origin: center;
	transition: 0.1s ease;
	transform: rotateZ(0deg);
}

.outerWheel .wheelPin.animate {
	transform: rotateZ(-45deg);
	/* animation: pinTick;
	animation-duration: 0.2s; */
}

.outerWheel button {
	position: absolute;
	width: 80px;
	height: 80px;
	top: calc(50%);
	left: calc(50%);
	transform: translateX(-50%) translateY(-50%);
	border-radius: 50%;
	cursor: pointer;
	background: #FFF;
	color: #FFF;
	font-weight: 600;
	word-break: break-word;
	padding: 8px;
	border: none;
	transition: 0.2s ease;
	max-width: calc(100vw - 260px);
	max-height: calc(100vw - 260px);
	min-width: 80px;
	min-height: 80px;

	animation: changeColor ease;
	animation-iteration-count: infinite;
	animation-duration: 30s;
	animation-fill-mode: both;
}

.outerWheel button:hover {
	/* background-color: #f5f5f5; */
	box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.githubLogo {
	filter: invert(0.2);
}