/* Display Style */
/* Copyright © 2021 Tibor Buzási. All rights reserved. */

/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); */
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
		url('../fonts/OpenSans-Regular.woff') format('woff'),
		url('../fonts/OpenSans-Regular.ttf')  format('truetype');
	unicode-range: U+0000-024F, U+0259, U+02BB, U+02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2074, U+20A0-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF;
}

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
		url('../fonts/OpenSans-Bold.woff') format('woff'),
		url('../fonts/OpenSans-Bold.ttf')  format('truetype');
	unicode-range: U+0000-024F, U+0259, U+02BB, U+02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2074, U+20A0-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF;
}

html
{
	scroll-behavior: smooth;
}

body
{
	background-color: #0C0C0C;
	color: #AAAAAA;
	font-family: 'Open Sans', Sans-Serif;
	font-size: 16px;
	height: 100%;
	margin: 0 auto;
	text-align: center;
}

p
{
	margin: 1em 0;
}

a
{
	color: #0070CF;
	text-decoration: none;
}

a:hover
{
	color: #0077CC;
}

.cover
{
	background-image: linear-gradient(#CDCDCD, #D0D0D0);
}

.cover.background-image
{
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid #DEDEDE;
	min-height: 5em;
	width: 100%;
}

.cover .content
{
	cursor: pointer;
	display: block;
	padding: 3rem 7rem;
}

.cover .content.logo
{
	height: 4.5em;
	padding: 0;
}

.cover .content.logo img
{
	height: 100%;
	width: auto;
}

.cover .content *
{
	pointer-events: none
}

.cover p.title
{
	margin: 0;
	font-size: 2em;
	letter-spacing: 0.2em;
	text-align: center;
	text-shadow: 0 0 0.2em #000000;
}

.cover .dark
{
	color: #DEDEDE;
}

.cover p.site-title
{
	color: #0070AF;
	font-size: 1.3vw;
	font-variant: small-caps;
	left: 50%;
	letter-spacing: 0.5em;
	padding: 0.35em;
	position: absolute;
	max-width: 90%;
	text-shadow: 0 0 0.15em #0070AF;
	top: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}

.cover p.site-title img
{
	max-height: 100vh;
	max-width: 90vw;
}

.cover .scroll-to-content
{
	font-size: 2em;
	left: 50%;
	position: absolute;
	text-align: center;
	top: 90%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}

.loading
{
	animation-name: loading;
	animation-delay: 1s;
	animation-direction: alternate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	opacity: 0;
}

@keyframes loading
{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

footer
{
	color: #AAAAAA;
	font-size: 0.9em;
	text-align: center;
}

footer p
{
	color: #AAAAAA;
}

footer a
{
	color: #0070CF;
	text-decoration: none;
}

footer a:hover
{
	color: #0077CC;
	text-decoration: none;
}

header
{
	background-image: linear-gradient(#212121, #121212);
	box-shadow: 0 0.5em 0.5em -0.25em rgba(0, 0, 0, 0.1);
	font-size: 1.1em;
	font-variant: small-caps;
	/* grid-area: 1/1/1/8; */
	height: 2.6em;
	line-height: 2.6em;
	padding: 0em 3em;
	position: -webkit-sticky;
	position: sticky;
	text-align: left;
	top: 0;
	z-index: 100;
}

header span
{
	margin: 0;
	padding: 1em 0;
}

header span.logo img
{
	max-height: 100%;
	max-width: 100%;
}

nav
{
	float: right;
	font-variant: small-caps;
	height: 2.6em;
	line-height: 2.6em;
	text-align: center;
}

nav ul
{
	line-height: 2.6em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav ul li
{
	display: inline;
	margin-left: 0.20em;
}

nav ul li.mobile {
	display: none;
}

nav ul li a
{
	color: #0070CF;
	padding: 0.6em 1em;
}

nav ul li .selected
{
	background-color: #003366;
	color: #EDE0E0;
}

nav ul li a:hover
{
	background-image: linear-gradient(#0070CF, #0077CC);
	color: #EDE0E0;
	transition: 0.25s;
}

main
{
	background-color: #DEDEDE;
	color: #222222;
	text-align: left;
}

main p, main li
{
	font-size: 1.2em;
	text-align: justify;
}

main a
{
	color: #0060AF;
}

main a:hover
{
	color: #0077CC;
}

main a:visited
{
	color: #0060AF;
}

main .banner
{
	width: 100%;
}

main hr
{
	color: #DDDDDD;
}

table, td, th
{
	border: 1px solid #AAAAAA;
	border-collapse: collapse;
	padding: 0.5em;
}

table
{
	width: 100%;
}

thead, tr:nth-child(even)
{
	background-color: rgba(0, 0, 0, 0.1);
}

.note
{
	color: #545454;
	font-size: 1em;
	padding-bottom: 1em;
}

.note .icon
{
	height: 24px;
	padding-right: 0.5em;
	vertical-align: text-bottom;
	width: 24px;
}

.note *
{
	display: inline-block;
}

h2
{
	color: #121212;
	font-size: 2em;
	font-weight: bold;
	line-height: 2em;
	padding: 0.2em 0;
}

h2 .icon
{
	padding-right: 0.7em;
	vertical-align: middle;
}

h3
{
	color: #121212;
	font-size: 1.5em;
	font-weight: bold;
	padding: 0.5em 0 0.1em;
}

section
{
	padding: 0.5em 7em 1em;
}

article > *
{
	display: block;
	opacity: 1;
}

section.details
{
	display: none;
}

section.details.show
{
	animation: fade-in 1s;
	display: block;
}

section .actions a
{
	background-image: linear-gradient(#002346, #003366);
	color: #DDDDED;
	display:inline;
	font-size: 1.2em;
	font-variant: small-caps;
	font-weight: bold;
	line-height: 2.5em;
	margin: 3em 0;
	padding: 0.25em 1em;
	text-align: center;
}

section .actions a:hover
{
	background-image: linear-gradient(#DEDEDE, #ABABAB);
	color: #222222;
	transition: all 0.25s;
}

.screenshots
{
	display: grid;
	grid-gap: 0.5em;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}

.screenshots img
{
	width: 100%;
}

@keyframes fade-in
{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media only screen and (max-width: 768px)
{
	body
	{
		margin: 0;
		padding: 0;
	}

	.container
	{
		margin: 0;
		padding: 0;
		width: 100vw;
	}

	header
	{
		padding: 1vw 0 1vw;
	}

	.cover p.site-title
	{
		font-size: 3vw;
		width: 100%;
	}

	.cover.background-image
	{
		background-attachment: scroll;
	}

	.cover .content
	{
		padding: 7vw;
	}

	.cover .content.logo
	{
		line-height: 1rem;
		margin: 0 auto;
		padding: 0;
		width: 90%;
	}

	.cover .content.logo img
	{
		max-width: 100%;
		object-fit: contain;
		width: auto;
	}

	table thead
	{
		display: none;
	}

	table td
	{
		display: block;
        text-align: right;
	}

	table td::before
	{
		content: attr(data-label);
		font-weight: bold;
		float: left;
	}
        
	section
	{
		padding: 0.5em 7vw 1em;
	}

	section .actions a
	{
		display: block;
		margin: 1em 0;
        padding: 0 1em;
	}

	nav ul
	{
		text-align: right;
	}

	nav ul li:not(.mobile)
	{
		display: none;
	}

	nav ul li.mobile
	{
        cursor: pointer;
		display: inline;
	}

	nav ul.show li:not(.mobile)
	{
		animation: fade-in 1s;
		background-color: #DEDEDE;
		display: block;
		line-height: 1.6em;
	}

	nav ul li:not(.mobile) a
	{
		display: block;
	}
	
	.screenshots
	{
		grid-template-columns: 1fr;
	}
}