/*! echoraeume css / 20200530 / C. Hausch */

@import url('./normalize.css');
@import url('./fonts/firacode/firacode.css');

/* global stuff */

:root {
	font-size: 16px;
	--color-bg-main: #ff5d5d;
	--color-fg-main: #ffffff;
	--color-bg-dark: #1a1a1a;
	--color-fg-dark: #666666;
	--color-bg: var(--color-bg-main);
	--color-fg: var(--color-fg-main);
	--font-body: "Fira Code", monospace;
	--font-hdg: "Fira Code", monospace;
	--fontSize: 2rem;
	--textMargin: calc(0.2 * var(--fontSize));
	--lineHeight: calc(1.1 * var(--fontSize));

	/* viewport */
	--vpWidth: 100vw;
	--vpHeight: 100vh;

	/* default values for mobile layout */
	--borderWidth: 3px;
	--gutter: 1.5rem;
	--gutterHalf: calc( var(--gutter) * 0.5);

	/* calculating aspect ratio for video */
	--ratioA: 16;
	--ratioB: 9;
	--factor: calc(var(--ratioB) / var(--ratioA));

	/*  calculating the video height: */
	--widthMinusBorder: calc( var(--vpWidth) - var(--borderWidth) );
	--videoWidth2Col: calc( var(--widthMinusBorder) / 2 );
	--videoWidth3Col: calc( ( var(--widthMinusBorder) / 3 ) * 2);
	--videoWidth5Col: calc( ( var(--widthMinusBorder) / 5 ) * 3);
	--videoWidth7Col: calc( ( var(--widthMinusBorder) / 7 ) * 4);
	--videoHeight1Col: calc( var(--vpWidth) * var(--factor));
	--videoHeight2Col: calc( var(--videoWidth2Col) * var(--factor));
	--videoHeight3Col: calc( var(--videoWidth3Col) * var(--factor));
	--videoHeight5Col: calc( var(--videoWidth5Col) * var(--factor));
	--videoHeight7Col: calc( var(--videoWidth7Col) * var(--factor));

	/* calculate desktop layout */
	--row1: calc(var(--gutter) * 4);
	--row1Desktop: calc(var(--gutter) * 5);
	--row1Mobile: calc(var(--gutter) * 6);
}

/* general stuff */

html, body {
	background-color: var(--color-fg);
	font-family: var(--font-body);
	color: var(--color-fg);
	margin: 0;
	width: 100%;
	height: 100%;
}

p {
	font-size: calc(var(--fontSize) * 0.8);
	line-height: var(--lineHeight);
	hyphens: auto;
	font-weight: 100;
	margin-top: 0;
	margin-bottom: 0.8rem;
}

a {
	color: var(--color-fg);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: var(--borderWidth);
	text-underline-position:from-font;
}

a:hover {
	text-decoration-style: solid;
}

.link::before {
	content:"\005B";
}

.link::after {
	content:"\005D";
}

ul {
	padding: 0;
	margin: 0;
}

li {
	list-style: none;
	padding: 0;
	margin-bottom: var(--textMargin);
	font-size: calc(var(--fontSize) * 0.8);
}

h1, h2, h3, h4 {
	font-family: var(--font-hdg);
}

h1 {
	margin: 0;
	font-family: "Futura Std";
	font-weight: 100;
	font-size: calc(var(--fontSize) * 1.5);
}

h3 {
	font-size: calc(var(--fontSize) * 1.15);
	margin: 0;
}

h4 {
	font-size: var(--fontSize);
}
nav, .stage, .info, .fill {
	background-color: var(--color-bg);
}

.hidden {
	display: none;
}

.container {
	display: grid;
	grid-template-columns: var(--vpWidth);
	grid-template-rows: var(--row1Mobile) var(--videoHeight1Col) min-content min-content auto;
	grid-auto-flow: column;
	grid-gap: var(--borderWidth);
	width: var(--vpWidth);
	min-height: 100vh;
}

.menu{
	display: flex;
	flex-direction: row;
}

.logo {
	height: calc( 4 * var(--gutter));
}

.logo-dark, .logotext-dark {
	filter: brightness(40%);
}

.logotext {
	display: none;
}

.logotext-box {
	display: flex;
	align-items: flex-end;
}

.menu ul {
	display: flex;
	flex-direction: column;
	padding: 0 calc(0.5 * var(--gutter));
	margin: 0;
	align-self: flex-end;
	align-items: flex-end;
	flex-grow: 1;
}

.menu li {
	margin-bottom: 0;
	font-family: var(--font-hdg);
}

.menu li > ul {
	display: flex;
	flex-direction: row;
}

.menu li > ul > li {
	font-size: calc(var(--fontSize) * 0.8);
	font-weight: 400;
}

.info {
	text-align: right;
}

.meta {
	height: 100%;
	overflow: hidden;
	display: grid;
	grid-gap: var(--borderWidth);
}

.stage {
	height: var(--videoHeight1Col);
	padding: 0;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	outline-width: var(--borderWidth);
	outline-style: solid;
}

.fill {
	display: block;
	margin: 0;
	padding: 0;
	min-height: 0;
	max-height: 100%;
	height: 100%;
}

.text-content {
	padding: var(--gutter);
}


nav {
	padding: var(--gutter);
}

.tab {
	background-color: var(--color-bg);
	overflow: hidden;

}

.tab input {
  display: none;
}

.tab label {
  display: block;
  cursor: pointer;
}

.tab h3 {
	padding:  var(--gutterHalf) var(--gutter) var(--gutterHalf) var(--gutter);
}

.tab-content {
	overflow: hidden;
	display: none;
	padding: var(--gutter);
}

.tab input:checked ~ .tab-content {
	display: block;
	overflow: auto;
	height: 100%;
}


.tab-content input {
	display: block;
}

.calendar {
	display: grid;
	grid-template-columns: auto auto;
	grid-auto-rows: auto;
}

.chat-name {
	font-weight: bold;
}

.calendar-date {
	font-size: calc(var(--fontSize) * 0.8);
	font-weight: bolder;
}

.calendar-entry {
	font-size: calc(var(--fontSize) * 0.8);
	margin-block-end: 1.2rem;
	margin-left: 1rem;
}

@media only screen and (min-width: 600px) and (min-aspect-ratio: 10/9) {

	:root {
		--gutter: 1.5rem;
		--borderWidth: 1.5px;
		--fontSize: 1.2rem;
	}

	.container {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: var(--row1) var(--videoHeight3Col) auto;
		height: var(--vpHeight);
	}

	.logo {
		height: calc( 2 * var(--gutter));
	}

	.info {
		overflow: auto;
	}

	.meta {
		grid-row: span 3;
	}

	.calendar {
		display: grid;
		grid-template-columns: 1fr;
	}

	.calendar-entry {
		margin-block-end: 1rem;
		margin-left: 0;
	}

	.fill {
		display: none;
	}

	.tab input:checked ~ .tab-content {
		--tabHdgHeight: calc( var(--fontSize) * 1.3225 );
		--tabHeight: calc( var(--tabHdgHeight) + var(--gutter) );
		--tabHght5x: calc( var(--tabHeight) * 5 );
		--tabBorders: calc( var(--borderWidth) * 4 );
		--tabHeightTaken: calc( var(--tabHght5x) + var(--tabBorders) );
		height: calc( var(--vpHeight) - var(--tabHeightTaken) - (var(--gutter) * 2) );
	}

}

@media (max-resolution: 96dpi) and (orientation: portrait) {
	:root {
		--fontSize: 1.2rem;
	}
}

@media only screen and (min-width: 950px) and (orientation: landscape) {

	.logotext-box {
		flex-grow: 1;
		align-self: flex-end;
	}

	.logotext {
		display: block;
		height: 1.5rem;
		margin-left: 1rem;
		margin-bottom: calc(var(--gutter) * 0.27);
	}

}

@media only screen and (min-width: 1280px) and (orientation: landscape) {

	:root {
		--gutter: 1.5rem;
		--fontSize: 1.35rem;
		--borderWidth: 2px;
	}

	.container {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: var(--row1Desktop) var(--videoHeight3Col) auto;
	}

	.logo {
		height: calc( 3 * var(--gutter));
	}

	.logotext {
		height: 2.5rem;
		margin-left: 1.5rem;
		margin-bottom: calc(var(--gutter) * 0.3333);
	}

}

@media only screen and (min-aspect-ratio: 16/9) and (orientation: landscape) {
	.container {
		grid-template-columns: 3fr 2fr;
		grid-template-rows: var(--row1Desktop) var(--videoHeight5Col) auto;
	}
}

@media only screen and (min-aspect-ratio: 2/1) and (orientation: landscape) {
	.container {
		grid-template-columns: 4fr 3fr;
		grid-template-rows: var(--row1Desktop) var(--videoHeight7Col) auto;
	}
}

@media only screen and (min-aspect-ratio: 9/4) and (orientation: landscape) {
	.container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: var(--row1Desktop) var(--videoHeight2Col) auto;
	}
}