:root {
	--maincolor: #c2cdc9;
	--backgroundcolor: #232126;
	--linkcolor: #4397a4;
	--linkhovercolor: #49a6b5;
	--specialcolor: #cbc49a;
	--displayfont: 'chaney', sans-serif;
	--regularfont: 'poppins', sans-serif;
	--fontsize: 16px;
	--smallfontsize: .9rem;
	--radius: 12px;
}




/************************* FONTS *************************/
@font-face {
	font-family: 'chaney';
	src: url("fonts/chaney-extended.woff2");
	font-weight: bold;
}
@font-face {
	font-family: 'poppins';
	src: url("fonts/poppins-medium.woff2");
	font-weight: normal;
	font-style: normal;sm
}
@font-face {
	font-family: 'poppins';
	src: url("fonts/poppins-bold.woff2");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'poppins';
	src: url("fonts/poppins-medium-italic.woff2");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'poppins';
	src: url("fonts/poppins-bold-italic.woff2");
	font-weight: bold;
	font-style: italic;
}




/************************* RESET *************************/
* {margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; text-decoration: none;}
a, a img {transition: .2s;}
.columnas {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.columna {flex: 1 1 400px; padding: 0 15px;}




/************************* BODY *************************/
html {background: url('/images/background.jpg') no-repeat 0 0 var(--backgroundcolor); background-size: 100% auto; background-attachment: fixed;}
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.7; color: var(--maincolor);}
html::-webkit-scrollbar {width: 8px; background: var(--backgroundcolor);}
html::-webkit-scrollbar-thumb {background: var(--maincolor); border-radius: 0; border: 0;}
body {margin: 0 auto; overflow-x: hidden;}




/************************* HEADER *************************/
header {text-align: center; padding: 25px;}
header a {display: block; width: 64px; height: 80px; perspective: 200px; margin: 0 auto;}
header a svg {display: block; transition: 1.5s ease-out; fill: var(--maincolor);}
header a:hover svg {transform: rotateY(-360deg);}




/************************* MENU *************************/
.menu {display: block; clear: both; font-size: .75rem; letter-spacing: .5em; text-transform: uppercase; font-weight: bold; color: var(--maincolor); line-height: 35px;}
.menu a {display: block; padding: 0 1.2em .1em 1.7em; margin: 0 1em; outline: 2px solid transparent; outline-offset: -4px; color: var(--maincolor);}
.menu a:hover, .menu a.current {outline-color: var(--maincolor); outline-offset: 1px;}
.menu span {padding: 0;}

.left_menu, .right_menu {position: fixed; width: 600px; top: calc(50% - 25px); transform: rotate(270deg); display: flex; flex-direction: row-reverse; justify-content: center;}
.left_menu {left: -200px;}
.right_menu {right: -200px;}




/************************* MOBILE MENU *************************/
.mobile_menu {display: none; position: absolute; top: 0; right: 5%; font-family: var(--displayfont); font-size: larger; color: var(--maincolor);}

.mobile_menu .mobile_menu_button {width: 30px; height: 30px; position: absolute; top: 20px; right: 0; z-index: 200; background: url('images/menu.svg') no-repeat left top; background-size: cover; cursor: pointer; transition: 0s;}
.mobile_menu .mobile_menu_button.opened {background-position: right top;}

.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; text-align: center; color: var(--maincolor); cursor: pointer;text-transform: uppercase;}




/************************* ARTICLE *************************/
article {width: 90%; max-width: 800px; margin: 0 auto;}

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

h1 {font-family: var(--regularfont); font-size: 1rem; text-transform: uppercase; margin: 0 0 40px 0; border-top: 2px solid; border-bottom: 2px solid; padding: 6px 0; text-align: center; line-height: 1.1; letter-spacing: .3em;}
h2 {font-family: var(--displayfont); font-size: 2.6rem; text-transform: uppercase; margin: 0 0 40px 0; line-height: 1.1; text-align: center; padding: 0 .5em;}
h3 {font-family: var(--displayfont); font-size: 2rem; text-transform: uppercase; margin: 0 0 30px 0; line-height: 1.2;}

hr {border-top: 2px solid var(--maincolor); margin: 30px 0;}

table {font-size: var(--smallfontsize); border-collapse: collapse;}
td img {margin: 0 5px 10px 0;} 
td {line-height: normal; vertical-align: top;}

article ul:not(:last-child) {margin-bottom: 2em; padding: 0; list-style: none;}
article li {list-style: '―'; margin: 0 0 0 1em; padding-left: .5em;}
article p:not(:last-child) {margin-bottom: 2em;}
article small {font-size: 10px;}
article img {max-width: 100%;}

del {text-decoration: line-through;}

.centered {padding: 90px; text-align: center;}
.centered + .centered:not(.box) {padding-top: 0;}
.centered .features li {list-style: none; margin: 0;}

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




/************************* WELCOME *************************/
.welcome {text-align: center;}
.welcome h2 {max-width: 44rem; font-family: var(--displayfont); font-size: 2.6rem; margin: 0 auto 30px; letter-spacing: normal; text-transform: uppercase; border: 0; color: var(--maincolor);}
.welcome p {max-width: 38em; margin: 0 auto 50px;}




/************************* GAMES *************************/
.games {display: flex; flex-wrap: wrap; margin: 0 -15px; text-align: center;}
.games li {width: 33.3333%; padding: 0 15px 30px; margin: 0; float: left; list-style: none; border: 0; font-size: 90%;}
.games a {width: 100%; overflow: auto;}
.games img {width: 100%; height: auto; display: block; color: var(--maincolor); background: black;}
.games figure {display: block; border-radius: var(--radius); color: var(--backgroundcolor); overflow: hidden; transition: .2s;}
.games figure:hover {transform: scale(1.02);}
.games figure:hover img {filter: brightness(1.05);}
.games figure a {color: var(--backgroundcolor);}
.games figcaption {display: block; padding: .9em 1.1em 1em; line-height: 1.3em; font-size: .8rem; background: var(--maincolor);}
.games figcaption strong {font-family: var(--regularfont); font-weight: normal; text-transform: uppercase; letter-spacing: .1em;}




/************************* GAME DATA *************************/
.game_data {display: flex; padding: 30px; font-size: var(--smallfontsize); line-height: normal; color: var(--backgroundcolor); background: var(--maincolor); border-radius: var(--radius); overflow: hidden;}
.game_image {display: block; flex: 0 0 30%;}
.game_image img {display: block; width: 100%; height: auto; background: black;}
.game_credits {flex: 1 1 70%; padding-left: 30px;}
.game_credits h3 {padding-bottom: 20px; border-bottom: 2px solid; margin-bottom: 20px;}
.game_credits img {height: 30px; margin-top: 1.5rem; float: right;}




/************************* SCREENSHOTS *************************/
.screenshots {position: relative; border-radius: var(--radius); overflow: hidden;}
.screenshots img {display: block; width: 100%; object-fit: cover; margin: 0;}
.screenshots span {display: inline-block; position: absolute; bottom: 10px; right: 10px; font-weight: bold; color: white; line-height: 40px; padding: 0 25px; background: rgba(30,30,30,.9); border-radius: 5px; pointer-events: none; transition: .05s;}
.screenshots:hover span {background: var(--linkcolor);}
.screenshots:after {content: ' '; display: table; clear: both;}

.lightboxOverlay {opacity: .9 !important;}
.lb-image {border: 0 !important;}
.lb-dataContainer {padding-top: 25px !important;}
.lb-data {padding: 0 !important;}
.lb-caption {font-family: var(--regularfont) !important; font-size: 1rem !important; line-height: 1.2em !important;}
.lb-number {color: #ccc !important;}




/************************* BOX *************************/
.box {display: block; padding: 8%; border-radius: var(--radius); font-size: var(--smallfontsize); color: var(--backgroundcolor); background:var(--maincolor);}
.box h2 {font-size: 2rem; max-width: 16em; margin-left: auto; margin-right: auto;}
.box ul {border-top: 2px solid; text-align: center;}
.box ul li {display: block; padding: .4em 0; margin: 0; border-bottom: 2px solid;}
.box a {color: var(--linkcolor);}
.box br:last-child {display: none;}
.box *:last-child {margin-bottom: 0;}




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




/************************* LOGOS *************************/
.logos {display: flex; flex-wrap: wrap; margin: 2rem -2px 0;}
.logos > * {display: block; flex: 0 0 33.3333%; width: 33.3333%; padding: 2px;}




/************************* VIDEO *************************/
.video {position: relative; width: 100%; height: 0; padding-bottom: 75%; margin: 0; background: black; border-radius: var(--radius); overflow: hidden;}
.video.panoramic {padding-bottom: 56.25%;}
.video iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}




/************************* STORIES *************************/
.stories {column-count: 3; column-gap: 30px; margin-top: 50px;}
.stories figure {display: table; width: 100%; margin-bottom: 30px; border-radius: var(--radius); overflow: hidden; background: var(--maincolor);}
.stories figcaption {display: table; padding: .9em 1.1em 1em; font-size: .8rem; line-height: 1.3em; color: var(--backgroundcolor);}
.stories img {display: block; width: 100%;}
.stories a {white-space: nowrap; font-weight: bold;}




/************************* MINIGAMES *************************/
.minigames {column-count: 3;}
.minigames strong {display: block; margin-bottom: 10px;}




/************************* BUTTONS *************************/
.button {display: table; font-size: 1rem; padding: .8em 2em; margin: 3rem auto 2rem; color: white !important; text-align: center; background: var(--linkcolor); border-radius: 99px; white-space: nowrap;}
.button:hover {background: var(--linkhovercolor);}
.button:before {content: ' '; display: inline-block; height: 20px; width: 20px; margin: -2px 12px 2px -7px; background: url('/images/icon_download.svg') no-repeat 0 0; vertical-align: middle;}
.button.small {display: inline-block; font-size: 1rem; padding: .5em 1.5em; margin: 0;}
.button.small:before {display: none;}
.button.win:after {content: ' — Windows';}
.button.disabled {pointer-events: none; opacity: .2;}
.button.disabled:before {display: none;}
.button + br {display: none;}
.button + br + .button {margin-top: -20px;}




/************************* FEEDBACK *************************/
.feedback {width: 100%; border-collapse: collapse;}
.feedback td {padding: 3rem 2rem 3rem 0; border-bottom: 2px solid;}
.feedback td:last-child {padding-right: 0;}
.feedback strong {display: block; font-size: larger; margin-bottom: 1rem;}




/************************* FOOTER *************************/
footer {margin: 60px; 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;}

.spacer:before {content: '—'; display: inline-block; margin: 0 8px;}
.twitter img {margin-right: 5px; vertical-align: middle;}
.twitter:hover img {filter: brightness(2);}




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





/************************* MEDIA QUERIES *************************/
@media (max-width: 1400px) {
	.menu {display: none;}
	.mobile_menu {display: block;}
	.welcome {padding: 30px 0;}
	.welcome h1 {flex: 0 0 100%; max-width: 700px; margin: 0 auto 15px; text-align: center;}
	.welcome p {flex: 0 0 100%; padding: 0; text-align: center;}
}
@media (max-width: 992px) {
	h1 {font-size: 1rem;}
	h2 {font-size: 2rem;}
	.columns {flex-direction: column;}
	.games li {width: 33.3333%;}
	.box {padding: 15% 10%;}
	.centered {padding: 90px 5%;}
	footer a {display: block; margin: .5em; text-align: center;}
	footer span {display: none;}
}
@media (max-width: 768px) {
	html {background-size: 200vw auto;}
	.games li {width: 50%;}
	.game_data {flex-wrap: wrap;}
	.game_image {flex: 1 1 100%;}
	.game_credits {padding: 30px 0 0 0; line-height: normal;}
	.game_credits h3 {display: none;}
	.game_credits img {height: 24px;}
	.logos > * {flex: 0 0 33.3333%;}
	.stories, .phylosophy {column-count: 1;}
}
@media (max-width: 576px) {
	html {background-size: 250vw auto;}
	.welcome h1 {font-size: 1.75rem;}
	h2 {font-size: 1.75rem;}
	.games li {width: 100%;}
	.logos > * {flex: 0 0 50%;}
	.button.win:after {content: '';}
}