/* Font */
@font-face { 
	font-family: 'Lambda'; 
	src: url("../fonts/Lambda-Regular.ttf") format('truetype'); 
	font-weight: normal; 
	font-style: normal; 
}
@font-face { 
	font-family: 'Aleo'; 
	src: url("../fonts/Aleo-Regular.ttf") format('truetype'); 
	font-weight: normal; 
	font-style: normal; 
}

:root {
	--text-color: rgba(255, 255, 255, 0.9);
	--text-color-2: rgba(255, 255, 255, 0.68);
	--text-accent-color: rgb(255, 193, 23);
	--accent-color: #EDB92E;

	--bg-color: #161616;

	--site-height: 2404px;

	--section-width: 1480px;

	color: var(--text-color);
	font-family: "Aleo";
}
::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
	text-decoration: none;
    -moz-outline-style: none;
}
a:-webkit-any-link {
	text-decoration: none;
}
a::-moz-focus-inner {
  border: 0;
}
a:visited {
	background-color: transparent;
	text-decoration: none;
}
body, button, input { 
	margin: 0;
	font-family: 'Lambda', sans-serif;
}
p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.section {
	display: flex;
	width: var(--section-width);
	margin: 0 auto;
}
.section.column {
	flex-direction: column;
}
.section.center {
	align-items: center;
}
.section.divider {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 80px;
	margin-bottom: 30px;
	opacity: 0.7;
	filter: blur(0.4px);
}
.section > .ttl, .section > h2 {
	color: var(--text-color-2);
	font-size: 24px;
	margin-bottom: 40px;
	text-decoration: none;
	transition: 0.2s ease;
}

.section h2 { 
	font-size: 24px; 
	color: var(--text-color-1); 
}
.section h2 span.larger {
	font-size: 70px;
	line-height: 70px;
	text-shadow: rgba(11, 11, 11, 0.5) 2px 2px 5px;
	--icon-size: 40px;
	--icon-margin: 5px;
	margin-left: calc(-1 * var(--icon-size) - var(--icon-margin));
	margin-right: calc(-1 * var(--icon-size) - var(--icon-margin));;
}
.section h2 span.larger::before {
	content: "";
	position: relative;
	display: inline-block;
	width: var(--icon-size);
	height: var(--icon-size);
	top: -4px;
	background-image: url('../img/star_transparent.png');
	background-size: contain;
	filter: brightness(1.3);
	margin-right: var(--icon-margin);
}
.section h2 span.larger::after {
	content: "";
	position: relative;
	display: inline-block;
	width: var(--icon-size);
	height: var(--icon-size);
	top: -4px;
	background-image: url('../img/star_transparent.png');
	background-size: contain;
	filter: brightness(1.3);
	margin-left: var(--icon-margin);
}
body {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-color);
}

/* Header */
header {
	--logo-width: 500px;
	display: flex;
	position: fixed;
	width: 100vw;
	justify-content: center;
	padding: 60px 0 0 0;
	z-index: 10;
	transition: padding 0.2s ease;
}
header.scrolled {
}
header:not(.scrolled) .top-shadow {
	opacity: 0;
}
header.scrolled .top-shadow {
	opacity: 1;
	pointer-events: none;
}
header.scrolled .social-container, header.scrolled nav {

}
header .inner {
	display: flex;
	width: var(--section-width);
	flex-direction: row;
}
header nav {
	position: relative;
	right: 0;
	top: 4px;
}
header nav a {
	font-size: 24px;
	color: var(--text-color);
	margin-left: 14px;
	text-decoration: none;
	transition: color 0.2s ease;
	pointer-events: all;
}
header nav a.selected {
	position: relative;
	color: var(--text-accent-color);
}
header nav a.selected::before {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: var(--text-accent-color);
	bottom: -10px;
	left: calc(50% - 2.5px);
}
header nav a:hover {
	color: var(--text-accent-color);
}
header #header-logo {
	position: absolute;
	width: var(--logo-width);
	height: var(--header-height);
	margin: 0 auto;
	object-fit: contain;
	left: calc(50% - var(--logo-width) / 2);
	transition: all 10.2s ease;
	z-index: 10;
}
.index header #header-logo {
	display: none;
}
.blog header, .blog-post header {
	--logo-width: 140px;
	--header-height: 140px;
}
.blog header #header-logo, .blog-post header #header-logo {
	top: 18px;
}
.social-container {
	height: min-content;
	margin-right: auto;
	padding: 0 20px;
}
.social-container a:not(:first-of-type) {
	margin-left: 10px;
}
.social-container a:hover img {
	opacity: 0.5;
}
.social-container a img {
	width: 30px;
	height: 30px;
	transition: 0.5s ease;
}
header .top-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 154px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(22,22,22,0.68) 0%, rgba(22,22,22,0.38) 50%, rgba(22,22,22,0) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

/* Footer */
.footer {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	margin-top: auto;
}
.footer .bottom-shadow {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 224px;
	z-index: -1;
	background: linear-gradient(0deg, rgba(22,22,22,0.58) 0%, rgba(22,22,22,0) 100%);
}
.footer .txt {
	color: var(--text-accent-color);
	margin: 30px 0;
}

/* Index  */
.logo {
	display: flex;
	justify-content: center;
	margin-top: 60px;
	filter: brightness(1.2);
}
.index h1 { 
	opacity: 0; 
	width: 0; 
	height: 0; 
	max-height: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Index blog posts container */
.posts-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 60px;
}
.post-container {
	display: flex;
	position: relative;
	width: 480px;
	max-width: 480px;
	height: 480px;
	background-color: black;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.5s ease;
}
.post-container:not(:last-of-type) {
	margin-right: 20px;
}

.post-container:hover {
	cursor: pointer;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.post-container:hover .thumbnail {
	scale: 1.1;
}

.post-container:hover .ttl {
	color: var(--text-accent-color);
}

.post-container .thumbnail {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
	object-fit: cover;
	scale: 1;
	transition: scale 0.5s ease;
}

.post-container .shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(22,22,22,0.3) 0%, rgba(22,22,22,0) 100%);
}

.post-container .detail-content {
	display: flex;
	padding: 25px;
	margin-top: auto;
	flex-direction: column;
	flex-grow: 1;
	color: var(--text-color);
	z-index: 3;
	text-shadow: rgba(11, 11, 11, 0.6) 2px 2px 5px;
}

.post-container .detail-content .ttl {
	font-size: 36px;
	margin: 6px 0 10px 0;
	transition: color 0.5s ease;
	text-shadow: rgba(11, 11, 11, 0.6) 2px 2px 5px;
}
.post-container .detail-content .synopsis {
	font-size: 20px;
	line-height: 28px;
	color: var(--text-color);
	font-family: 'Aleo';
	text-shadow: rgba(11, 11, 11, 0.6) 2px 2px 5px;
}
.post-container .detail-content .date {
	color: var(--accent-color);
	margin-left: 3px;
}

#view-all-blog {
	display: flex;
	width: fit-content;
	margin: 40px auto 140px auto;
	color: var(--text-accent-color);
	font-size: 32px;
	text-decoration: underline;
	transition: 0.2s ease;
}
#view-all-blog:hover {
	opacity: 0.6;
}

/* About the game */
.section.about {
	display: flex;
	width: 100%;
	background: linear-gradient(90deg, rgba(22,22,22,0.5) 0%, rgba(22,22,22,0) 50%);
}
.about-container {
	display: flex;
	position: relative;
	width: var(--section-width);
	margin: 0 auto;
	padding: 50px 0;
	font-size: 21px;
	line-height: 29px;
	color: var(--text-color);
	font-family: 'Aleo';
	flex-direction: row;
}
.about-container .content { 
	width: 600px;
}
.about-container .image-container {
	position: relative;
	display: block;
	width: 600px;
	height: 380px;
	margin-top: 60px;
	margin-left: auto;
}
.about-container .image-container img  {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.section.about.right .about-container .content {
	order: 1;
}
.section.about.right .about-container .image-container {
	order: 0;
}
.section.about.right .about-container .image-container {
	margin-left: 0;
	margin-right: auto;
}
.about-container span {
	display: block;
}
.section.about.right > div span {
	display: block;
	margin-left: auto;
	text-align: right;
}
.section.about.right h2 span {
	width: 100%;
}
.section.about.right h2 {
	text-align: right;
}

/* Socials and news letter */
.section.socials { 
	position: relative;
	flex-direction: column;
	align-items: center;
}
.section.socials form {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.section.socials input, .section.socials button {
	display: block;
	height: 65px;
	border-width: 0;
	padding: 0;
    padding-inline: 0;
	font-size: 28px;
}
.section.socials button {
	background-color: #EDB92E;
	padding: 0 25px;
	margin-left: 20px;
	transition: 0.2s ease;
}
.section.socials button:hover {
	opacity: 0.8;
	cursor: pointer;
}
.section.socials input {
	width: 410px;
	background-color: var(--bg-color);
	padding: 0 10px;
	color: var(--accent-color);
}
.section.socials label[for="id_email"],
.section.socials label[for="id_captcha"] {
    display:none;
}
.section.socials .g-recaptcha {
	position: absolute;
	top: 90px;
	left: calc(50% - 75px);
}
.section.socials .social-container {
	margin: 200px auto 100px auto;
}
.section.socials .social-container a img {
	width: 50px;
	height: 50px;
}
.section.socials .message-container {
	display: flex;
	position: fixed;
	width: 100%;
	height: 200px;
	bottom: 0;
	background: linear-gradient(0deg, rgba(22,22,22,1) 0%, rgba(22,22,22,0.8) 55%, rgba(22,22,22,0) 100%);
	justify-content: center;
	align-items: center;
	pointer-events: none;
	opacity: 0;
	z-index: 10;
}
.section.socials .message-container .message {
	font-size: 32px;
	color: var(--accent-color);
}
.section.socials .message-container .message.error {
	color: var(--text-color);
}

/* Blog list */
.blog .post-list {
	display: grid;
	grid-template-rows: 300px 300px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 20px;
	row-gap: 20px;
	margin-top: 50px;
}
.blog .post-list .post-container {
	width: auto;
	height: auto;
	margin: 0;
}
.blog .tag-section {
	margin-top: 200px;
}
.blog .tag-container {
	margin: auto;
	font-size: 24px;
	justify-content: center;
	background: linear-gradient(90deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.65) 50%, rgba(22, 22, 22, 0) 100%);
}
.blog .tag-container a {
	color: var(--text-color-2);
}
.blog .tag-container a.selected {
	color: var(--text-accent-color);
}
.blog .tag-container a:not(:first-of-type) {
	margin-left: 20px;
}
.blog .pagination {
	margin: 40px auto 300px auto;
}
.blog .pagination .step-links {
	display: flex;
	flex-direction: row;
	margin: 0 auto;
}
.blog .pagination a {
	display: flex;
    width: fit-content;
    margin: 0 auto;
    color: var(--text-color-2);
    font-size: 24px;
    text-decoration: none;
    transition: 0.2s ease;
}
.blog .pagination a:hover,
.blog .pagination a.selected {
	color: var(--text-accent-color);
}
.blog .pagination a:not(:first-of-type) {
	margin-left: 25px;
} 


/* Blog post */
body.blog-post h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	position: relative;
	color: var(--text-color);
	font-family: 'Lambda', sans-serif;
}
/*body.blog-post h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: -4px;
	background-color: rgba(255, 255, 255, 0.2);
}*/
body.blog-post {
	position: relative;
	height: auto;
}
.blog-post-container {
	display: flex;
	width: 990px;
	margin: 200px auto 100px auto;
	flex-direction: column;
	background-color: var(--bg-color);
	box-shadow: 0 0 20px rgba(0, 0, 0, .8);
	color: rgba(188, 188, 188, 1);
	font-family: 'Aleo';
}
.blog-post-container li::marker {
	color: var(--text-accent-color);
}

.blog-post-container .title {
	font-size: 38px;
	color: var(--text-color);
	font-family: 'Lambda', sans-serif;
}
.blog-post-container .inner {
	padding: 60px 80px;
}
.blog-post-container .date-container {
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 35px;
	text-shadow: rgba(11, 11, 11, 0.6) 2px 2px 2px;
}
.blog-post-container .date-container .tag {
	color: var(--text-color-2);
}
.blog-post-container .banner {
	object-fit: cover;
}
.blog-post-container .date-container .date {
	margin-left: 5px;
	color: var(--text-accent-color);
}
.blog-post-container .post-image {
	width: 100%;
	height: 480px;
	object-fit: cover;
}
.blog-post-container p {
	line-height: 26px;
}
.blog-post-container a {
	color: var(--text-accent-color);
	text-decoration: underline;
}

/* 404 */
body.index.error h2 {
	margin: auto;
	font-size: 50px;
	color: var(--accent-color);
	padding: 10px;
	text-align: center;
}
body.index.error .inner { display: none; }

/* Background */
.background {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: -10;
	-webkit-filter: grayscale(50%);
    -moz-filter:    grayscale(50%);
    -ms-filter:     grayscale(50%);
    -o-filter:      grayscale(50%);
}
.blog-banner-background {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	/*background-color: var(--bg-color);*/
}
.blog-banner-background .banner {
	width: 100%;
	height: 1000px;
	object-fit: cover;
	filter: blur(2px) brightness(0.6); 
	-webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
	z-index: 0;
}
.blog-banner-background .shadow {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5) blur(10px) grayscale(0.6);
	z-index: -1;
}

.background img {
	width: 100%;
	max-height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

@media only screen and (max-width: 1520px) {
	:root { --section-width: 700px; }
	header .inner { max-width: var(--section-width); }
	header nav { margin-left: auto; }
	.social-container { margin-right: 20px; }
	.logo { margin-top: 110px; }
	.posts-container { flex-direction: column; }
	.post-container { height: fit-content; width: var(--section-width); min-width: var(--section-width); }
	.post-container:not(:last-of-type) { margin-right: 0; margin-bottom: 20px; }
	.post-container .shadow { background: linear-gradient(0deg, rgba(22,22,22,0.5) 0%, rgba(22,22,22,0) 100%);  }
	.post-container .thumbnail { width: 105%; height: 105%; left: -6px; top: -10px; }
	.post-container .detail-content { padding-top: 40px; padding-bottom: 40px; }
	.post-container img { }
	.about-container { flex-direction: column; text-align: center; }
	.about-container .content { width: 100%; }
	.about-container span { margin: 0 auto; }
	.about-container .image-container { margin: 0 auto; }
	.section.about.right .about-container .image-container { margin: 0 auto; }
	.section.about.right .about-container .content { order: 0; }
	.section.about.right h2 { text-align: center; }
	.section.about.right > div span { text-align: center; margin: 0; }

	.blog .post-list { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px 200px; }
	.blog .post-list .post-container { min-width: auto;}
	.blog .post-container .detail-content { padding: 20px; }

	.blog-post-container { width: var(--section-width); }
	.blog-post-container .inner { padding: 40px 40px; }
}

@media only screen and (max-width: 720px) {
	:root { --screen-padding: 20px; --section-width: 100%; }
	header { padding-top: 40px; }
	header .social-container { display: none; }
	header nav { margin-right: var(--screen-padding); }
	.blog header #header-logo, .blog-post header #header-logo { width: 120px; height: 120px; top: 4px; }
	.section { box-sizing: border-box; padding: 0 var(--screen-padding); }
	.section.divider img { width: 100%; }
	.logo img { width: 100%; height: 250px; object-fit: contain; }
	header .inner { max-width: var(--section-width); }
	header nav { margin-left: auto; }
	.social-container { margin-right: 20px; }
	.logo { margin-top: 60px; }
	.posts-container { width: 100%; flex-direction: column; }
	.post-container { height: fit-content; width: 100%; min-width: var(--section-width); }
	.post-container:not(:last-of-type) { margin-right: 0; margin-bottom: 20px; }
	.post-container .shadow { background: linear-gradient(0deg, rgba(22,22,22,0.5) 0%, rgba(22,22,22,0) 100%);  }
	.post-container .thumbnail { width: 105%; height: 105%; left: -5px; top: -5px; }
	.post-container .detail-content { padding-top: 40px; padding-bottom: 40px; }
	.section.socials button { font-size: 20px; margin-left: 10px; }
	.section.socials input { width: 200px; font-size: 20px; }
	.blog-btn-section { justify-content: center; margin-top: 40px;}
	#view-all-blog { margin: 40px 0 80px 0; }
	.about-container { padding: 20px 0 0 0; }
	.section.divider { display: none; }
	.about-container { text-align: center; }
	.about-container span { width: 100%;}
	.about-container .image-container { width: 100%; margin: 0 auto; }
	.section.about.right .about-container .image-container { width: 100%; margin: 0 auto; }

	.section h2 { font-size: 20px; }
	.section h2 span.larger { display: block; width: 100%; font-size: 35px; margin: 0; }
	.section h2 span.larger::before, .section h2 span.larger::after { --icon-size: 25px; top: 0; }

	.blog .post-list { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px 200px; column-gap: 10px; row-gap: 10px; }
	.blog .post-list .post-container { min-width: auto;}
	.blog .post-container .detail-content { padding: 20px; }
	.blog .pagination .step-links { width: 100%; justify-content: space-between; }

	.blog-post-container { width: calc(var(--section-width) - 2 * var(--screen-padding)); }
	.blog-post-container .banner { height: 350px; }
	.blog-post-container .inner { padding: 40px 30px; }
	.blog-post-container .title { font-size: 30px; }
	.blog-post-container blockquote { margin: 0; }
	
}