:root {
	--lightcolor: lightgray;
	--darkcolor: black;
	--linkcolor: #777;
	--border: 3px solid #333;
	--displayfont: 'archivo', sans-serif;
	--regularfont: 'archivo', sans-serif;
	--radius: 15px;
	--margin: 10px;
}

/************************************ FONTS ************************************************/
@font-face {font-family: 'archivo'; src: url("fonts/archivo-variable.woff2"); font-style: normal; font-display: swap;}
@font-face {font-family: 'archivo'; src: url("fonts/archivo-variableitalic.woff2"); font-style: italic; font-display: swap;}

/************************************ RESET ************************************************/

* {margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none;}

/************************************ BODY ************************************************/

html {font-family: var(--regularfont); font-size: large; line-height: 1.4lh; color: var(--lightcolor); background: var(--darkcolor); position: relative; scroll-behavior: smooth; overflow-x: hidden;}
body {min-height: calc(100vh - 100px); padding: 0 var(--margin) var(--margin); background: url("images/background.gif") no-repeat top center var(--darkcolor); background-size: cover; background-attachment: fixed; overflow-x: hidden;}
a, a img, video, .popup, .cards div {transition: .15s ease-out;}

/************************************ HEADER ************************************************/

header {width: max-content; margin: 0 auto 50px; border: var(--border); border-top: 0; border-radius: 0 0 20px 20px; background: var(--darkcolor); position: relative; user-select: none; z-index: 10;}
header a {display: block; perspective: 200px; padding: 20px;}
header a img {display: block; width: 60px; height: auto; margin: auto; fill: var(--lightcolor); transition: .6s ease-out;}
header a:hover img {transform: rotateY(-180deg);}

/************************************ MENU ************************************************/

@media (min-width: 900px) {
	nav {display: flex; font-size: small; text-transform: uppercase; text-align: center; font-weight: bold; color: var(--lightcolor); user-select: none; line-height: 50px;}
	
	.menu_toggle {display: none;}
	
	.menu_container ul {display: flex; flex-direction: column; gap: 15px; position: fixed; width: 50px; overflow: visible; top: 50%; transform: translateY(-50%); display: flex; justify-content: center;}
	.menu_container li {list-style: none;}
	.menu_container a {display: block; white-space: nowrap; padding: 20px 0; margin: 0; letter-spacing: .5em; writing-mode: vertical-lr; color: var(--lightcolor);}
	.menu_container a:hover:not(.current) {color: white;}
	.menu_container a.current {color: var(--darkcolor); background: var(--lightcolor);}
	.menu_container a.current:hover {background: white;}
	.menu_container span {padding: 0;}
	.menu_container .navigation {left: 0; transform-origin: top left;}
	.menu_container .navigation a {transform: rotate(180deg);}
	.menu_container .language {right: 0; top: 50%; transform-origin: top right;}
}

/************************************ MOBILE MENU ************************************************/

@media (max-width: 900px) {
	nav {display: block; font-family: var(--displayfont); font-size: larger; color: var(--lightcolor);}

	.menu_toggle {position: absolute; top: var(--margin); right: var(--margin); z-index: 200; cursor: pointer; background: none;}
	.menu_toggle img:first-child {display: block;}
	.menu_toggle img:last-child {display: none;}
	.menu_toggle.opened img:first-child {display: none;}
	.menu_toggle.opened img:last-child {display: block;}

	.menu_container {display: none; grid-template-rows: 0fr; margin-bottom: 50px; overflow: hidden;}
	.menu_container.opened {display: grid;}
	.menu_container a {display: block; padding: 20px; border: 3px solid #2D2D2D; border-radius: var(--radius); font-size: 1.5rem; font-weight: bold; text-align: center; color: currentColor; background: var(--darkcolor); overflow: hidden; cursor: pointer;}
	.menu_container a:hover {color: white;}
	.menu_container a.current {color: var(--darkcolor); background: var(--lightcolor);}
	.menu_container a.current:hover {color: var(--darkcolor); background: white;}
	.menu_container .navigation {display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px;}
	.menu_container .language {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
	.menu_container .language a {font-size: 1.25rem;}
}

/************************************ MAIN ************************************************/

main {max-width: 900px; margin: 0 auto;}
main.home {max-width: 1100px;}

aside {max-width: 800px; margin: 80px auto;}

h1 {font-family: var(--displayfont); font-size: 2.0rem; margin-bottom: 30px; line-height: 1.3lh; font-weight: 800; text-wrap: balance; text-transform: uppercase;}
h2 {font-family: var(--displayfont); font-size: 1.8rem; margin-bottom: 30px; line-height: 1.5lh; font-weight: 800; text-wrap: balance;}
h2.block {max-width: 18em; margin-bottom: 0;}
h3 {font-family: var(--displayfont); font-size: 1.5rem; margin-bottom: 20px; line-height: 1.4lh; font-weight: 800;}

h1:only-child, h2:only-child {margin-bottom: 0;}

hgroup {margin-bottom: 50px;}
hgroup h1 {margin-bottom: 10px; font-size: xxx-large; margin: 0 auto 20px; line-height: .85em; text-align: center;}
hgroup p {text-align: center; font-size: larger; line-height: 1.4em;}

.block {padding: 30px; margin: var(--margin) 0; border-radius: var(--radius); color: var(--darkcolor); background: var(--lightcolor); overflow: hidden;}
.block p:not(:last-child) {margin-bottom: 20px;}
.block small {font-size: 10px;}
.block a {color: currentcolor; text-decoration: underline; cursor: pointer;}
.block a:hover {color: var(--linkcolor);}
.block del {text-decoration: line-through;}
.block br {margin-bottom: 20px;}
.block > img:first-child {display: block; width: calc(100% + 60px); margin: -30px 0 30px -30px; height: auto; border: 0; border-radius: 0;}
.block .button {display: block; width: max-content; padding: 0 10px; margin: 15px 0 0 auto; border: 3px solid; border-radius: 15px; text-decoration: none; font-size: smaller; font-weight: bold;}
.block .button:hover {color: white; border-color: var(--darkcolor); background: var(--darkcolor);}

.game_data {display: grid; gap: var(--margin); margin-bottom: 80px;}

.game_image {display: block;}
.game_image img {display: block; width: 100%; height: auto; border: var(--border); border-radius: var(--radius); background: var(--darkcolor) !important;}

.game_credits {align-self: flex-start;}
.game_credits .block:first-child {width: 75%; min-width: min-content; margin-top: 0;}
.game_credits dl {display: grid; grid-template-columns: auto 1fr; gap: 0 20px; font-size: .9rem; line-height: .8lh;}
.game_credits dt {font-weight: bold;}
.game_credits dd br {margin: 0;}
.game_credits a {text-decoration: underline;}
.game_credits img {display: block; height: 26px; margin-top: 30px;}
.game_credits img:hover {opacity: .6;}

.features li {margin-left: 40px; list-style: none; position: relative;}
.features li:before {display: block; width: 20px; height: 15px; content: " "; border-bottom: 2px solid; position: absolute; left: -40px; top: -4px;}

.facts {column-count: 2; gap: var(--margin); margin: 80px 0;}
.facts .block {margin: 0 0 var(--margin);}

.stories {column-count: 1; gap: var(--margin);}
.stories .block {margin: 0 0 var(--margin);}

.minigames {display: grid; grid-template-columns: 1fr 1fr; gap: var(--margin); margin-bottom: 30px;}
.minigames .block {display: grid; grid-template-rows: auto auto 1fr auto; margin: 0;}
.minigames .button {margin-top: 0;}

.centered {max-width: 32em; margin: 100px auto 50px;}
.centered h2 {text-transform: none; font-size: x-large;}
.centered br {display: none;}

.welcome {margin: 80px 0 0;}
.welcome .block:first-of-type {max-width: 20em;}
.welcome br {display: none;}

/************************************ DOWNLOADS ************************************************/

.downloads {margin: 80px 0;}
.downloads h2 {text-align: center;}
.downloads + h2 {text-align: center;}

.files {margin: 20px 0;}
.files li {list-style: none; margin-bottom: 4px;}
.files li a {display: flex; justify-content: space-between; break-inside: avoid; padding: 10px 20px; border-radius: 30px; text-decoration: none; border: 3px solid #0001;}
.files li a:hover {color: currentColor; border-color: currentColor;}
.files li a span {font-family: monospace; font-size: larger; color: #0003;}
.files li a:hover span {color: currentColor;}

.buttons {display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 10px; margin: 50px auto 20px;}
.buttons a {display: flex; flex-direction: row; justify-content: start; align-items: center; text-wrap: balance; gap: 10px; padding: 20px 25px 20px 20px; border-radius: var(--radius); line-height: .8lh; text-decoration: none; color: currentColor; background: white;}
.buttons a:hover {color: white; background: var(--darkcolor);}
.buttons a:hover img {filter: invert(1);}
.buttons a strong {display: block; margin-bottom: 3px; font-size: 1.25rem; font-weight: 800; text-transform: uppercase;}
.buttons a br {display: none;}
.buttons a span {font-size: smaller;}


.versions {display: block; width: max-content; margin: 40px auto 0; text-align: center; text-decoration: none !important; opacity: .33; transition: .15s ease-out; cursor: pointer;}
.versions:hover {opacity: 1;}
.versions + ul {max-height: 0; overflow: hidden; transition: max-height .3s ease-out;}
.versions.opened {opacity: 1;}
.versions.opened + ul {max-height: 999px; transition: max-height .3s ease-in;}

.logos {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; margin: 20px 0 0;}
.logos a {display: block; border-radius: 8px; background: white;}
.logos a:not([href]) {cursor: default; pointer-events: none;}
.logos a img {display: block; width: 100%; height: auto; margin: 0; object-fit: contain; transition: 0s;}
.logos a:hover {background: var(--darkcolor);}
.logos a:hover img {filter: contrast(0) brightness(4);}

/************************************ GAMES ************************************************/

.games {display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--margin); text-align: center;}
.games li {display: block; border: var(--border); border-radius: var(--radius); color: var(--lightcolor); background: var(--darkcolor); transition: transform .15s ease-out; position: relative; overflow: hidden;}
.games li img {display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio: 210/297; background: var(--darkcolor); text-align: center; color: var(--linkcolor); font-size: smaller; line-height: normal;}
.games li:hover {border-color: var(--lightcolor); background: var(--lightcolor); transform: scale(1.05);}
.games li h2 {display: grid; align-items: end; opacity: 0; position: absolute; left: 0; bottom: 0; z-index: 100; width: 100%; height: 100%; padding: 80px 50px 25px; margin: 0; font-size: .9rem; line-height: 1.1em; text-transform: none; text-wrap: balance; background: linear-gradient(transparent 70%, #000E 100%); pointer-events: none; transition: .15s ease-out;}
.games li:hover h2 {opacity: 1; padding-bottom: 15px;}

.games.games_small {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
.games.games_small li {border-radius: 8px;}
.games.games_small h2 {display: none;}

/************************************ VIDEOS AND IMAGES ************************************************/

video {display: block; width: 100%; height: auto; border: var(--border); border-radius: var(--radius); margin: 80px 0; background: var(--darkcolor);}
video:hover {border-color: var(--lightcolor);}
video[poster] {width: 100%; height: 100%; object-fit: cover; background: var(--darkcolor);}
video:fullscreen {padding: 0; border: 0; border-radius: 0; object-fit: contain;}

.fit {display: grid; align-items: center; width: 100%; height: auto; object-fit: contain; border: var(--border); border-radius: var(--radius); text-align: center; font-style: italic; color: var(--linkcolor); background: var(--darkcolor);}

.screenshots {position: relative; margin: 80px 0;}
.screenshots img {max-height: 640px; background: black;}
.screenshots img:not(:first-of-type) {display: none;}
.screenshots button {display: block; position: absolute; top: 50%; z-index: 8; width: 80px; height: 80px; padding: 5px; border-radius: 100px; background: none; cursor: pointer; transition: .15s ease-out;}
.screenshots button img {display: block; width: 60px; height: 60px; margin: auto; border-radius: 100px; padding: 10px; background: var(--lightcolor); transition: .2s ease-out;}
.screenshots button:hover img {width: 65px; height: 65px; padding: 15px; background-color: white;}

.prev {left: 0; transform: translate(-50%, -50%);}
.next {right: 0; transform: translate(50%, -50%);}

.zoom {cursor: zoom-in; transition: .15s ease-out;}
.zoom:hover {border-color: var(--lightcolor);}

.lightbox {display: flex; justify-content: center; align-items: center; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; background: #0008; backdrop-filter: blur(5px); opacity: 0; transition: opacity .15s ease-out; pointer-events: none; cursor: zoom-out;}
.lightbox.opened {pointer-events: inherit; opacity: 1; transition: 0;}
.lightbox img {width: calc(100% - var(--margin) - var(--margin)); border: var(--border); border-radius: var(--radius); object-fit: contain; object-position: center center; transform: scale(.8); transition: transform .15s ease-out;}
.lightbox.opened img {transform: scale(1); border-color: var(--lightcolor); background: var(--lightcolor);}

/************************************ POPUP ************************************************/

.popup {display: none; text-align: center; position: fixed; right: 100px; top: 50%; color: var(--lightcolor); transform: translateY(-50%); z-index: 9999;}
.popup:hover {transform: translateY(-50%) scale(1.1); color: white;}
.popup a {display: grid; align-items: center; width: 220px; height: 220px; position: relative; padding: 30px; z-index: 10; font-family: var(--displayfont); font-weight: bold; font-size: 1.4rem; line-height: .85em; color: currentColor; text-transform: uppercase;}
.popup:hover a {color: white;}
.popup svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: currentColor; animation: popup 30s infinite forwards linear; pointer-events: none;}

@keyframes popup {to {transform: rotate(360deg);}}

/************************************ FOOTER ************************************************/

footer {max-width: max-content; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 80px auto 20px;}
footer a {color: var(--lightcolor); color: currentColor; padding: 6px 20px; border: var(--border); border-radius: 10px; color: var(--linkcolor); background: black;}
footer a:hover {color: var(--lightcolor); border-color: var(--lightcolor);}

/************************************ FOCUS ************************************************/

*:focus-visible,
.games li:has(:focus-visible) {outline: 5px solid lime;}

/************************************ MEDIA QUERIES ************************************************/

@media (min-width: 900px) {
	:root {
		--margin: 20px;
	}
	body {padding: 0 50px 50px; margin: 50px; border: var(--border); overflow-x: visible;}
	header {margin-top: -3px;}
	header a {padding-top: 0;}
	main > .fit {margin: 80px 0;}
	main > .fit:first-of-type {margin-top: 0;}
	hgroup h1 {font-size: 3.5rem;}
	.welcome {display: grid; grid-template-columns: 2fr 3fr; gap: var(--margin); margin: 80px;}
	.welcome .block:first-of-type {max-width: inherit;}
	.regular:nth-child(odd) {margin: 20px 100px 20px 200px;}
	.regular:nth-child(even) {margin: 20px 200px 20px 100px;}
	.files {column-count: 2; gap: 4px; margin: 20px;}
	.facts {margin: 80px 100px;}
	.games {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
	.games.games_small {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
	.game_data {grid-template-columns: 2fr 1fr;}
	.game_credits dl {grid-template-columns: 1fr; gap: 0;}
	.game_credits dd {margin-bottom: 15px;}
	.game_credits img {display: block; height: 26px; margin-top: 1lh;}
	.cards {column-count: 3;}
	.lightbox img {width: auto; height: 90vh;}
	.stories {column-count: 3;}
	.popup {display: block;}
	.buttons {flex-direction: row;}
}
@media not (min-width: 900px) {
	html {font-size: medium; line-height: 1.4;}
	.block {padding: 20px;}
	.prev {left: 8px;}
	.next {right: 8px;}
	.minigames {font-size: smaller; line-height: 1.4em;}
	.minigames .block {padding: 15px; margin-top: 0;}
	.minigames .block h3 {font-size: 1.4em; margin-bottom: var(--margin);}
	.minigames .block img {margin: -15px 0 15px -15px; width: calc(100% + 30px);}
	.stories {column-count: 2; font-size: smaller; line-height: 1.4em;}
	.stories .block {padding: 15px; margin-top: 0;}
	.stories .block img {margin: -15px 0 15px -15px; width: calc(100% + 30px);}
}