/* TODO: MAKE SITE MORE 4K FRIENDLY, PARTICULARLY THE ABOUT US SECTIOn */
/* TODO: Make scaling not a hack job */

html {
	font-size: min(1.15em, 4vw); /* This is here instead of 'body' so rem can function */
	background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85)), url("downtown-bg.webp") center / cover;
	background-color: rgb(43, 29, 95);
	scrollbar-color: #2c167e #090222; /* TODO: Make this not firefox exclusive */
	overflow-x: hidden; /* The navigation tabs extend the site horizontally because of the transition offset, so do this */
	position: relative;
}

body { 
	margin: 0; /* Stop this from starting with default margins */
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} 

main {
	width: 70%;
	max-width: 1344px; /*70% of a 1920 width*/
    margin: 0 auto 150px;
	text-align: center;
}

/* Site theming */
h1 {
    color: #2A97F9;
    font-weight: bold;
    text-align: center;
    font-size: 3rem;
	margin: 0;
}

h2 {
    color: #2A97F9;
    font-weight: bold;
    font-weight: normal;
    text-align: center;
    font-size: 2rem;
}

.generic-box {
	background-color: #030113;
	border: 5px solid #1f1850;
	border-radius: 10px;
	border-top: 0;
	padding: 20px;
	margin: 1rem auto;
}

.generic-box-content img, .generic-box-content video {
	border: 5px double #1f1850;
	box-sizing: border-box;
}

em.nameMorgan {color:#78c997 }
em.nameFarelie { color:#ee9ed3 }

/* Notice */
.under-construction {
	display: block;
	border-width: 2px;
	border-style: solid;
	border-right-color: rgb(34, 5, 5);
	border-bottom-color: rgb(34, 5, 5);
	border-left-color: rgb(173, 106, 106);
	border-top-color: rgb(173, 106, 106);
	background-color: rgb(75, 18, 18);
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	margin: 10px auto 0;
	width: 90%;
	max-width: 900px
}

.under-construction input {
	cursor: pointer;
}

.under-construction input[type=checkbox]:checked ~ .under-construction {
	display: none;
}


/* Exit Logo Static */

#logo {
	transform: translateX(-5px);
    width: 35vw;
	min-width: 260px;
	margin-top: 30px;
}


/* SITE NAVIGATION TABS

Switch to horizontal tabs ontop of the main element when it gets too narrow,
and also adjust the page accordingly.
TODO: Improve the horizontal layout, this is temporary because I'm so fucking fed up with css
TODO: Improve how the tabs work in general so it's not a scaling wreck.

	Horizontal */
@media only screen and (max-width: 945px) {
	#site-navigation {
		display: flex;
		justify-content: center;
		width: 90%;
		margin: 0 auto 30px;
        flex-direction: column;
	}
	#site-navigation a {
		position: relative;
		font-size: 1rem;
		height: 30px;
		background-color: #00000062;
		text-align: center;
		padding: 0 10px;
		top: 50%;
	}
	#site-navigation a:hover { 
		background-color: #58585862;
	}

	/* Page adjusting */
	main { width: 95%; }
}
/* Vertical */
@media only screen and (min-width: 946px) {
	#site-navigation {
		position: sticky; /* TODO: find out why this fucks up when set to fixed */
		z-index: 10000;
		top: 200px;
	}

	#site-navigation a {
		float: right;
		clear: right;
		padding: 15px 15px 15px 35px; /* The 15px on the right padding is to compensate for the translate funciton */
		width: 10%;
		margin: 10px 0;
		font-size: min(1rem, 1.3vw);
		background: transparent url("img/png/site_tab.png") left / cover;
		transition-property: transform;
		transition-duration: 100ms;
		transform: translate(10px, 0);
	}
	#site-navigation a:hover { transform: translate(0, 0); }
}

#site-navigation a:visited, #site-navigation a:link, #site-navigation a { 
	color: white; 
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-weight: bold;
	text-decoration: none;
}

.this-page, .this-page:visited, .this-page:hover { color:#fdff8e; }


/* Social Links */

#social-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 250px;
	margin: 0 auto;
	gap: 15px;
}

#social-links img {
	display: block;
	object-fit: fill;
	height: 100%;
	width: 100%;
	opacity: 0.2;
	transition: all 100ms ease-in-out;
}
#social-links img:hover {
	opacity: 1;
}


/* Footer */

footer {
	text-align: center;
}

footer p {
	margin: 10px 0;
	color: grey;
}

footer p a { color: grey; }
footer p a:hover { color: white; }


/* CLICKABLES */

/* Cavemanon Logo button */
.cave-button {
	position: absolute;
	text-align: right;
	bottom: 80px;
	right: 3vw;
}

.cave-button a img {
    transition: all 100ms ease-in-out;
    opacity: 0.2;
	width: 15vw;
	max-width: 175px;
}

.cave-button a img:hover {
    opacity: 1;
    transform: scale(1.1);
}

@media only screen and (max-width: 700px) {
	.cave-button { display: none; }
}


/* Generic big button */
.generic_button {
	margin-top: 40px;
}

.generic_button a {
    background-color: #241a5e;
	border-radius: 10px;
    color: white;
    font-size: 21px;
    padding: 10px;
    text-decoration-line: none;
    width: 15vw;
	max-width: 200px;
}

.generic_button a:hover {
    color: #725fe2;
	background-color: #110a3b;
}


/* Generic hover functionality */
.generic-hover img { transition: all 100ms; }
.generic-hover img:hover { 
	transform: scale(1.05);
	border-color: rgb(111, 188, 214)
}


/* Translation */
.language-select {
	display: flex;
	flex-direction: row;
	gap: 5px;
	justify-content: center
}

.language-select a {
	display: block;
	padding: 0.5rem;
	background: #112928;
	color: white;
	text-decoration: none;
	border-radius: 10px;
	text-align: center;
	font-size: 12pt;
}

/* 
=============================

		Main Page

=============================
*/


/* Exit Logo Animation */
@keyframes logo_kino_anim_rotate {
    0% { transform: rotate(-90deg) translateX(-100px); }
	30% { transform: rotate(7deg) translateX(-5px); }
	50% { transform: rotate(-3deg) translateX(-5px); }
	70% { transform: rotate(1deg) translateX(-5px); }
	90% { transform: rotate(-0.5deg) translateX(-5px); }
	100% { transform: rotate(0deg) translateX(-5px); }
}

.logo-kino {
    animation-name: logo_kino_anim_rotate;
    animation-duration: 1.0s;
    animation-timing-function: ease;
	animation-delay: 0.5s;
	animation-fill-mode: backwards;
	transform-origin: 0% 100%;
}

/* Cool hover functionalities */
.screenshots-hover img { transition: all 100ms; }
.screenshots-hover img:hover { transform: scale(1.1); }


/* Trailer caption */

#vidcaption {
	max-width: 940px;
	padding: 5px;
	margin: 0 auto 40px;
}
#vidcaption .generic-box-content video {
	border: none;
}
#vidcaption h2, #vidcaption p { margin: 0; }
#vidcaption video {
	max-width: 100%;
}


/*  Morgan caption 

	Vertically centered text at highest width, because apparently you can't do that with the wrapping behavior */
@media only screen and (min-width: 1420px) {
	#morgancaption { 
		display: flex; 
		align-items: center;
	}
	#morgancaption figcaption {
		order: 0
	}
	#morgancaption div.generic-box-content {
		float: none;
		order: 1
	}
}

/* Text wrapping around image */
@media only screen and (min-width: 761px) {
	#morgancaption::after { /*CSS Hack to make sure the image doesn't overflow out of the container */
		content: "";
		clear: both;
		display: table;
	}
	#morgancaption figcaption { text-align: left; }
	#morgancaption div.generic-box-content {
		float: right;
		margin-left: 20px;
		margin-bottom: 10px;
	}
	#morgancaption div.generic-box-content img {
		width: 40vw;
		max-width: 480px;
	}
}

/* Image ontop and text on the bottom at lowest width */
@media only screen and (max-width: 760px) {
	#morgancaption figcaption {
		text-align: center;
		margin: auto 0;
	}
	#morgancaption div.generic-box-content img {
		width: 480px;
		margin-bottom: 10px;
	}
	#morgancaption div.generic-box-content { margin-bottom: 10px; }
}

#morgancaption img {
	max-width: 100%;
}

/* Info squares */

#infosquares {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-evenly;
	gap: 20px;
}
#infosquares figure {
	max-width: 500px;
	flex: 1 1 285px;
}
#infosquares figcaption { margin-top: 10px; }
#infosquares img , #infosquares video {
	max-width: 100%;
}

/* Make sure the stupid squares stay big on at least 1920 displays */
@media only screen and (min-width: 1500px) { /* min-width value doesn't matter, just around here */
	#infosquares figure { flex-basis: 400px; }
}


/* Screenshots */

.gameplay-screenshots {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.gameplay-screenshots img {
	width: 30vw;
	max-width: 300px;
	flex-basis: 220px;
	margin: 10px 10px;
	border: 3px solid rgb(38, 140, 173);
	object-fit: scale-down;

	transition-property: transform;
    transition-duration: 100ms;
}
.gameplay-screenshots img:hover {
	transform: scale(1.1);
	border-color: rgb(111, 188, 214)
}



/* 
====================================

		Character page stuff

====================================
*/


.character-item {
    margin: 40px 0;
    padding: 20px;
	display: flex;
	align-items: center;
	min-height: 500px;
}

.character-item-portrait {
	/* max-width: 15vw;
	min-width: 15vw; */
	max-height: 100%;
	
	/* width: 50vw; */
	margin-right: 20px;
	margin-bottom: 10px;
}
.character-item-portrait img {
	/* max-width: 100%; */
	max-height: 400px;
	border: 5px double #1f1850;
	box-sizing: border-box;
}
.character-item-description {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.character-item-description p { 
	text-align: justify; 
	text-indent: 1rem;
	font-style: italic;
}
.character-item-description h1 {
	margin-top: 40px;
}
.character-item-description-text {
	display: flex;
}

.description-container {
	display:flex;
	flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.description-container p {
	margin-left: 30px;
	margin-right: 30px;
}

.description-right {
	border-left: 2px solid rgb(255, 255, 255);
	padding-left: 17px;
	margin-left: 15px;
	width: 50%;
}
.description-left {
	width: 50%;
	padding-left: 17px;
}


/* Me wake short descriptions thinner so that they appear "square" */
.small-description {
	width: 40%;
}

/* YES, THANK YOU CSS. I WANT YOU TO AFFECT THE IMAGE BORDER AS WELL BECAUSE YOU'RE JUST SO SMART
I ALSO DO WANT MYSERIOUS PADDING AROUND MY DIV ELEMENT THAT I CAN'T GET RID OF */
.coming-soon { border: 5px double #1f1850; }
.coming-soon img {
	filter: drop-shadow(0px 0px 5px white);
	border: none;
}

/* Phone stuff */
@media only screen and (max-width: 1024px) {
	.character-item{
		flex-direction: column;
	}
	.character-item-description-text{
		flex-direction: column;
		align-items: center;
	}
	.description-right {
		border-left: none;
		border-top: 2px solid rgb(255, 255, 255);
		padding-left: 0px;
		margin-left: 0px;
		padding-top: 30px;
		margin-top: 30px;
		width: 100%;
	}
	.description-left {
		width: 100%;
		padding-left: 0px;
	}
	.character-item-description h1 { margin-top: 10px; }
	.character-item-description p {
		text-indent: 0;
	}
	.small-description {
		width: 100%;
	}
}

/* 
=====================================

		Stats page stuff

=====================================
*/


.stat-box {
	min-height: 500px;
	background-size: cover;
	background-position: left;
	background-repeat: no-repeat;
	background-color: #030113;
	border: 5px solid #1f1850;
	border-radius: 10px;
	border-top: 0;
	padding: 20px;
	margin: 40px 0;
	justify-content: flex-end;
	text-shadow: #000 -1px 2px 1px,#000 -1px 2px 1px,#000 -1px 2px 1px,#000 -1px 2px 1px,#000 -1px 2px 1px;
}

.stat-container{
	width: 70%;
}

.quinquivirs{
	background-image: url("./img/png/stats/h/quinquivirs.webp");
}

.imminence{
	background-image: url("./img/png/stats/h/imminence.webp");
}

.volksgeist{
	background-image: url("./img/png/stats/h/volksgeist.webp");
}

.faith{
	background-image: url("./img/png/stats/h/faith.webp");
}

.second-self{
	background-image: url("./img/png/stats/h/secondself.webp");
}

.gnosis {
	background-image: url("./img/png/stats/h/gnosis.webp");
}

.heroics{
	background-image: url("./img/png/stats/h/heroics.webp");
}

.social-accounting{
	background-image: url("./img/png/stats/h/socialaccounting.webp");
}

.vigor{
	background-image: url("./img/png/stats/h/vigor.webp");
}

.black-text {
	color:black;
	text-shadow: white -1px 2px 1px
}

.stat-box h2 {
	text-shadow: none;
}

@media only screen and (max-width: 1024px) {
	.quinquivirs{
		background-image: url("./img/png/stats/v/quinquivirs.webp");
	}
	
	.imminence{
		background-image: url("./img/png/stats/v/imminence.webp");
	}
	
	.volksgeist{
		background-image: url("./img/png/stats/v/volksgeist.webp");
	}
	
	.faith{
		background-image: url("./img/png/stats/v/faith.webp");
	}
	
	.second-self{
		background-image: url("./img/png/stats/v/secondself.webp");
	}
	
	.gnosis {
		background-image: url("./img/png/stats/v/gnosis.webp");
	}
	
	.heroics{
		background-image: url("./img/png/stats/v/heroics.webp");
	}
	
	.social-accounting{
		background-image: url("./img/png/stats/v/socialaccounting.webp");
	}
	
	.vigor{
		background-image: url("./img/png/stats/v/vigor.webp");
	}

	.stat-box {
		background-position: bottom center;
	}

	.stat-container{
		width: 100%;
		padding-bottom: 100vw;
	}
	
}

/* 
=====================================

		Vignette Games page stuff

=====================================
*/

.vgames-item {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.vgames-item h2 {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.vgames-title img {
	float: right;
	width: 200px;
	margin-bottom: 20px;
	border: 5px solid #1f1850;
	border-radius: 15px;
	border-top: 0;
}

.vgames-item-media {
	display: flex;
	flex-flow: row wrap;
	background-color: #110841;
}

.vgames-item-meta {
	padding: 10px;
}
.vgames-item-images {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	width: 600px;
}
.vgames-item-images img {
	width: 100%;
	max-width: 250px;
	margin: 10px 10px;
	border: 3px solid rgb(38, 140, 173);

	transition-property: transform;
    transition-duration: 100ms;
}
.vgames-item-images img:hover {
	transform: scale(1.1);
	border-color: rgb(111, 188, 214)
}


.link-button {
	display: block;
	background-color: #594f8f;
	box-shadow: 0px 0px 15px #00000077 inset;
	border-color: #594f8f;
	border-radius: 100px;
}

.link-button-icon {
	display: inline-block;
	width: 48px;
    height: 48px;
    vertical-align: middle;
}
.link-button-icon img {
	display: block;
	width: 100%;
    max-height: 100%;
}

/* 
=====================================

		Download stuff

=====================================
*/


.download-button {
	display: flex;
	justify-content: center;
	padding: 1.2rem;
	width: 20vw;
	color: white;
	text-decoration: none;
	border-radius: 10px;
	text-align: center;
	font-size: 20pt;
	background: #241a5e;
  }

.download-button:hover{
	background: #110a3b;
}

.download-container{
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
	margin-top: 50px;
}

.download-link-container {
    display: flex;
    margin: 0;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.download-link-system-links {
    display: flex;
    margin: 10px;
    justify-content: left;
    flex-direction: column;
    flex-wrap: wrap;
    background: #060510;
}

.download-link-system {
    background: #060510;
    color: rgb(217, 255, 237);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    padding: 8px;
    font-size: 15pt;
    min-width: 48px;
    min-height: 30px;
    height: 30px;
    text-decoration: none;
}

.download-link-sub-system {
    background: #0a081c;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    padding: 6px;
    font-size: 13pt;
    min-width: 48px;
    height: 28px;
    text-decoration: none;
}

.download-link-system-links {
    display: flex;
    margin: auto;
	max-width: 50vw;
	padding-top: 20px;
	padding-bottom: 20px;
    justify-content: left;
    flex-direction: column;
    flex-wrap: wrap;
    background: #1a1738;
}

.download-link-sub-system-links-container {
    display: flex;
    flex-direction: row;
	max-width: 50vw;
}

.download-link-sub-system-links {
    display: flex;
    margin: 10px auto 10px auto;
    justify-content: left;
    flex-direction: column;
    flex-wrap: wrap;
    background: #130f2b;
	/* min-height: 250px; */
	/* padding: 20px; */
}

.download-link-system-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 0 0 5px;
    padding: 0 0 5px 0; /* wtf why won't it just center and I don't have to resort to this */
    text-align: right;
    vertical-align: middle;
}

.download-link-sub-system span {
    margin-right: 10px;
}

.download-link-system-icon img {
    display: block;
    max-height: 100%;
    pointer-events: none;
}

.download-links {
    display: flex;
    flex-direction: row;
}

.download-link-container{
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 150px;
	padding-left: 20px;
	padding-right: 20px;
}


.download-link {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    margin: 0.8rem auto 0.8rem auto;
    padding: 8px;
    font-size: 18pt;
    min-width: 48px;
    width: 200px;
    min-height: 48px;
    height: 48px;
    text-decoration: none;
    border-radius: 100px;
    color: white;
    background: #241a5e;

	justify-content: center;
	align-items: center;
	gap: 10px;
}

.download-link:hover {
    background: #110a3b;
}
.download-link-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 0 0 10px;
    padding: 0;
    vertical-align: middle;
}
.download-link-icon img {
    display: block;
    width: 100%;
    max-height: 100%;
    pointer-events: none;
}

.download-desc{
	margin: 5rem;
}


/* .download-link-div{
	display: flex;

} */

@media only screen and (max-width: 1538px) {
	.download-button {
		font-size: 15pt;
		width: 50vw;
	  }
	.download-links {
        flex-direction: column;
    }
    .download-link-sub-system-links-container {
        flex-direction: column;
    }

	.download-link-system-links{
		width: fit-content;
	}

}

/*for source code download button*/
.navigation-button {
    display: block;
    padding: 0.6rem;
    background: #241a5e;
    width: 200px;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    font-size: 16pt;
}
.navigation-button:hover {
    background: #110a3b;
}

.centered-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}