html {
	font-size:36px;
}


@font-face {	
	font-family:'typewriter';
	src: url('Fonts/cmu.typewriter-text-regular.ttf');
}
@font-face{
	font-family:'fraktur';
	src: url('Fonts/FetteNationalFraktur.ttf');
}

@font-face{
	font-family:'metropolis';
	src: url('Fonts/Metropolis-Medium.otf');
}

@font-face{
	font-family:'georgia'
	src: url('Fonts/georgiai.ttf');
}

.title{
	font-size:5.5cqw;
	font-family:'typewriter', monospace;
 	color:black;
	background-color:white;
	border: black double .12em;
	text-align:center;
}

.heading{ 
	display:block;/* Needed so it doesn't get out of line when the @media hits and reshapes things */
}

body{
	background-color:#f1bc80;
}

a { /* changing default hyperlink stylization */
/* 	background-color:rgba(222, 75, 145, 0.15);
 */	color:brown;
}

a:hover{
	color:purple;
}
ul { /* removing default list stylizations */ 
	list-style-type:none;
}

.anchor a{ /*Making anchor hyperlinks different than html links */
	color:red;
	text-decoration:solid;
}

.anchor a:hover{
	color:blue;
}



.toptabs { /* top level navigation tab container */
 display:flex;
 flex-direction:column;
 position: sticky;
 top:0;
 width:100%;

}

.toptabs div{ /* individual tabs */
 border: solid black .07em;
 background-color:pink;
 padding: .3em;
 margin: .3em;
 text-align: center;
 text-wrap:break;
  overflow:hidden;

/*  overflow:hidden;
 object-fit:cover;
 */
}


.toptabs h1{
	font-size:.6em;
	/*font-size:clamp(8px, 1.1vw, 1rem);*/
  	font-family:'typewriter', monospace;
	font-weight:600;
	text-shadow:none;
	margin:0;


	 /* 1.7cqi keeps font size relative to container so doesn't overflow when shrinking */
}

.toptabs a{
	color:inherit;
	text-decoration:none;

}

.toptabs a div:hover{ /* when hovering over tabs in nav */
	background-color: white;
	cursor:pointer;
	text-decoration: underline;

}



.container{ /* flex container */
	display:flex;
	justify-content:center;
	margin:7vw;
	margin-top:0;
	margin-bottom:0;
}

.container > *{ /* controls all the direct children of .contianer for flex */
	/* flex:1; */ /*when this is on, all columns will be equal size*/
	border:solid black 3px;
	

}


.left{
	width:10%;
	background-color:white;
	flex-shrink: 4;
	flex-grow:1;
	font-size: .8rem;

}

.right{
	width:30%;
	flex-shrink: 4;
	flex-grow:1;
	background-color: #edc2f1; /*pastel purple */
}

.right p{
	margin-left:.2em;
	font-family:'georgia',serif;
 	font-size:min(2vw,.5rem);
	line-height:1.4;
}

.right h3{
	font-family:'typewriter', monospace;
	font-size: 1em;
}

.right img{
	max-width:100%;
	height:auto;
}



.workname{ /* eg: 1922 - Concept of the Political */

	border:black solid .06em;
	border-left: none;
	border-right:none;
	background-color:#fee9d2;

}

.workname h2{
	font-family: 'typewriter', monospace;
	text-align:left;
	font-size:.8em;
	margin:0;
	padding:0;
	margin-left:.2em;
}

p {
	line-height:1.4;
}

.citation{ /*formal citation */
	font-family:monospace;
	font-size:.45em;
	font-weight:300;
	margin-right:2em;
	margin-left: .2em;
}

.center{
	background-color:lightblue;
	width: 50%;
	border-left: none;
	flex-grow:5;
	flex-shrink:1;
	font-family:'georgia',serif;
	font-weight:300;
	font-size: 100%;
}

.meta h2 { /*german name */
	margin-left:.2em;
	text-decoration: underline;
	display: flex; /*keeps the flag inline */
	font-size: .5em;
}

.meta p { /*descripition of work */
	margin-left:.2em;
	margin-right: .2em;
	font-size: .5em;



}

.center h1{ /* ''works translated into english'' */
	text-align:center;
	font-family:'typewriter', monospace;
	font-size: min(200%,7.5vw); 
}

.center p{
	font-size:.5em;
}

	

.meta {
	grid-column: 1 / span 2; /* makes it look unaffectd by grid */
	background-color:#f7f599;

}

.ann_cite{
	display:grid;
	grid-template-columns: 45% 55%;
	align-items:top;

}

/* about page */

.about h1{
	margin:none;
	padding:none;
	
}

.about p{
	margin-left:.2em;
	margin-right:.2em;
	font-size:.62em;
}

.simplebib h3{
	font-family:'georgia', Times New Roman, sans-serif;
}


@media only screen and (max-width:1110px){ /* changing screen when getting smaller */
	.container div{
	}
	.container {
		display:flex;
		flex-direction: column;
		border: black solid .06em;
		margin:1em;

	}
	
	.left{
		width:100%;
		border:none;
		border-bottom-color:black;
		border-bottom-style:solid;
		border-bottom-width: .06em;
		flex-wrap:no-wrap;
		flex-basis:fit-content;

	}
	
	.right{
		width:100%;
		order:2;
		border:none;
		border-bottom-color:black;
		border-bottom-style:solid;
		border-bottom-width:.06em;
		flex-grow: 3;


 	}
	
	.right p{
		font-size: 50%;

	}
	
	.right img{
		height:100%;
		max-width:20%;
		flex-shrink:5;
	}
	
	.center{
		order:3;
		width:100%;
		margin:0;
	}
	
	.toptabs{
		display:grid;
		grid-template-columns:1fr 1fr 1fr;
		overflow:hidden;
		margin:10%;
/* 		flex-direction:row;
 		flex-basis:fit-content;
		justify-content:left;
		overflow:hidden;
		align-items:right;
 */	}
	
	.toptabs .top{
		display:none;
	}
	
	.toptabs div{
		margin:.1em;
/* 		min-height:max(4vw,3em);
 */		
		height:80%;
		/* display:inline-block;
		vertical-align:middle;
		border:dashed;
		border-color:blue; */

/* 		border-style:solid;
		border-color:black;
 */	}

	.toptabs div h1{
		font-size:3.8vw;
		font-size: 3cqi;
	}

	

	.title{
		width:100%;
		
	}
}


@media only screen and (max-width:1500px){

	
		.toptabs {
			gap:0em;
			margin:0em;
			padding:0em;
		}
		
		.toptabs div{
		padding-left:.01em;
		padding-right:.01em;
		padding-top:.1em;
		padding-bottom:.1em;
		text-align:center;
		
		}
		
		.toptabs h1{
/* 			font-size:.55rem;
 */			font-size: 1.8cqi;
		}
	
}

/* .flag{
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	align-self:center;
	width:1em;
	height:.6666em;
	border-color:black;
	border-style:solid;
	border-width: .01em;
	margin-left: .2em;
}


.flag > *{
	flex-basis:100%;
}

.flag div:nth-child(1){
	background-color: #000000;
}

.flag div:nth-child(2){
	background-color: #DD0000;
}
.flag div:nth-child(3){
	background-color: #FFCC00;
}

 */