/* styles.css */

/* grid */

.h1 { grid-area: h1; }
.h2 { grid-area: h2; }
.h3 { grid-area: h3; }
.r1c1 { grid-area: r1c1; }
.r2c1 { grid-area: r2c1; align-self: start; }
.r3c1 { grid-area: r3c1; align-self: end; }
.r1c2 { grid-area: r1c2; }
.r2c2 { grid-area: r2c2; }
.r3c2 { grid-area: r3c2; }
.r1c3 { grid-area: r1c3; align-self: center; }
.r2c3 { grid-area: r2c3; align-self: center; }
.r3c3 { grid-area: r3c3; align-self: end; justify-self: center; }
.f1 { grid-area: f1; align-self: center; }
.f2 { grid-area: f2; align-self: start; }
.f3 { grid-area: f3; align-self: center; }
.ln1 { grid-area: ln1; }
.ln2 { grid-area: ln2; }

.grid-container {
	display: grid;
	grid-template-columns: 22% auto 22%;
	grid-template-areas:
	'h1 h2 h3'
	'ln1 ln1 ln1'
	'r1c1 r1c2 r1c3'
	'r2c1 r1c2 r2c3'
	'r3c1 r1c2 r3c3'
	'ln2 ln2 ln2'
	'f1 f2 f3';
	gap: 1px;
	padding: 0.1px;
	/* background-color: #007780; */
}
/*
.grid-container > div {
	text-align: center;
	padding: 0.1px 0;
	font-size: 14px;
	background-color: rgba(255, 255, 255, 0.8);
}
*/

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
	.grid-container {
		grid-template-columns: auto;
		grid-template-areas:
		'h2'
		'h3'
		'ln1'
		'h1'
		'r1c1'
		'r2c1'
		'r1c3'
		'r1c2'
		'r3c1'
		'r2c3'
		'r3c3'
		'ln2'
		'f1'
		'f2'
		'f3';		
	}
}

/* tags */

body {
	background-color: white;
	background-image: url('images/back.jpg');
}
div {
	text-align: center;
	padding: 0.1px 0;
}
div.left {
	text-align: left;
}
div.right {
	text-align: right;
}
p {
	text-align: center;
	margin: 15px;
}
hr {
	width: 100%;
	height: 3px;
	background-color: transparent;
}
img {
	max-width: 100%;
	width: auto;
	height: auto;
}
a:link { color: blue; }				/* unvisited link */
a:visited { color: darkblue; }		/* visited link */
a:hover { color: deepskyblue; }		/* mouse over link */
a:active { color: mediumblue; }		/* selected link */

/* Language switch */

.dropdown {
	position: relative;
	display: inline-block;
	padding: 0px 0px;
	min-width: 80px;		/* (>=.dropdown-content.left /MK) */
}

.dropdown-content {
	display: none;
	position: absolute;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	min-width: 100%;
	left: 80px;				/* (<=.dropdown.min-width /MK) */
	bottom: 0;				/* (=.dropdown /MK) */
	background-color: transparent;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-content:hover {
	background-color: rgba(0,191,255,0.4)	/* (deepskyblue, opacity 40%) */
}