/* +++++++++++++++++ STYLE.JS +++++++++++++++++ */

:root {
	--can-hover: 1; /* wether the device can easily hover (without holding down on an element */
	--width-default: 940;
	--scrollbar-width: 17px; /* gets overriden by js, if different */
	--content-padding: 45rem;
	--line-thickness: 5rem; 
	--jaw-anim-time: 0.3s; /* gets overridden by js */
	--jaw-anim-func: cubic-bezier(0.91, 1.24, 0.52, 0.99);
	
	--viewport-inner-width: calc(100vw - var(--scrollbar-width));
	--max-content-width: calc(var(--width-default) * 1px * var(--scale-step)); /* scale-step is calculated at the end of this file */
	--width: calc(min(var(--max-content-width), var(--viewport-inner-width)));
	--scale-px: calc(var(--width) / var(--width-default));
	
	/* Game Box */
	--toothLeftCornerX: 10%;
	--toothLeftCornerY: 10%;
	--toothRightCorner: 15%;
	
	/* Small Game gaps */
	--gap: 40rem;
	--remaining-half: calc((var(--width) - var(--gap)) / 2);
	
	--background-color: #2b2d3c;
	--line-color: #bfbfbf;
}

@font-face
{
    font-family: 'TAHOMA_0';
	src: local('Tahoma'),
      url('resources/font/TAHOMA_0.woff') format('woff'),
      url('resources/font/TAHOMA_0.ttf') format('truetype'),
	  url('resources/font/TAHOMA_0.eot?#') format('embedded-opentype');
	font-display: swap;
}
@font-face
{
    font-family: 'TAHOMAB0';
	src: local('Tahoma Bold'),
      url('resources/font/TAHOMAB0.woff') format('woff'),
      url('resources/font/TAHOMAB0.ttf') format('truetype'),
	  url('resources/font/TAHOMAB0.eot?#') format('embedded-opentype');
	font-display: swap;
}

/* GENERAL */
html {
	font-size: var(--scale-px);
}
body {
	font-size: 24rem;
	margin: 0;
    background-color: var(--background-color);
    /*background-image: linear-gradient(90deg, #000 0%, var(--background-color) 40% 60%, #000 100%);
    background-image: url(resources/background.png);*/
	background-size: 1903rem;
    background-position-x: 50%;
    font-family: 'TAHOMA_0', Fallback, sans-serif;
    color: #dddddd;
	overflow-y: hidden;
}

body.open {
	overflow-y: auto;
}

#main-container h1 {
	display: contents;
}

h2 {
	text-align: center;
    width: var(--current-width);
	font-weight: normal;
    margin-top: 120rem;
    /*font-family: 'TAHOMAB0';*/
}

/* a */
a {
    color: #3cd2ff;
}
a:hover {
	color: white;
}
a:active {
	color: black;
}

/* HELPER CLASSES */
.transform-center {
	margin-left: 50%;
	transform: translateX(-50%);
}

.content-narrow {
	padding: 0 var(--content-padding);
	--current-width: calc(var(--width) - var(--content-padding) * 2);
	--current-width_2: calc(var(--current-width) / 2);
}

.shadow {
	filter: drop-shadow(10rem 17rem 0rem #0004);
}

/* hover-block */
@media (hover: hover) {
	.shadow:has(.hover-block:hover) {
		filter: drop-shadow(3rem 5rem 0rem #0004);
	}
	.hover-block:hover {
		--line-color: #fff;
		color: #fff;
	}
}

.hide-link {
	text-decoration: none;
	color: white;
}

.current-width {
	width: var(--current-width);
}

.gradient-box {
	background-color: #272748;
    padding: 1.8em;
    /*background: radial-gradient(#4f4f87, #131334);*/
    background-position-y: -30rem;
}

.video-container > * {
	display: block;
	pointer-events: none;
}

.video-container > video {
	background-color: black;
	/* defining both width and height fixes firefox bug, where the size could be different for a frame when loading the video */
	width: 100%;
	height: 100%;
    position: relative;
}

/* TEETH */
.tooth-both {
    position: relative;
    margin-bottom: 30rem;
}
.tooth-both > * {
	width: calc(var(--remaining-half));
	display: inline-block;
}

.tooth-both > .left {
    vertical-align: top; /* removes ominous margin at the bottom of the element containing the image */
}

.tooth-both > .right {
	position: absolute;
	right: 0;
}

.tooth-right {
    display: block;
    direction: rtl;
    margin-left: auto;
    width: 0;
}

.tooth {
	display: block;
}

.tooth.right {
    direction: rtl;
}

.tooth > * {
	width: var(--current-width);
}

/* this fixes that the mine instinct tooth lies over the find you tooth. This would prevent hoverability for find you */
.clip-mine-instinct {
   clip-path: polygon(120% -30%, 0% 20%, 0% 80%, 120% 120%);
   -webkit-clip-path: polygon(120% -30%, 0% 20%, 0% 80%, 120% 120%);
}

/* incisor */

.incisor {
    display: block;
	/*background: var(--line-color);*/ /* disabled borders */
	padding: var(--line-thickness);
}

.incisor img,
.incisor video {
    vertical-align: top; /* removes ominous margin at the bottom of the element containing the image */
	width: 100%;
	min-height: 380rem;
    background-color: var(--background-color);
}

.left .incisor,
.left .incisor > * {
	clip-path: polygon(0% 0%, 100% 30%, 100% 70%, 0% 100%);
	-webkit-clip-path: polygon(0% 0%, 100% 30%, 100% 70%, 0% 100%);
}
.right .incisor,
.right .incisor > * {
	clip-path: polygon(100% 0%, 0% 30%, 0% 70%, 100% 100%);
	-webkit-clip-path: polygon(100% 0%, 0% 30%, 0% 70%, 100% 100%);
}

.before-incisor {
    display: inline-block;
}

.left .before-incisor {
    transform: rotate(7.8deg);
}
.right .before-incisor {
    transform: rotate(-7.8deg);
}



/* CONTENT */
#main-container {
    height: 100vh;
}
#main {
	padding-top: 30rem;
	width: var(--width); /* jaw closed width */
}

#main.open {
	width: calc(100% + var(--width) * 2 + 4rem /*puffer*/);
	opacity: 0;
}

#main.transition {
    transition: width var(--jaw-anim-time) var(--jaw-anim-func),
		opacity var(--jaw-anim-time) var(--jaw-anim-func);
}

/* logo */
#logo-tooth {
    margin-bottom: -6rem;
}

#logo-tooth > * {
	text-align: center;
}

#logo {
    min-height: 213rem;
	height: 213rem;
}

/* link icons */
#link-icons {
    margin-bottom: -55rem;
    text-align: right;
    transform: rotate(7.8deg);
	z-index: 10;
    position: relative;
}

.link-icon {
    display: contents;
}

.link-icon img {
    margin-left: 2rem;
    background-color: #fff;
    border-radius: 100%;
    padding: 0.2em;
    width: 1.6em;
    height: 1.6em;
}
.link-icon img:hover,
#find-you-link:hover #find-you-steam {
	filter: drop-shadow(0 0 3rem #fff);
}

#link-icons img {
	transform: rotate(-7.8deg);
}

#find-you-icons {
	position: absolute;
	left: var(--current-width);
    padding: 10rem;
	top: 50%;
    transform: translateY(-50%) translateX(-100%);
	pointer-events: none;
    background: none;
	display: flex;
}
#find-you-icons img {
	background: none;
	width: 2em;
	height: 2em;
}

/* mouse hint */
#mouse-hint > * {
	text-align: center;
    color: #ddd;
}
#mouse-hint img {
	width: 1.1em;
    transform: translateY(11rem);
    margin-top: -100%;
    padding: 0 5rem;
}
#mouse-hint > * > * {
    direction: ltr;
}

/* slogan */
#slogan span {
	width: var(--width-default);
    text-align: center;
    display: block;
    margin-top: -10rem;
    line-height: 1.6em;
    margin-bottom: 20rem;
    letter-spacing: 1rem;
    word-spacing: 1em;
}

/* game title */
.game-title {
	display: block;
    white-space: nowrap;
    padding-bottom: 10rem; /* make seamless link transition from title to game box */
    margin-bottom: -18rem; /* position a little bit lower */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.left .game-title {
	transform: rotate(-4.8deg) translateX(-15rem)/* to center title over game box */;
}
.right .game-title {
	transform: rotate(4.8deg) translateX(15rem)/* to center title over game box */;
}

/* game cover box */
.game-cover-box {
    position: relative; /* for video position: absolute to work correctly */
    display: block;
    padding: 5rem;
    /*background: var(--line-color);*/ /* disabled borders */
	height: var(--imgHeightNarrowNew);
}
.game-cover-box > * {
	display: block;
}

.left .game-cover-box,
.left .game-cover-box > * {
	
	clip-path: polygon(calc(100% - var(--toothRightCorner)) 0%, 100% var(--toothRightCorner), 100% calc(100% - var(--toothRightCorner)), calc(100% - var(--toothRightCorner)) 100%, var(--toothLeftCornerX) calc(100% - var(--toothLeftCornerY)), 0% 50%, var(--toothLeftCornerX) var(--toothLeftCornerY));
	-webkit-clip-path: polygon(calc(100% - var(--toothRightCorner)) 0%, 100% var(--toothRightCorner), 100% calc(100% - var(--toothRightCorner)), calc(100% - var(--toothRightCorner)) 100%, var(--toothLeftCornerX) calc(100% - var(--toothLeftCornerY)), 0% 50%, var(--toothLeftCornerX) var(--toothLeftCornerY));
}
.right .game-cover-box,
.right .game-cover-box > * {
	clip-path: polygon(var(--toothRightCorner) 0%, 0% var(--toothRightCorner), 0% calc(100% - var(--toothRightCorner)), var(--toothRightCorner) 100%, calc(100% - var(--toothLeftCornerX)) calc(100% - var(--toothLeftCornerY)), 100% 50%, calc(100% - var(--toothLeftCornerX)) var(--toothLeftCornerY));
	-webkit-clip-path: polygon(var(--toothRightCorner) 0%, 0% var(--toothRightCorner), 0% calc(100% - var(--toothRightCorner)), var(--toothRightCorner) 100%, calc(100% - var(--toothLeftCornerX)) calc(100% - var(--toothLeftCornerY)), 100% 50%, calc(100% - var(--toothLeftCornerX)) var(--toothLeftCornerY));
}

.game-cover-small {
	width: 100%;
	min-height: 280rem;
	background-color: var(--background-color);
	display: block;
}

.small-game-link {
	display: contents;
}


/* team */
#team {
    display: grid;
    gap: 70rem 50rem;
    grid-template-columns: repeat(3, 1fr);
    max-width: var(--mainWidth); /* to make opening jaw work */
	padding-left: 150rem;
}

#team img {
    min-width: 100%; /* fill empty space if img isn't loaded yet */
    width: 100%;
    /*border: var(--line-thickness) solid var(--line-color);*/ /* disabled borders */
}

#team .member-name {
	text-align: center;
}

#team .member-name span {
	font-size: 0.8em;
}

/* making sure that the square takes up it's space, even when the image isn't loaded yet -> https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
#team img:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* focus */
#focus {
	direction: ltr; /* reset from tooth rtl */
	display: grid;
	gap: var(--line-thickness);
	grid-template-columns: repeat(2, 1fr);
    /*background-color: var(--line-color);*/ /* disabled borders */
    box-sizing: border-box;
    /*border: var(--line-thickness) solid var(--line-color);*/ /* disabled borders */
}

#focus img {
    height: 4.6em;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 1em;
}

#focus span {
	display: block;
    text-align: center;
}

#focus .heading {
    font-family: 'TAHOMAB0';
    margin-bottom: var(--line-thickness);
    font-size: 0.9em;
}

#focus .description {
	font-size: 0.8em;
}

/* me */
.box-container {
	/*border: var(--line-thickness) solid var(--line-color);*/ /* disabled borders */
    box-sizing: border-box;
    font-size: 0.9em;
}

#contact {
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-img {
	margin-left: 0.5em;
    transform: translateY(0.324164em);
    padding-bottom: 0.05em;
    border-bottom: 0.05em solid white;
    height: 0.92618em;
}
#contact .link-icon img {
    margin-left: 0.5em;
}

/* impressum */
#impressum {
    text-align: center;
	font-size: 0.8em;
	margin-top: 100rem;
    display: block;
	padding-bottom: 50rem;
}

/* GAME CONTAINER */
#game-container {
	position: absolute;
    left: 0;
    right: 0;
	z-index: -1;
	opacity: 0%;
	
	transition: opacity var(--jaw-anim-time) var(--jaw-anim-func);
}

#game-container.open {
	opacity: 100%;
}

#game-container.opened {
	z-index: 0;
}

/* GOT FUNDED */
#got-funded-container img {
	width: 100%;
}

#fff-logo {
	text-align: center;
	padding: 0 50rem 12rem 50rem;
}

/* TODO: main container pointer-events: none when jaw is open */



/* RESPONSIVE */

@media only screen
{
	@media (max-width: 2399px) { :root { --scale-step: 1; } }
	@media (min-width: 2400px) and (max-width: 3359px) { :root { --scale-step: 1.5; } }
	@media (min-width: 3360px) and (max-width: 4319px) { :root { --scale-step: 2; } }
	@media (min-width: 4320px) and (max-width: 5279px) { :root { --scale-step: 2.5; } }
	@media (min-width: 5280px) and (max-width: 6719px) { :root { --scale-step: 3; } }
	@media (min-width: 6720px) and (max-width: 8639px) { :root { --scale-step: 4; } }
	@media (min-width: 8640px) and (max-width: 10559px) { :root { --scale-step: 5; } }
	@media (min-width: 10560px) and (max-width: 12479px) { :root { --scale-step: 6; } }
	@media (min-width: 12480px) and (max-width: 14399px) { :root { --scale-step: 7; } }
	@media (min-width: 14400px) { :root { --scale-step: 8; } }

	/* MOBILE & TABLET */
	@media (max-width: 939px) { /* 940px comes from slightly less than half width of full hd res. was previously 550px */

		/* make font size a little bit smaller for some elements */
		#slogan {
			font-size: 0.9em;
		}

		#focus {
			grid-template-columns: repeat(1, 1fr);
		}
		
		/* make icons stack */
		#link-icons {
			transform: none;
			margin-bottom: -70rem;
		}
		#link-icons img {
			transform: none;
			display: block;
			margin-left: auto;
			margin-bottom: 0.5em;
		}
		
		.link-icon img {
			padding: 0.3em;
			width: 2.5em;
			height: 2.5em;
		}
		.link-icon img:hover,
		#find-you-link:hover #find-you-steam {
			filter: drop-shadow(0 0 6rem #fff);
		}
		
		#find-you-icons img {
			width: 3.1em;
			height: 3.1em;
		}
		
		.member-name {
			margin-top: 0.25em;
			margin-bottom: 0.5em;
		}
		
		#mouse-hint .before-incisor {
			font-size: 0.8em;
		}
	}

	/* MOBILE */
	@media (max-width: 599px) {
		body {
			font-size: 48rem;
		}
		
		/* make font size a little bit smaller for some elements */
		.game-title {
			font-size: 0.7em;
		}
		
		#team {
			grid-template-columns: repeat(2, 1fr);
		}
		
		/* make icons stack */
		#link-icons {
			margin-top: -380rem;
		}
		
		#logo-tooth > * {
			text-align: left;
		}
		
		#logo {
			margin-top: 60rem;
			min-height: 331rem;
			height: 331rem;
		}
	}

	/* TABLETS */
	@media (min-width: 600px) and (max-width: 939px) {
		body {
			font-size: 36rem;
		}
		
		/* make font size a little bit smaller for some elements */
		.game-title {
			font-size: 0.85em;
		}
		
		/* make icons stack */
		#link-icons {
			margin-top: -290rem;
		}
		
		#logo-tooth {
			padding-right: 2em; /* considering links */
		}
		
		#logo {
			margin-top: 30rem;
			min-height: 272rem;
			height: 272rem;
		}
		
		#find-you-steam {
			padding: 20rem;
		}
	}
	
	/* > TABLETS */
	@media (min-width: 940px) {
		#find-you-steam {
			padding: 20rem;
			width: 2em;
			height: 2em;
		}
	}
	
	
	/* < 3k */
	@media (max-width: 2399px) {
		#contact-img-478 {
			display: none;
		}
	}
	/* >= 3k */
	@media (min-width: 2400px) {
		#contact-img-240 {
			display: none;
		}
		.contact-img {
			transform: translateY(0.26em);
			height: 1em;
		}
	}
	
	@media (hover: none) {
		:root {
			--can-hover: 0;
			--scrollbar-width: 0px; /* gets overriden by js, if different */
		}
		.hide-no-hover {
			display: none;
		}
	}
}






/* +++++++++++++++++ GAME.CSS +++++++++++++++++ */
:root{
	--imgWidthNarrow: calc(440em / 24 / 0.8);
	--imgWidthWide: calc(850em / 24 / 0.8);
	--imgHeightNarrow: calc(280em/ 24 / 0.8);
	--imgHeightWide: calc(380em/ 24 / 0.8);
	--lineThickness: 0.2em;
	--totalWidthNarrow: calc(var(--imgWidthNarrow) + var(--lineThickness) * 2);
	--totalWidthWide: calc(var(--imgWidthWide) + var(--lineThickness) * 2);
	--imgHeightNarrowNew: 280rem;
}

#game-container {
	--contentWidth: var(--totalWidthNarrow);
	--imgWidth: var(--imgWidthNarrow);
	--imgHeight: var(--imgHeightNarrow);
}

#game-container.wide {
	--contentWidth: var(--totalWidthNarrow);
	--imgWidth: var(--imgWidthNarrow);
	--imgHeight: calc(var(--imgWidthNarrow) * 380 / 840);
}

#game-container #game {
	display: block;
	width: calc(var(--imgWidthNarrow) + var(--lineThickness) * 2);
	margin-left: auto;
	margin-right: auto;
}

#game-container h1, #game-container #genre {
    text-align: center;
}

#game-container {
	font-size: 0.8em; /* so that "Made in 3 days during ..." can be displayed in one line */
}

#game-container #genre {
	font-size: 1.3em;
}

#game-container #cover {
	border: var(--lineThickness) solid white;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: var(--imgWidth);
    height: var(--imgHeight);
    background-color: black;
}
#game-container.wide #cover {
	width: 
}

#game-container #cover video {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#game-container #cover img,
#game-container #cover video {
    width: 100%;
}

.js-enabled #game-container #cover > * {
    pointer-events: none;
}

#game-container img,
#game-container table {
    margin-left: auto;
    margin-right: auto;
}
#game-container img {
	display: block;
}

#game-container #download,
#game-container #browser {
	text-align: center;
}
#game-container #download,
#game-container #browser,
#game-container #credits {
	margin-top: 2em;
}

#game-container .download-icon {
	display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    height: 2.5em;
}

#game-container .download-icon:hover {
	opacity: 0.5;
}


#game-container #release {
	margin-top: 30rem;
	font-size: 0.8em;
	text-align: right;
}


#game-container table {
	width: 100%;
}

#game-container table,
#game-container th,
#game-container td {
  border-collapse: collapse;
}

#game-container td,
#game-container th {
	padding: 8rem;
}

#game-container th {
	text-align: left;
}

#game-container tr:nth-child(1) {
    border-bottom: 2rem solid #fff5;
}

#game-container tr:nth-child(2n + 3) {
	background-color: #fff2;
}

#game-container #game-back {
	outline: var(--lineThickness) solid white;
	position: fixed;
	top: 0;
    margin-top: 13.5em;
	margin-right: 45rem;
	right: calc(50% + var(--totalWidthNarrow) / 2);
	-webkit-clip-path: polygon(0% 50%, 25% 0%, 100% 0%, 100% 100%, 25% 100%);
	clip-path: polygon(0% 50%, 25% 0%, 100% 0%, 100% 100%, 25% 100%);
    background-color: white;
	padding: var(--lineThickness);
	padding-left: calc(var(--lineThickness) + 4rem);
}

#game-container.wide #game-back {
    margin-top: 11.3em;
}


#game-container #game-back > div {
	font-size: 2em;
}

@media only screen {
	
	/* MOBILE */
	@media (max-width: 599px) {
		#game-container #game-back {
			display: none;
		}
	}

	/* TABLETS */
	@media (min-width: 600px) and (max-width: 939px) {
		#game-container #game-back {
			right: auto;
			left: 0;
		}
		#game-container #game-back > div {
			font-size: 1em;
			padding-left: 30rem !important;
		}
	}
}


#game-container #game-back > div {
	padding: 10rem;
	padding-left: 50rem;
	-webkit-clip-path: polygon(0% 50%, 25% 0%, 100% 0%, 100% 100%, 25% 100%);
	clip-path: polygon(0% 50%, 25% 0%, 100% 0%, 100% 100%, 25% 100%);
	background-color: #222;
}