:root {
	--maincolor: lightgray;
	--backgroundcolor: black;
	--linkcolor: #10e07e;
	--linkhovercolor: #1bb598;
	--border: 3.5px solid #444;
	--displayfont: 'clashdisplay', sans-serif;
	--regularfont: 'archivo', sans-serif;
	--radius: 15px;
	--radiusbig: 30px;
}




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




/************************* RESET *************************/
* {margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; text-decoration: none;}
a, a img, video, .cards div {transition: .1s ease-out;}




/************************* BODY *************************/
html {background: black; position: relative;}
html {scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--maincolor) transparent;}
html {font-family: var(--regularfont); font-size: 20px; letter-spacing: .02em; line-height: 1.5rem; color: var(--maincolor);}
html::-webkit-scrollbar {width: 8px; background: var(--backgroundcolor);}
html::-webkit-scrollbar-thumb {background: var(--maincolor); border-radius: 0; border: 0;}

body {min-height: calc(100vh - 100px); padding: 50px; margin: 50px; border: var(--border); background: url("images/background.gif") no-repeat top center var(--backgroundcolor); background-size: cover; background-attachment: fixed;}
body.scroll_locked {overflow-y: hidden;}



/************************* HEADER *************************/
header {width: max-content; margin: -53px auto 50px; border: var(--border); border-top: 0; border-radius: 0 0 20px 20px; background: var(--backgroundcolor); position: relative; user-select: none; z-index: 10;}
header a {display: block; padding: 0 30px 30px; perspective: 200px;}
header a svg {display: block; width: 80px; height: auto; margin: auto; fill: var(--maincolor); transition: transform .4s ease-out;}
header a:hover svg {transform: rotateY(-180deg);}




/************************* MENU *************************/
.menu {display: block; font-size: .66rem; letter-spacing: .66em; text-transform: uppercase; text-align: center; font-weight: bold; color: var(--maincolor); user-select: none; line-height: 50px;}
.menu a {display: block; white-space: nowrap; padding: 0 30px 0 35px; margin: 0; color: var(--maincolor);}
.menu a:hover:not(.current) {opacity: .66;}
.menu a.current {color: var(--backgroundcolor); background: var(--maincolor);}
.menu span {padding: 0;}

.navigation, .language {position: fixed; width: 50px; height: 50px; overflow: visible; top: 50%; transform: rotate(270deg) translateX(-25px); display: flex; flex-direction: row-reverse; justify-content: center;}
.navigation {left: 1px; transform-origin: top left;}
.language {right: 50px; top: calc(50% - 50px); transform-origin: top right;}




/************************* MOBILE MENU *************************/
.mobile_menu {display: none; font-family: var(--displayfont); font-size: larger; color: var(--maincolor);}

.mobile_menu .mobile_menu_button {position: absolute; top: 30px; right: 30px; z-index: 200; cursor: pointer; transition: 0s;}
.mobile_menu .mobile_menu_button svg {fill: none; stroke: currentColor; stroke-width: 3px;}
.mobile_menu .mobile_menu_button svg:first-child {display: block;}
.mobile_menu .mobile_menu_button svg:last-child {display: none;}
.mobile_menu .mobile_menu_button.opened svg:first-child {display: none;}
.mobile_menu .mobile_menu_button.opened svg:last-child {display: block;}

.mobile_menu_links {display: flex; width: 100%; z-index: 100; position: fixed; top: 0; left: 101vw; padding: 50px 10%; background: #0008; backdrop-filter: blur(5px); height: 100vh; flex-direction: column; justify-content: center; transition: .4s;}
.mobile_menu_links.opened {left: 0;}
.mobile_menu_links a {display: block; padding: 20px; border: var(--border); border-radius: var(--radius); margin-bottom: 10px; font-size: 1.8rem;  font-weight: bold; text-align: center; text-transform: uppercase; color: var(--maincolor); background: var(--backgroundcolor); overflow: hidden; cursor: pointer;}
.mobile_menu_links a:hover {border-color: var(--maincolor);}




/************************* ARTICLE *************************/
main, aside {max-width: 900px; margin: 0 auto;}
main.home {max-width: 1400px;}

main a {color: var(--linkcolor); cursor: pointer;}
main a:hover {color: var(--linkhovercolor);}

h1 {font-family: var(--displayfont); font-size: 3.5rem; margin: 0 auto 15px; line-height: 1em; text-align: center; text-transform: uppercase; text-wrap: balance;}
hgroup p {font-size: 1.1rem; font-weight: normal; margin-bottom: 50px; text-align: center; line-height: 1.1; letter-spacing: .05em;}
h2 {font-family: var(--displayfont); font-size: 2.25rem; margin: 0 0 60px 0; line-height: 1em; text-transform: uppercase;}
h3, .stronger {display: block; font-family: var(--displayfont); font-size: 1.4rem; margin: 0 0 30px 0; line-height: 1em;}

hr {border-top: 3px solid var(--maincolor); margin: 75px 0 25px;}

article ul:not(:last-child) {margin-bottom: 2em; padding: 0; list-style: none;}
article li {margin: 0 0 0 1.2em;}
article p:not(:last-child) {margin-bottom: 2em;}
article small {font-size: 10px;}
article img {display: block; max-width: 100%;}

del {text-decoration: line-through;}

video {display: block; width: 100%; height: auto; padding: 16px; border: var(--border); border-radius: var(--radiusbig); background: var(--backgroundcolor);}
video:hover {border-color: var(--maincolor);}
video[poster] {width: 100%; height: 100%; object-fit: cover; background: var(--backgroundcolor);}

.welcome {margin-top: 150px; text-align: center;}
.welcome h2 {text-transform: none;}

.centered {padding: 60px 0;}
.centered + .centered:not(.box) {padding-top: 0;}
.centered p {padding: 40px 45px; border: var(--border); border-radius: var(--radiusbig); margin: 0 60px; position: relative; background: black;}
.centered p br {margin-bottom: 30px;}
.centered p + p {margin-top: 15px;}
.centered p + ul {margin-top: 15px;}

.centered a {text-decoration: underline;}

.centered ul.features {padding: 40px 45px; border: var(--border); border-radius: var(--radiusbig); margin: 0 60px; position: relative; background: black;}
.centered ul.features.features li {margin-left: 40px; list-style: none; position: relative;}
.centered ul.features li:before {display: block; width: 25px; height: 16px; content: " "; border-bottom: 3.5px solid; position: absolute; left: -40px; top: -2px;}

.centered ul.facts {column-count: 2; gap: 30px;margin: 0 60px;}
.centered ul.facts li {padding: 25px 30px; border: var(--border); border-radius: var(--radiusbig); margin: 0 0 30px; list-style: none; background: black; break-inside: avoid;}
.centered img + ul.facts {margin-top: 30px;}

hgroup + .centered {padding-top: 0;}

.fit {display: block; width: 100%; height: auto; border: var(--border); border-radius: var(--radiusbig); text-align: center; font-style: italic;}




/************************* GAMES *************************/
.games {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; text-align: center;}
.games div {display: block; border: var(--border); border-radius: var(--radius); color: var(--maincolor); background: black; transition: transform .1s ease-out; position: relative; overflow: hidden;}
.games div img {width: 100%; height: auto; display: block; background: black;}
.games div:hover {border-color: var(--maincolor); background: var(--maincolor); transform: scale(1.05);}
.games div h2 {display: block; opacity: 0; position: absolute; left: 0; bottom: 0; z-index: 100; width: 100%; height: auto; padding: 80px 20px 20px; margin: 0; font-size: .8rem; line-height: 1.3em; text-transform: none; text-wrap: balance; background: linear-gradient(transparent, #0008 66%); pointer-events: none;}
.games div:hover h2 {opacity: 1;}

aside .games {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px;}




/************************* GAME DATA *************************/
.game_data {display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; font-size: .9rem; line-height: 1.2em; color: var(--maincolor);}
.game_image {display: block;}
.game_image img {display: block; width: 100%; height: auto; border: var(--border); border-radius: var(--radiusbig); background: black !important;}
.game_credits {padding: 30px 40px 40px; border: var(--border); border-radius: var(--radiusbig); background: var(--backgroundcolor); position: relative;}
.game_credits h2 {display: none; font-size: 1.5rem; margin: -5px 0 30px;}
.game_credits strong {display: block; margin-top: 15px;}
.game_credits a {text-decoration: underline;}
.game_credits img {display: block; height: 32px; margin: 50px 0 0 0;}
.game_credits img:hover {opacity: .66;}




/************************* SCREENSHOTS *************************/
.screenshots {position: relative;}
.screenshots img {display: block; width: 100%; max-height: 666px; object-fit: contain; padding: 16px; border: var(--border); border-radius: var(--radiusbig); margin: auto; background: black !important;}
.screenshots svg {display: block; position: absolute; top: calc(50% - 30px); z-index: 8; width: 60px; height: 60px; padding: 10px; cursor: pointer; border-radius: 100px; fill: none; stroke: var(--backgroundcolor); stroke-width: 3px; background: var(--maincolor); transition: .1s ease-out;}
.prev {position: absolute; top: calc(50% - 30px); width: 40px; height: 60px; cursor: pointer; left: -28px;}
.next {position: absolute; top: calc(50% - 30px); width: 40px; height: 60px; cursor: pointer; right: -28px;}
.prev:hover {background-color: white;}
.next:hover {background-color: white;}



/************************* ZOOMABLE IMAGES *************************/
.zoom {cursor: zoom-in; transition: .1s ease-out;}
.zoom:hover {border-color: var(--maincolor); background: var(--maincolor);}

.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 .1s ease-out; pointer-events: none; cursor: zoom-out;}
.lightbox.opened {pointer-events: inherit; opacity: 1; transition: 0;}
.lightbox img {height: 80%; border: var(--border); border-radius: var(--radiusbig); object-fit: contain; object-position: center center; transform: scale(.8); transition: transform .2s ease-out;}
.lightbox.opened img {transform: scale(1); border-color: var(--maincolor); background: var(--maincolor);}




/************************* BOX *************************/
.box {display: block; border: var(--border); border-radius: var(--radiusbig); color: var(--backgroundcolor); background: var(--maincolor); overflow: hidden; margin-bottom: 100px;}
.box img {display: block; width: 100%; height: auto;}
.box h2 {max-width: 13em; margin: 15px auto 40px; text-align: center;}
.box ul {column-count: 2; gap: 4px; margin: 50px; grid-auto-flow: initial;}
.box ul li {list-style: none; margin-bottom: 4px;}
.box ul li a {display: flex; justify-content: space-between; padding: 10px 20px; border-radius: 24px; font-size: smaller; line-height: 1.3rem; background: #fff6; color: var(--backgroundcolor);}
.box ul li a:hover {background: white;}
.box ul li a span {font-family: monospace; color: #0003;}
.box a {color: var(--linkcolor);}

.buttons {display: flex; justify-content: center; gap: 5px; margin: 0 auto 30px;}
.buttons a {display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; width: fit-content; line-height: 1.2rem; padding: 15px 20px; border: var(--border); border-color: var(--maincolor); border-radius: 22px; color: white !important; background: linear-gradient(var(--linkcolor), var(--linkhovercolor));}
.buttons a:hover {border-color: white; box-shadow: 0 15px 15px -15px #0003;}
.buttons a svg {stroke-width: 4px; stroke: currentcolor; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.buttons a strong {display: block; font-family: var(--displayfont); font-size: 1.4rem;}
.buttons a span {font-size: smaller;}

.versions {display: block; width: max-content; margin: 20px auto; font-size: .8rem; font-weight: normal; text-align: center; color: var(--backgroundcolor); opacity: .33; transition: .1s ease-out; cursor: pointer;}
.versions:hover {opacity: 1;}
.versions + ul {display: none; margin-top: 30px;}
.versions.opened {opacity: 1;}
.versions.opened + ul {display: grid;}




/************************* LOGOS *************************/
.logos {display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; margin: 50px;}
.logos a {display: block; border-radius: var(--radius); background: white;}
.logos a:not([href]) {cursor: default; pointer-events: none;}
.logos a img {display: block; width: 100%; height: auto; filter: brightness(0); transition: 0s;}
.logos a:hover {background: linear-gradient(var(--linkcolor), var(--linkhovercolor));}
.logos a:hover img {filter: brightness(1);}




/************************* CARDS *************************/
.cards {column-count: 3; column-gap: 25px;}
.cards div {margin-bottom: 30px; border-radius: var(--radius); color: var(--backgroundcolor); background: var(--maincolor); font-size: smaller; break-inside: avoid; overflow: hidden;}
.cards div:hover {border-color: white;}
.cards h3 {font-size: 1.2rem; margin: 15px;}
.cards p {margin: 15px; font-size: smaller; line-height: 1.3em;}
.cards a {display: block; width: max-content; padding: 2px 10px; margin: 15px auto 0 0; border-radius: 30px; color: white; background: linear-gradient(var(--linkcolor), var(--linkhovercolor)); text-transform: uppercase; font-size: smaller; font-weight: bold;}
.cards a:hover {color: white;}
.cards img {display: block; width: 100%; height: auto; border: 0; border-radius: 0; filter: contrast(.66);}




/************************* POPUP *************************/
.popup {width: 220px; height: 220px; text-align: center; position: fixed; right: 100px; top: 50%; transform: translateY(-50%); z-index: 9999; filter: drop-shadow(50px 50px 5px #0003);}
.popup a {display: block; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); font-family: var(--displayfont); font-weight: bold; font-size: 1.5rem; line-height: 1.1em; text-transform: uppercase; color: var(--maincolor);}
.popup a:hover {color: var(--linkcolor); transform: scale(1.1) translate(-45%, -45%);}
.popup img {width: 100%; height: 100%; animation: popup 30s infinite forwards linear; pointer-events: none;}
@keyframes popup {to {transform: rotate(360deg);}}




/************************* FOOTER *************************/
footer {margin: 50px 0 0; font-size: .9rem; text-align: center; color: var(--maincolor); user-select: none;}
footer a {color: var(--maincolor); padding-bottom: 8px;}
footer a:hover {opacity: .66;}
footer a:not(:last-child):after {content: '—'; display: inline-block; margin: 0 8px;}




/************************* ERROR 404 *************************/
.error404 p {margin: 50px auto; text-align: center;}




/************************* MEDIA QUERIES *************************/
@media (max-width: 1200px) {
	.game_data {gap: 30px;}
	.popup {display: none;}
}
@media (max-width: 992px) {
	body {margin: 15px; padding: 50px 30px;}
	header {margin-top: -53px;}
	header a {padding: 0 20px 20px;}
	header a svg {width: 60px;}
	hgroup p {font-size: 1rem;}
	.menu {display: none;}
	.mobile_menu {display: block;}
	h1 {font-size: 4rem;}
	h2 {font-size: 2rem; padding: 0;}
	h3 {font-size: 2rem;}
	.box ul {margin: 30px;}
	.logos {margin: 30px;}
	.logos a {border-radius: 10px;}
	.button {margin: 30px;}
	.game_credits {padding: 30px;}
	.welcome {text-align: inherit;}
	.welcome br {display: none;}
}
@media (max-width: 768px) {
	html {font-size: 17px;}
	body {margin: 0; border: 0; padding: 50px 20px;}
	.mobile_menu .mobile_menu_button {top: 20px; right: 20px;}
	header a {padding: 20px;}
	 h1 {font-size: 3rem;}
	 h2 {margin-bottom: 50px;}
	.games {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px;}
	.screenshots svg {width: 50px; height: 50px; padding: 8px; top: calc(50% - 25px);}
	.screenshots .prev {left: -15px;}
	.screenshots .next {right: -15px;}
	.cards {column-count: 1;}
	.lightbox img {width: auto; height: auto; max-width: 90%; max-height: 90%;}
	.game_credits img {position: inherit; height: 28px; margin: 30px 0 0 0;}
	.centered {padding: 50px 0;}
	.centered p {padding: 30px; margin-left: 0; margin-right: 0;}
	.centered ul.features {padding: 30px 30px 30px 20px; margin-left: 0; margin-right: 0;}
	.centered ul.facts {column-count: 1; margin: 0;}
	.centered ul.facts li {margin-bottom: 15px;}
	.centered ul li:before {width: 18px; height: 0; left: -30px; top: 12px; border-left: 0;}
	.box ul {column-count: 1; margin: 25px;}
	.buttons {display: block; margin: 25px;}
}
@media (max-width: 576px) {
	 h1 {font-size: 2.5rem;}
	.game_data {grid-template-columns: 1fr; gap: 20px;}
	.game_credits h2 {margin-bottom: 20px;}
	.button {grid-template-columns: 1fr; text-align: center; padding: 15px 30px 15px 30px;}
	.button svg {display: none;}
}