/* General Settings */

:root {
	/* Colors */
	--light-blue: rgb(0, 192, 255);
	--light-blue-hover: rgb(0, 224, 255);
	--light-green: rgb(0, 192, 0);
	--dark-green: rgb(0, 128, 0);
	--dark-gray: rgb(96, 96, 96);
	--light-gray: rgb(224, 224, 224);
	
	/* Variables for Responsiveness */
	--gallery-grid-columns: repeat(3, 1fr);
	--gallery-grid-columns-screenshots: repeat(8, 1fr);
	--video-gallery-columns: repeat(3, 1fr);
	--trailer-width: 60%;
	--trailer-padding-bottom: 56.25%; /* 56.25% because the video trailer's aspect ratio is 16:9, so 100 / 16 * 9 == 56.25 */
	--screenshot-wrapper-header: calc(0.7em + 1vw);
	
	/* Border radius */
	--full-rounded: 99999px;
}

@font-face {
	font-family: Factor;
	src: url('factor.ttf');
}

html {
	font-size: 16px;
}

body {
	background: white;
	color: var(--dark-gray);
	padding: 0;
	margin: 0;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	text-align: center;
}

/* Symon Jack Header */

div#symon-jack-header h1 {
	font-family: Factor;
	font-size: calc(0.8em + 3vw);
	color: var(--light-blue);
	margin: 0.5em 0;
	font-weight: normal;
}

/* Main Navigation */

nav ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

nav li:nth-child(odd) {
	background: var(--light-gray);
}

nav li:nth-child(even) {
	background: rgb(240, 240, 240);
}

nav a {
	display: block;
	color: black;
	text-decoration: none;
	padding: 0.5em;
	font-size: calc(0.8em + 0.3vw);
}

nav a:hover {
	background: rgb(128, 128, 128);
	color: white;
}

/* Page Header */

#page-header h1, h2 {
	font-size: calc(0.8em + 2vw);
	margin-bottom: 0.5em;
}

#page-header p {
	padding: 0;
	margin: 1em auto;
	font-size: calc(0.7em + 1vw);
	width: 80%;
}

.contact-section {
	color: rgb(128, 128, 128);
	background-color: rgb(32, 32, 32);
	padding: 1em;
}

/* Page Content */

#page-content {
	width: 95%;
	margin: auto;
}

#page-content > h2 {
	background: var(--light-gray);
	border-radius: 1000em;
	padding: 0.25em;
	font-size: calc(0.8em + 2vw);
	margin: 1em auto;
}

#page-content p {
	font-size: calc(0.7em + 1vw);
	width: 80%;
	margin: 1em auto;
}

#game-description p {
	font-size: calc(0.7em + 0.5vw);
	
	margin: 1em auto;
}

p a {
	color: var(--light-blue);
}

p a:hover {
	text-decoration: none;
}

a#button {
	display: inline-block;
	font-size: var(--screenshot-wrapper-header);
	background: var(--light-blue);
	color: white;
	text-decoration: none;
	padding: 1em;
	margin: 1em auto;
	border-radius: 8px;
}

a#button:hover {
	background: var(--light-blue-hover);
}

a#whatsapp-button {
	display: inline-block;
	font-size: var(--screenshot-wrapper-header);
	background: var(--light-green);
	color: white;
	text-decoration: none;
	padding: 1em;
	margin: 1em auto;
	border-radius: var(--full-rounded);
	border: solid 0.25em white;
}

a#whatsapp-button:hover {
	background: rgb(0, 224, 0);
}

main h2 {
	margin-top: 2em;
}

.price {
	color: rgb(0, 192, 0);
}

.sub-price {
	
}

/* Responsive Youtube Video */

/* trailer-wrapper is needed to centralize the trailer */
.trailer-wrapper {
	width: var(--trailer-width);
	margin: auto;
}

.responsive-youtube-video {
	position: relative;
	width: 100%;
	padding-bottom: var(--trailer-padding-bottom);
	height: 0;
}

.responsive-youtube-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Responsive Gallery Grids */

.gallery-grid {
	display: grid;
	grid-template-columns: var(--gallery-grid-columns);
	grid-gap: 1em;
	margin: 1em;
}

.gallery-grid-narrators {
	/*display: grid;
	grid-template-columns: 1;*/
	width: 100%;
	max-width: 640px;
	margin: auto;
}

.gallery-grid-narrators img {
	width: 100%;
	max-width: 640px;
	height: auto;
	margin: auto;
}

.gallery-grid-screenshots {
	display: grid;
	grid-template-columns: var(--gallery-grid-columns-screenshots);
	grid-gap: 1em;
	margin: 1em auto;
}

.gallery-grid img {
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: auto;
	
}

.video-gallery-grid {
	display: grid;
	grid-template-columns: var(--video-gallery-columns);
	grid-gap: 1em;
	margin: 1em;
}

.screenshot {
	
}

a.screenshot-wrapper {
	text-decoration: none;
	color: var(--dark-gray);
}

a.screenshot-wrapper h2{
	font-size: var(--screenshot-wrapper-header);
	margin: 0;
}

/* Footer */

footer {
	/*margin-top: 3em;*/
	padding: 1em;
	font-size: var(--screenshot-wrapper-header);
	vertical-align: bottom;
}

/* Privacy Policy */

section#privacy-policy {
	width: 70%;
	margin: 1em auto;
	text-align: left;
}

section#privacy-policy p {
	font-size: calc(0.7em + 0.5vw);
}

section#privacy-policy h2 {
	font-size: calc(0.7em + 1vw);
	margin: 2em auto 0 auto;
}

/* Media Queries */

@media (max-width: 680px) {
	:root {
		--gallery-grid-columns: 1fr;
		--video-gallery-columns: 1fr;
		--trailer-width: 90%;
		--trailer-height: 100%;
		--screenshot-wrapper-header: calc(0.7em + 2vw);
	}
}