/* STYLE SHEET FOR "Entwicklungsgang der Angiospermen". */

/* Defining and importing the fonts. */
@font-face {
  font-family: "Archivo";
  src: url('fonts/archivo-nr.otf');
}

@font-face {
  font-family: "Fin";
  src: url('fonts/FinSerifDisplay-Bold.ttf');
}

/* Candidate for removal. Fixed an earlier interface bug. */
.body {
	margin: 0 auto;
}

/* Define the interface layout via grid. . */
#interface {
	transition: all .5s ease-in-out;
	display: grid;
	grid-template-columns: 45vmax 55vmax;
	grid-template-rows: 25vmax 5vmax 30vmax;
}

/* Style the main animation container. */
.container_anim {
   	grid-area: 1 / 1 / span 1 / span 1;
	position: relative;
	max-height: 80vmin;
	overflow:hidden; 
}

/* Style the overview window. This window only exists in landscape mode. */
.container_overview {

	font-size: .8rem;
	font-family: "Archivo";
	z-index: 99999;
	overflow: hidden;
    white-space: nowrap;
	max-height: 80vmin;
	grid-area: 1 / 2 / span 1 / span 1;
	position: relative;
	max-width:80%;
	/* background-color: yellow; */
}

/* Style interface buttons (collectively, as a class). */
.buttons {
	z-index: 9999;
	margin: auto auto;
	grid-area: 2 / 1 / span 1 / span 2;
	position: relative;
}

/*This class styles the text box.*/
.container_text {
	hyphens: auto;
	margin:0 auto;
	max-width: min(77em, 90vw);
	text-align:justify;  
    text-justify:auto;
   	grid-area: 3 / 1 / span 1 / span 2;
}

/* Heading (title) of text box. */
.container_text h3 {text-justify: none; margin-bottom: 0;}

/* Divider (black line) between buttons and text box. */
.divider {width: 100%;border-style: solid;}

/* Styling the text box title. */
.info_title {
	position: relative;
	font-family: "Fin";
	font-size: 2rem;
	opacity:0;
}

/* Styling the text/content of the text box. */
.info_content {
	position: relative;
	font-family: "Archivo";
	font-size: 2rem;
	opacity:0;
}

/* Styling/positioning the animated graphics. */
.anim_img {position: absolute; top: 0; bottom: 0; right: 0; left: 0;}

/* Styling the labels/names of the main animation box. */
.names {
	white-space: nowrap;
	top: 0; left: 0;
	opacity: 0;
	font-family: "Archivo";
	font-size: 1.5rem;
	position:absolute;
}

/* Styling the 2 layers of the main animation box. */
.viewboxes {position:relative; width: 120%;}

/* Positioning text layer of main animation box. */
.viewbox_text {position:absolute; top:0; left: 0; z-index: 999;}

/* Positioning main animation box. */
.anim_pos{margin-left:15%;}

/* Making sure the zoom windows are invisible at first and appear on top of all other content. */
.zoomwindow, .zoomwindow2, .zoomwindow4, .zoomwindow5, .zoomwindow6, .zoomwindow7, .zoomwindow8, .zoomwindowred {opacity: 0; z-index: 70;}

/* Styling the main heading as well as bold text. */
h1, strong {color: white; font-weight: 400;}

/* Style interface buttons (the actual buttons). */
.buttons button {
	z-index: 9999;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
	border: .0.5em solid black;
	background-color: transparent;
	font-family: "Archivo";
	padding: 0.1em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size:1.5rem;
}

/* Adapt text in case of high dpi (for many recent mobile devices etc.) */
@media (min-resolution: 192dpi){
	.info_title {
		font-size: 4rem;
	}
	.info_content {
		font-size: 4rem;
	}
	
}

/* Adapt interface and respond to portrait orientation. */
@media (max-aspect-ratio: 3/2) {
	#interface {
		display: grid;
		grid-template-columns: 40vmin 60vmin;
		grid-template-rows: 60vmin 10vmax 30vmin;
	}
	.buttons {
		grid-area: 2 / 1 / span 1 / span 2;
		z-index: 9999;
		margin: auto auto;
		position: relative;
	}
 	.buttons button {
		font-size:2.5rem;
	}
	.container_text {grid-area: 3 / 1 / span 1 / span 2; }
	.container_text h3 {text-justify:none;}
	.container_anim {grid-area: 1 / 1 / span 1 / span 2; max-height: 90vmin;}
	.container_overview {display:none; }
}

/* Accessible hover effects for interface buttons. */
.buttons button:hover {
	color: white;
	text-decoration: underline;
	background-color: green;
}