:root {
	--maincolor: #444;
	--backgroundcolor: #f0f0f0;
	--linkcolor: #3cb996;
	--linkhovercolor: #42d0a9de;
	--specialcolor: #cbc49a;
	--displayfont: 'clashdisplay', sans-serif;
	--regularfont: 'archivo', sans-serif;
	--fontsize: 16px;
	--smallfontsize: .9rem;
	--radius: 8px;
}




/************************* 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 {transition: .1s ease-out;}
.columnas {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.columna {flex: 1 1 400px; padding: 0 15px;}




/************************* BODY *************************/
html {background: white; position: relative;}
html {scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--maincolor) transparent;}
html {font-family: var(--regularfont); font-size: var(--fontsize); letter-spacing: .02em; line-height: 1.6; color: var(--maincolor);}
html::-webkit-scrollbar {width: 8px; background: var(--backgroundcolor);}
html::-webkit-scrollbar-thumb {background: var(--maincolor); border-radius: 0; border: 0;}
body {padding: 50px; margin: 100px 50px 50px; background: var(--backgroundcolor);}
body.scroll_locked {overflow-y: hidden;}



/************************* HEADER *************************/
header {text-align: center; margin: -110px 0 20px; position: relative; z-index: 10;}
header a {display: block; width: 120px; height: 120px; perspective: 200px; padding: 18px; margin: 0 auto; border-radius: 100px; background: var(--maincolor);}
header a svg {display: block; width: 64px; height: 80px; margin: auto; transition: .4s ease-out; fill: white;}
header a:hover svg {transform: rotateY(-180deg);}




/************************* MENU *************************/
.menu {display: block; font-family: var(--displayfont); font-size: .75rem; letter-spacing: .5em; text-transform: uppercase; font-weight: bold; color: var(--maincolor); line-height: 50px;}
.menu a {display: block; white-space: nowrap; padding: 0 25px; margin: 0; color: var(--maincolor);}
.menu a:hover, .menu a.current {color: white; background: var(--maincolor);}
.menu span {padding: 0;}

.navigation, .language {position: fixed; width: 50px; height: 50px; overflow: visible; top: calc(50% - 25px); transform: rotate(270deg) translateX(-25px); display: flex; flex-direction: row-reverse; justify-content: center;}
.navigation {left: 0; transform-origin: top left;}
.language {right: 50px; top: calc(50% - 75px); 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: 20px; right: 20px; z-index: 200; cursor: pointer; transition: 0s;}
.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: 80px 20px 30px; background: var(--backgroundcolor); font-size: 2.8rem; height: 100vh; flex-direction: column; justify-content: center; transition: .4s;}
.mobile_menu_links.opened {left: 0;}
.mobile_menu_links a {display: block; line-height: 70px; font-weight: bold; text-align: center; color: var(--maincolor); cursor: pointer;}




/************************* ARTICLE *************************/
main, aside {max-width: 750px; margin: 0 auto;}
main.home {max-width: 1000px;}
aside.centered {padding-top: 25px; margin-top: 100px; border-top: 2px solid;}

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

h1 {font-family: var(--displayfont); font-size: 4rem; margin: 0 auto 10px; line-height: 1; text-align: center;}
hgroup p {font-family: var(--displayfont); font-size: 1.1rem; font-weight: normal; margin: 0; border-top: 2px solid; padding: 20px 0; text-align: center; line-height: 1.1; letter-spacing: .05em;}
h2 {font-family: var(--displayfont); font-size: 2.5rem; margin: 0 0 25px 0; line-height: 1.2;}
h3 {font-family: var(--displayfont); font-size: 1.5rem; margin: 0 0 25px 0; line-height: 1.2;}

hr {border-top: 2px 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 {width: 100%; height: auto; background: black; border-radius: var(--radius);}
video[poster] {width: 100%; height: 100%; object-fit: cover; background: black;}

.footnote {text-align: center;}

.centered {padding: 50px 0 60px;}
.centered + .centered:not(.box) {padding-top: 0;}
.centered ul li {list-style: "—  "; margin: 0 0 0 24px;}
.centered a {text-decoration: underline;}

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




/************************* GAMES *************************/
.games {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; text-align: center;}
.games article {font-size: .9rem;}
.games article img {width: 100%; height: auto; display: block; border-radius: var(--radius); color: var(--maincolor); background: var(--maincolor); transition: .1s ease-out;}
.games article img:hover {transform: scale(1.05);}
.games article div {display: block; margin-top: 20px; line-height: 1.3em;}
.games article h2 {font-size: 1rem; margin: 0; padding: 0; letter-spacing: .05em;}




/************************* OTHER GAMES *************************/
.other_games {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; text-align: center;}
.other_games a {display: block; font-size: .9rem;}
.other_games img {width: 100%; height: auto; display: block; border-radius: var(--radius); color: var(--maincolor); transition: .1s ease-out;}
.other_games img:hover {transform: scale(1.05);}




/************************* GAME DATA *************************/
.game_data {display: grid; grid-template-columns: repeat(2, 1fr); font-size: var(--smallfontsize); line-height: normal; color: var(--maincolor);}
.game_image {display: block;}
.game_image img {display: block; width: 100%; height: auto; border-radius: var(--radius); background: black;}
.game_credits {padding: 50px; font-size: .9rem; line-height: 1.1rem; border-radius: var(--radius); background: white; position: relative;}
.game_credits h2 {font-size: 1.8rem; font-weight: normal; padding-bottom: 30px; margin: -5px 0 20px; border-bottom: 2px solid;}
.game_credits strong {display: block; margin-top: 10px}
.game_credits img {display: block; position: absolute; bottom: 50px; right: 50px; width: auto; height: 24px;}




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



/************************* ZOOMABLE IMAGES *************************/
.zoom {cursor: zoom-in; transition: .1s ease-out;}
.zoom:hover {filter: brightness(.9);}

.lightbox {display: flex; justify-content: center; align-items: center; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; background: #000000DD; opacity: 0; transition: opacity .1s ease-out; pointer-events: none; cursor: zoom-out;}
.lightbox.opened {pointer-events: inherit; opacity: 1; transition: 0;}
.lightbox img {width: 90%; height: 90%; object-fit: contain; object-position: center center; transform: scale(.8); transition: transform .1s ease-out;}
.lightbox.opened img {transform: scale(1);}

.grayscale {filter: contrast(.66); transition: .1s ease-out;}
.grayscale:hover {filter: contrast(.66) brightness(.9);}




/************************* BOX *************************/
.box {display: block; padding: 25px 50px 50px; border-radius: var(--radius); background: white; overflow: hidden;}
.box h2 {max-width: 13em; margin: 15px auto 40px; text-align: center;}
.box ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px;}
.box ul li {display: flex; justify-content: space-between; padding: 8px 16px; margin-bottom: -2px; border: 2px solid var(--backgroundcolor); border-radius: 24px; font-size: .8rem; line-height: 1.3rem; color: var(--maincolor); background: white;}
.box ul li a {font-size: 1rem; font-weight: bold;}
.box a {color: var(--linkcolor);}
.box br:last-child {display: none;}
.box *:last-child {margin-bottom: 0;}




/************************* DOWNLOAD BUTTON *************************/
.button {display: grid; grid-template-columns: 40px 1fr; width: fit-content; grid-gap: 15px; font-size: 1.25rem; line-height: 1.2em; padding: 15px 30px 15px 25px; margin: 3rem auto 2.5rem; color: white !important; background: linear-gradient(var(--linkhovercolor), var(--linkcolor)); border-radius: 10px;}
.button svg {width: 40px; height: 50px;}
.button:hover {padding: 15px 40px 15px 35px; background: linear-gradient(var(--linkcolor), var(--linkhovercolor));}
.button strong {text-transform: uppercase;}




/************************* OTHER VERSIONS *************************/
.versions {display: block; padding: 15px 0; margin: 30px -50px -50px; font-weight: normal; text-align: center; cursor: pointer; color: #999; background: linear-gradient(var(--backgroundcolor), white 25px); transition: .1s ease-out;}
.versions:hover {color: var(--maincolor);}
.versions + ul {display: none; margin-top: 30px;}
.versions.opened {padding: 30px 0; margin: 30px -50px -30px; font-size: 1rem; font-weight: bold; color: var(--maincolor);}
.versions.opened + ul {display: grid;}




/************************* PHYLOSOPHY *************************/
.phylosophy {column-count: 2; column-gap: 30px; margin-top: 2rem;}
.phylosophy h3 {display: inline-block; padding: 5px 12px; margin: 15px 0; font-size: 1.25rem; color: white; background: var(--maincolor);}
.phylosophy p {display: table; break-inside: avoid-column; line-height: 1.4;}




/************************* LOGOS *************************/
.logos {display: grid; grid-template-columns: repeat(4, 1fr); margin: 25px 0 0;}
.logos a {display: block; border: 2px solid var(--backgroundcolor); border-radius: var(--radius);margin: -1px;}
.logos a:not([href]) {cursor: default; pointer-events: none;}
.logos a img {display: block; width: 100%; height: auto; filter: brightness(.2); transition: 0s;}
.logos a:hover {background: var(--linkcolor);}


.logos a:hover img {filter: brightness(1);}




/************************* MINIGAMES *************************/
.minigames {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px;}
.minigames h2 {font-size: 1.5rem; margin: 25px 0 15px 0; padding: 0; line-height: 1.2; text-align: left;}
.minigames p {line-height: 1.4em; margin-bottom: 0;}
.minigames a {white-space: nowrap; font-weight: bold;}
.minigames img {display: block; width: 100%; border-radius: var(--radius);}




/************************* STORIES *************************/
.stories {column-count: 2; column-gap: 25px;}
.stories div {display: table; width: 100%; break-inside: avoid; overflow: hidden;}
.stories p {display: table; padding: 1.5em 0 1.5em; line-height: 1.4em;}
.stories a {white-space: nowrap; font-weight: bold;}
.stories img {display: block; width: 100%; border-radius: var(--radius);}




/************************* FOOTER *************************/
footer {margin: 50px 0 0; font-size: var(--smallfontsize); text-align: center; color: var(--maincolor);}
footer a {color: var(--maincolor); padding-bottom: 8px; border-bottom: 2px solid transparent;}
footer a:hover {border-color: inherit;}
footer .spacer:before {content: '—'; display: inline-block; margin: 0 8px;}




/************************* ERROR 404 *************************/
.error404 {display: flex; flex-direction: column; justify-content: center; text-align: center; height: calc(100vh - 280px); perspective: 100vh;}
.error404 h1 {margin-bottom: 25px;}
.error404 svg {position: fixed; width: 600px; height: 600px; top: calc(50% - 300px); left: calc(50% - 300px); z-index: -10; fill: white; animation: rotation 15s linear infinite;}
@keyframes rotation {from {transform: rotatey(0deg);} to {transform: rotatey(-360deg);}}




/************************* MEDIA QUERIES *************************/
@media (max-width: 992px) {
	body {margin: 100px 0 0; padding: 50px 15px;}
	.menu {display: none;}
	.mobile_menu {display: block;}
	h1 {font-size: 3.5rem;}
	h2 {font-size: 2rem; padding: 0;}
	h3 {font-size: 2rem;}
	.games {grid-template-columns: repeat(3, 1fr);}
	.box {padding: 25px 5%;}
	.versions {margin-bottom: -25px;}
	.footnote {text-align: inherit;}
	.centered {padding: 50px 0;}
	footer a {display: block; margin: .5em; text-align: center;}
	footer span {display: none;}
}
@media (max-width: 768px) {
	.games {grid-template-columns: repeat(2, 1fr);}
	.other_games {grid-template-columns: repeat(5, 1fr);}
	.game_data {grid-template-columns: 1fr 2fr;}
	.logos {grid-template-columns: repeat(3, 1fr);}
	.screenshots svg {width: 50px; height: 50px; padding: 8px; top: calc(50% - 25px);}
	.screenshots .prev {left: -15px;}
	.screenshots .next {right: -15px;}
	.box ul {grid-template-columns: 1fr;}
	.minigames {grid-template-columns: 1fr;}
	.stories {column-count: 1;}
	.phylosophy {column-count: 1;}
}
@media (max-width: 576px) {
	.games {grid-template-columns: 1fr;}
	.other_games {grid-template-columns: repeat(4, 1fr);}
	.game_data {grid-template-columns: 1fr;}
	.game_credits {padding: 30px;}
	.game_credits h2 {padding-bottom: 20px;}
	.game_credits img {position: inherit; margin: 20px 0 0 auto;}
	.logos {grid-template-columns: repeat(2, 1fr);}
	.button br {display: none;}
}