html {
	position: relative;
	min-height: 100%;
}

body {
	margin: 32px;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
	color: #585858;
}

h1 {
	font-size: 48px;
	margin: 0px;
}

h4 {
	font-size: 14px;
	color: silver;
	margin: 0px;
}

ol {
	font-size: 24px;
	white-space: nowrap;
}

li {
	margin-bottom: 32px;
}

#cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

#cta-btn {
	color: white;
	font-weight: bold;
	font-size: 16px;
	padding: 16px 32px;
	background-color: rgb(29, 148, 218);
	border: none;
	border-radius: 32px;
	cursor: pointer;
}

#cta-tagline {
	margin: 0px;
}

#bottom {
	height: 16px;
}

#activate-form {
	display: flex;
	flex-direction: column;
	min-width: 410px;
	font-size: 18px;
	font-weight: bold;
}

#activate-form label {
	margin-bottom: 4px;
}

#activate-form input {
	padding: 8px;
	text-align: center;
	font-size: 18px;
	margin-bottom: 16px;
	border: 2px solid silver;
	border-radius: 24px;
}

#activate-form #activate {
	border: none;
	background-color: rgb(29, 148, 218);
	color: white;
	cursor: pointer;
}

#feedback {
	color: rgb(255, 75, 43);
	text-align: center;
	font-weight: normal;
	font-style: italic;
	font-size: 14px;
}

#loading {
	display: none;
	color: #585858;
	fill: silver
}

#loading svg {
	animation: spin 3s infinite linear;
}

#activated {
	display: none;
	text-align: center;
	color: #585858;
	fill: rgb(24, 199, 77);
}

#activated > h3 {
	color: silver;
	font-size: 16px;
}

#activated > svg {
	width: 128px;
}

#header {
	display: flex;
	align-items: center;
}

#header > h1 {
	color: #585858;
	font-size: 24px;
	letter-spacing: 0.1ch;
	margin-right: auto;
}

#header > img {
	margin-right: 8px;
}

#header h1 a {
	color: #585858;
	text-decoration: none;
}

#tagline {
	color: rgb(53, 185, 167);
}

#tagline > span {
	color: rgb(29, 148, 218);
}

#codeline {
	font-size: 16px;
	background-color: rgb(219, 219, 219);
	padding: 16px;
}

#content {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	margin-top: 128px;
	max-width: 800px;
}

#content > * {
	margin-bottom: 48px;
}

#content > img {
	border-radius: 64px;
}

#links {
	text-align: center;
}

#links > a {
	margin-left: 8px;
	margin-right: 8px;
}

#links > div {
	margin-top: 16px;
}

#quickstart {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 28px;
}

#footer {
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: 32px;
	left: 32px;
	right: 32px;
	font-weight: normal;
	color: silver;
}

#footerog {
	position: absolute;
	bottom: 32px;
	font-weight: normal;
	color: silver;
}

#slider {
	width: 980px;
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
}

#pinning {
	text-align: center;
}

#slides {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	box-sizing: border-box;
	-ms-overflow-style: none;
	scrollbar-width: none; 
}

#slides::-webkit-scrollbar {
	display: none;
}

#slides > * {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 980px;
	height: 486px;
	background: #eee;
	transform-origin: center center;
	transform: scale(1);
	transition: transform 0.5s;
	position: relative;
	scroll-snap-align: start;
	box-sizing: border-box;
}

#breadcrumbs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

#breadcrumbs > div {
	width: 16px;
	height: 16px;
	border-radius: 16px;
	background-color: #DDDDDD;
	cursor: pointer;
}

#breadcrumbs > div.selected {
	background-color: grey;
}

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

@media only screen and (max-width: 767px) {
	#content {
		margin-top: 32px;
	}

	#content > h1 {
		font-size: 36px;
	}
}