:root {
	--black: #002626;
	--purple: #421F3F;
	/* --white: #F4F9E9; */
	--white: #e0ccab;
	--green: #667a40;
	--lightblue: #8a99a4;
}

@font-face {
	font-family: Figtree;
	src: url(fonts/Figtree-VariableFont_wght.ttf);
	font-weight: 100 1000;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes scrollX {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-2304px);
	}
}

@keyframes zoomXY {
	0% {
		scale: 1.0;
	}

	50% {
		scale: 1.2;
	}

	100% {
		scale: 1.0;
	}
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--black);
	color: var(--black);

	font-size: 2vh;
	font-family: Figtree;
}

a {
	color: var(--black)
}

.page {
	min-height: 100vh;
}

.screen {
	position: relative;
	background-color: var(--white);

	padding: 2dvh;
	margin-bottom: 2em;
	height: 96dvh;
}

.screen:last-child {
	margin-bottom: 0;
}

.screen>.footer {
	position: absolute;
	bottom: 2vh;

	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: calc(100dvw - 4dvh);
	max-width: calc(100dvw - 4dvh);

	animation: fadeIn 1s;
}

.footer img {
	object-fit: contain;
	object-position: 0%;
}

@media (orientation: portrait) {
	.footer img {
		height: 4em;
	}
}

/* SCREEN 1 */

.landing-bg {
	position: absolute;
	top: 0;
	width: 100dvw;
	height: 100dvh;

	background-image: url(assets/page-background2.png);
	background-position: center;
	background-size: cover;
	background-color: transparent;

	/* animation: zoomXY 30s linear infinite; */
}

.landing {
	/* background-image: url(assets/page-background2.png);
	background-position: center;
	background-size: cover; */
	background-color: transparent;
}

.description {
	font-size: 28pt;
	max-width: 23em;

	font-weight: bold;

	animation: fadeIn 1s;
}

.logo {
	width: 12em;
}

.links {
	display: flex;
	justify-content: space-between;
}

.links img {
	height: 16px;
}

.links>a {
	margin-left: 1em;
}

/* SCREEN 2 */

.games {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-evenly;
	/* align-content: space-evenly; */

	background-color: var(--white);

	/* height: calc(96vh * 3); */
	height: inherit;
}

.line {
	height: 3px;
	width: 100%;
	max-width: 50em;

	background-color: var(--black);
}

.game {
	background-color: var(--white);

	font-size: 16pt;
	margin: 1em;
	max-width: 30em;

	position: relative;
	display: flex;
}

.game h1 {
	font-size: 32pt;
	/* text-align: right; */
}

.game h2 {
	font-size: 16pt;
	font-weight: 300;
	opacity: 0.5;
	margin-bottom: 1em;
	/* text-align: right; */
}

.game p {
	font-weight: 350;
	font-size: 14pt;
	/* text-align: justify; */
}

.game .img-wrap {
	/* width: 100%; */
	/* height: 19em; */
	height: 10em;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--black);
}

.game img {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	/* width: 100%; */
	height: 100%;
	object-fit: contain;
}

.game .content {
	padding: 0.5em;
}

.game .footer {
	position: absolute;
	bottom: 0.5em;

	text-align: center;
	width: 100%;
}

/* SCREEN 3 */

.imprint {
	opacity: 0.4;
}