@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url("./fonts/OpenSans-Regular.ttf") format("woff2"),
	url("./fonts/OpenSans-Regular.ttf") format("woff"),
	url("./fonts/OpenSans-Regular.ttf") format("tff"); 
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

body{
	font-family: 'Open Sans', sans-serif;
}

#topbar{
	background-color: #00008b;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: 0px 0px 15px black;
}

#bottombar{
	background-color: #00008b;
	width: calc(100% - 24px);
	position: absolute;
	left: 0;
	padding: 12 12 20 12;
	/*box-shadow: 0px 0px 15px black;*/
	color: white;
	margin-top: -15;
	
}

#flag{
	height: 100px;
	display: inline-block;
	margin: 0;
}

#title{
	display: inline-block;
	color: white;
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding-left: 40px;
}

table, th, td{
	width: 100%;
	text-align: center;
	border-spacing: 5px;
	border: 1px solid black;
	border-collapse: collapse;
	padding: 15px;
	cursor: pointer;
}

th{
	background-color: black;
	color: white;
}

tr:nth-child(odd){
	background-color: #fff;
}
tr:nth-child(odd):hover{background-color: #eef;}
tr:nth-child(even){
	background-color: #eee;
}
tr:nth-child(even):hover{background-color: #dde;}


.chapter{
	margin: auto;
	width: 75%;
	max-width: 900px;
	min-width: 200px;
	margin-bottom: 50px;
	border-bottom: 1px solid black;
}

.imgs{
	width: 100%;
}
.imgs>img{
	display: inline-block;
	height: 200px;
	max-width: 75%;
	object-fit: cover;
	margin: 5px;
	box-shadow: 2px 2px 10px;
}
.imgs>img:hover{box-shadow: 5px 5px 20px;}
.imgs>video:hover{box-shadow: 5px 5px 20px;}
.imgs>video{
	display: inline-block;
	height: 200px;
	max-width: 100%;
	margin: 5px;
	box-shadow: 2px 2px 10px;
}

#bigimg{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000000aa;
	text-align: center;
	display: none;
	overflow: scroll;
}

#bigimg>img,video{
	filter: drop-shadow(0 0 10px white);
}

.nav{
	position: fixed;
	font-size: 48px;
	width: 48px;
	height: 48px;
	background-color: white;
	border-radius: 48px;
	line-height: 38px;
	top: calc(50% - 24px);
	right: 0;margin: 12px;
	box-shadow: 2px 2px 10px;
	cursor: pointer;
}

@media only screen and (max-width: 790px){
	.bigscreen{ display: none; }
	#flag{
		width: 25%;
		height: auto;
		top: 50%;
		position: absolute;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#topbar{ height: 100px;}
	#title{
		margin-left: 25%;
		font-size: 125%;
	}
	.chapter{ width: 100%; }
	.imgs>img,video{
		width: 42vw;
		height: calc(44vw * 0.75);
		object-fit: cover;
	}
	.imgs>.fw{
		width: calc(100vw - 50px);
		height: auto;
		max-width: none;
	}
	.imgs{ text-align: center;}
	table, td, th{ width: 100%; padding: 5px }
	p{padding: 0 20px;}
	h3{padding-left: 15px;}
	.nav{
		bottom: 0;
		top: auto;
	}
}

th:first-child, td:first-child {
	width: 20%;
}
th:nth-child(2), td:nth-child(2) {
	width: 40%;
}

.imager::-webkit-scrollbar{
    display: none;
}
.imager{
	overflow: scroll;
	padding: 5px;
}