@keyframes animatedBackground {
	from {background-position: 0 0;}
	/* Use negative width if you want it to flow right to left else and positive for left to right. */
	to {background-position: -487px 0;}
}

#landing {
	background-color: white;
	background-image:
		radial-gradient(
			at center 200px,
			rgba(127, 216, 255, 0.2) 11.2%,
			rgba(123, 183, 253, 1) 100%
		),
		radial-gradient(
			at center 320px,
			rgba(127, 216, 255, 0.1) 11.2%,
			rgba(123, 183, 253, 1) 100%
		);
	background-position: center top;
	background-size: cover;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0px;
	text-align: center;
}

#app_icon {
	border: 0px;
	margin: 0;
	margin-top: 48px;
	padding: 0;
}

#app_title {
	background-attachment: scroll;
	background-clip: text;
	background-image: linear-gradient(
		120deg,
		rgb(255,   0,   0) 14%,
		rgb(255, 145,   0) 29%,
		rgb(255, 255,   0) 43.5%,
		rgb( 25, 208,  16) 57%,
		rgb( 43, 138, 252) 71%,
		rgb(157,  85, 244) 85%,
		rgb(229,  61, 244) 100%
	);
	background-origin: padding-box;
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-size: auto;
	color: rgba(0, 0, 0, 0);
	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.6));
	font-size: 96px;
	font-weight: 700;
	text-align: center;
	/*text-rendering: optimizespeed;*/
	width: fit-content;
	-webkit-background-clip: text; /* Chromium / Chrome */
	-webkit-text-stroke: 1px rgba(0, 0, 0, 0.125);
}

#app_subtitle {
	box-sizing: border-box;
	color: rgba(16, 127, 255, 0.5);
	font-size: 54px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 74.8833px;
	text-align: center;
	-webkit-text-stroke: 1px rgba(0, 0, 0, 0.025);
}

#buy {	align-items: center;
	background-color: rgb(16, 127, 255);
	border: 1px rgba(0, 0, 0, 0.075) solid;
	border-radius: 1em;
	color: white;
	cursor: pointer;
	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.6));
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin: auto;
	margin-bottom: 1.5em;
	margin-top: 1em;
	padding: 0.15em 1.2em 0.35em 1.2em;

	a {	color: white;
	}
}

#motto {background-color: rgba(32, 64, 185, 0.1);
	border-bottom: 1px rgba(0, 0, 0, 0.075) solid;
	border-top: 1px rgba(0, 0, 0, 0.075) solid;
	box-sizing: border-box;
	color: rgba(16, 96, 191, 0.9);
	font-size: 18px;
	font-weight: 400;
	padding: 0px;
	padding-bottom: 16px;
	padding-top: 16px;
}

#desktop {
	display: flex;
	flex: 1;
	justify-content: center;
	position: relative;
	border-bottom: 1px rgba(0, 0, 0, 0.075) solid;
}

#icons {animation: animatedBackground 29s linear infinite;
	background: url('../images/tutti-frutti-folders.png') repeat top center / 487px 336px;
	min-height: 580px;
	width: 100%;
	/*-webkit-mask-image: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));*/
	/*-webkit-mask-image: -webkit-gradient(radial, center top, 260, center top, 580, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));*/
	mask-image: -webkit-gradient(radial, center top, 260, center top, 580, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
	mask-image: -moz-radial-gradient(center top, circle, rgba(0, 0, 0, 1) 260px, rgba(0, 0, 0, 0) 580px);
	-webkit-mask-image: -webkit-gradient(radial, center top, 260, center top, 580, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

#app_window {
	position: absolute;
	top: 16px;
}

#history {
	background-color: #CCDFEF;
	box-sizing: border-box;
	color: rgba(0, 32, 140, 0.75);
	flex: 1;
	font-size: 16px;
	line-height: 1.4em;
	padding: 0px;
	padding-bottom: 32px;
	padding-top: 8px;

	a {	color: rgba(24, 127, 255, 1);
		font-weight: 500;
	}

	a:hover {
		text-decoration: underline;
	}

	div {	margin: 40px auto 40px auto !important;
		max-width: 720px;
		text-align: left;
	}

	h1 {	color: rgba(16, 96, 191, 0.9);
		filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
		font-size: 2em;
		font-weight: normal;
  		line-height: 1.2em;
		margin: 0;
		text-align: center;
	}

	h2 {	border-bottom-style: solid;
		border-bottom-width: 2px;
		border-image: linear-gradient(
			90deg,
			rgba(255,   0,   0, 1) 14%,
			rgba(255, 145,   0, 1) 29%,
			rgba(255, 255,   0, 1) 43.5%,
			rgba( 25, 208,  16, 1) 57%,
			rgba( 43, 138, 252, 1) 71%,
			rgba(157,  85, 244, 1) 85%,
			rgba(229,  61, 244, 1) 100%
		) 1;
		color: rgba(16, 96, 191, 0.9);
		filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.075));
		font-size: 1.4em;
		font-weight: normal;
		margin: 20px 0 0 0;
		padding-bottom: 4px;

		small {	float: right;
			font-size: 14px;
			margin-top: 6px;
		}
	}

	h3 {	font-size: 100%;
		margin: 10px 0 0 20px;
	}

	ul {	margin: 10px 20px 10px 20px;
		padding: 0;
	}

	li {	margin: 0;
		margin-left: 20px;
	}

	p {	margin: 10px 0 0 20px;
	}
}

footer {background-color: white;
	background-image:
		radial-gradient(
			at center 0%,
			rgba(127, 216, 255, 0.2) 11.2%,
			rgba(123, 183, 253, 1) 100%
		),
		radial-gradient(
			at center -200%,
			rgba(127, 216, 255, 0.2) 11.2%,
			rgba(123, 183, 253, 1) 100%
		);
	border-top: 1px rgba(255, 255, 255, 0.25) solid;
	color: rgba(16, 96, 191, 0.45);
	font-size: 12px;
	font-weight: 400;
	padding-bottom: 24px;
	padding-top: 24px;
	text-align: center;

	a {	color: rgba(16, 96, 191, 0.45);
		text-decoration: underline;
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

	a:hover {
		color: rgba(16, 96, 191, 0.9);
		-webkit-transition: all 300ms ease;
		-moz-transition: all 300ms ease;
		-o-transition: all 300ms ease;
		transition: all 300ms ease;
	}

	p {	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1));
	}
}

@media (min-resolution: 2dppx) {
	#app_title {
		-webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.125);
	}

	#app_subtitle {
		-webkit-text-stroke: 1px rgba(0, 0, 0, 0.025);
	}

	#buy {	border: 0.5px rgba(0, 0, 0, 0.075) solid;
	}	
}

@media (prefers-color-scheme: dark) {
	#landing {
		background-image: radial-gradient(
			at center 200px,
			#45015B 11.2%,
			rgb(9, 20, 43) 100%
		);
	}

	#app_subtitle {
		color: white;
		filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.6));
	}

	#buy {	background-color: rgba(0, 100, 255, 1.0);
		border: 1px rgba(0, 127, 255, 0.15) solid;
		filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.6));
	}

	#motto {background-color: rgba(127, 45, 255, 0.1);
		border-bottom: 1px rgba(255, 255, 255, 0.15) solid;
		border-top: 1px rgba(255, 255, 255, 0.15) solid;
		color: rgba(209, 141, 253, 0.81);
	}

	#desktop {
		border-bottom: 1px rgba(0, 0, 0, 0.25) solid;
	}

	#history {
		background-color: #37075C;
		color: white;

		a {	color: rgba(143, 255, 255, 1);
		}

		h1, h2 {color: rgba(209, 141, 253, 0.81);
		}

		h1 {	filter: drop-shadow(0px 2px 2px black);
		}

		h2 {	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.81));
		}
	}

	footer {background-image: radial-gradient(
			at center -200%,
			#45015B 11.2%,
			rgb(9, 20, 43) 100%
		);
		border-top: 1px rgba(0, 0, 0, 0.25) solid;
		color: rgba(209, 141, 253, 0.25);

		a {	color: rgba(209, 141, 253, 0.25);
		}

 		a:hover {
			color: rgba(209, 141, 253, 1);
		}
	}
}