@font-face {
	font-family: "Display Font";
	src: url("/fonts/Gilroy/Gilroy-Light.otf");
}

body {
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	background-color: rgb(240,240,240);
	color: rgb(50,50,50);
}

h1,h2,h3 {
	color: rgb(4, 129, 210);
	font-weight: 300;
	font-family: "Display Font";
}

h1 {
	margin-top: 3rem;
	font-size: 2.5rem;
}

h2 {
	margin-top: 1rem;
	font-size: 1.8rem;
}

h3 {
	margin-top: 0.5rem;
	font-size: 1.5rem;
}

a {
	text-decoration: none;
	color: rgb(4, 129, 210);
}

a:hover {
	text-decoration: none;
}

hr {
	margin: 2rem 0rem 1rem 0rem;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 1px solid rgb(200,200,200);	
}

.clear {
	clear: both;
}

p.thank-you {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.9rem;
	background-color: rgb(250, 230, 230);
	padding: 0.3rem;
	border: 2px solid rgb(198, 32, 32);
	border-radius: 0.5rem;

}
/*span.heart {
	font-size: 2rem;
}
*/

p.header-claim {
	font-size: 1.3rem;
}

p.header-text {
	max-width: 70%;
	text-align: left;
	margin: auto;
	margin-bottom: 0.4rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

img.logo {
	max-width: 10rem;
}
/*
f - fade time
p - presentation time
n - number of pictures
t - animation duration = (f+p)*n

*/
@keyframes screenshot_fade {
	/*
	f = 1s
	p = 3s
	n = 7
	t = 24
	*/
	0% { opacity: 1; }    /* 0% */
	11% { opacity: 1; }   /* p / t % */
	14% { opacity: 0; }   /* ( p + f ) / t % */
	97% { opacity: 0; }   /* 100 - f / t % */
	100% { opacity: 1; }  /* 100% */
}

div.screenshots {
	position: relative;
	width: 800px;
	max-width: 800px;
	height: 600px;
	margin: auto;
	border-radius: 0.5rem;
	border: 1px solid rgb(200,200,200);
	box-shadow: 0rem 0.5rem 2rem rgba(10,10,10,0.2);
}

div.screenshots img:nth-of-type(1) { animation-delay: 24s; }
div.screenshots img:nth-of-type(2) { animation-delay: 20s; }
div.screenshots img:nth-of-type(3) { animation-delay: 16s; }
div.screenshots img:nth-of-type(4) { animation-delay: 12s; }
div.screenshots img:nth-of-type(5) { animation-delay: 8s; }
div.screenshots img:nth-of-type(6) { animation-delay: 4s; }
div.screenshots img:nth-of-type(7) { animation-delay: 0s; }


img.screenshot {
	position: absolute;
	left: 0;
	width: 100%;
	border-radius: 0.5rem;
	animation-name: screenshot_fade;
	animation-duration: 28s;
	animation-iteration-count: infinite;
}

div.navigation {
	padding: 1rem;
}

div.navigation .menu {
	background-color: #fff;
	margin-top: 0.5rem;
	padding: 0.5rem;
	text-align: left;
	box-shadow: 0rem 0.3rem 0.5rem rgba(10,10,10,0.2);
	border-radius: 1rem;
}

div.navigation:hover .menu,
div.navigation:active .menu,
div.navigation:focus .menu {
	display: block;
}

div.navigation a {
	font-size: 1.2rem;
	margin: 0.5rem 1rem;
	font-family: 'Display Font';
}
div.navigation a.current-page {
	border-bottom: 2px solid rgb(4, 129, 210);
}

div.feature {
	margin: 3rem 0.2rem 1rem 0.2rem;
}

div.feature img {
	margin: 0.5rem 0rem 0rem 1rem;
	display: inline-block;
	max-width: 400px;
	border-radius: 0.5rem;
	border: 1px solid rgb(200,200,200);
	box-shadow: 0rem 0.2rem 0.5rem rgba(10,10,10,0.1);
}

div.feature-item {
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 350px;
}

div.plugin-item {
	margin: 3rem auto;
}

span.plugin-version {
	font-size: 1.2rem;
}
span.plugin-host-version {
	display: block;
	font-size: 0.9rem;
}

div.sponsor {
	margin-top: 1em;
}

div.sponsor-details a::before {
	content: "|"
}

div.sponsor-details a:first-child::before {
	content: ""
}

.button-description {
	padding: 0.5rem;
	font-size: 0.8rem;
}

.button {
	display: inline-block;
	text-decoration: none;
	border-radius: 0.4rem;
	padding: 0.3rem 1rem;
	border: 2px solid rgb(4, 129, 210);

	/* transition */
	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}

.button-large {
	padding: 0.8rem 1.5rem 0.8rem 1.5rem;
	border-width: 3px;
	font-size: 1.5rem;
	font-family: 'Display Font';
}

.button:hover {
	background: rgb(4, 129, 210);
	color: rgb(240,240,240);
}

a.button {
	text-decoration: none;
}

footer {
	font-size: 0.8rem;
	color: rgb(180,180,180);
	padding: 0 10vw;
	margin: auto;
	max-width: 50vw;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-content: center;
}

p#copyright{
	grid-column: 1 / -1;
}

@media (max-width: 840px) {
	div.screenshots {
		width: 90vw;
		max-height: calc(0.75 * 90vw);
	}

	div.feature img {
		max-width: 90vw;
		width: 90vw;
		margin: 0;
	}
	
	div.feature-item {
		width: 90vw;
		max-width: 90vw;
	}

}