body {
	margin: 0;
	padding: 0;
}

header {
	width: 100%;
	height: 3em;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #e5e9ea;
}

.nav {
	font-family: sans-serif;
	text-decoration: underline overline;
	text-shadow: 3px 3px 3px white;
	color: black;
}

a:link {
    text-decoration: none;
    color: black;
    font-weight: 600;
}

a:visited {
    color: black;
}

a:hover {
    text-decoration: underline dotted;
    font-weight: 600;
}

.left,
.right {
	display: grid;
	align-items: end;
}

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

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

@keyframes colorchange {
	0% { background-color: #45483d; }
	10% { background-color: #800020; }
	20% { background-color: #002080; }
	30% { background-color: #008060; }
	40% { background-color: #674d00; }
	50% { background-color: #4d0067; }
	60% { background-color: #1a6700; }
       	70% { background-color: #67001a; }
	80% { background-color: #002081; }
	90% { background-color: #810020; }
	100% { background-color: #45483d; }
}

.middle {
	animation: colorchange 180s infinite;
}

.middle:hover img {
	filter: drop-shadow(16px 16px 10px black);
}

.converse-container {
	height: 90vh;
}

.chat-head {
	display: none !important;
}

#info-nl,
#info-en,
#info-sv {
	display: none;
}

#info-nl:target,
#info-en:target,
#info-sv:target {
	display: block;
	position: absolute;
	top: 0;
	left: 5vh;
	width: 90vw;
	height: 95vh;
	background-color: white;
	font-size: 1.25em;
	color: #333;
	line-height: 1.4;
	box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
	border: 1px solid grey;
	overflow-y: scroll;
	overflow-x: auto;
}

#chat {
	background-image: url('img/first-fire-gravel-background.jpg');
	background-repeat: no-repeat;
}

.bar {
	font-family: sans-serif;
	font-size: 1em;
	width: 100vw;
	color: white !important;
	padding: 0 1em;
}

.bar:hover {
	text-decoration: none;
	color: red !important;
}

#chat:target > a.bar:first-of-type  {
	display:none;
}

#chat > a.bar:last-of-type {
	display:none;
}

#chat:target > a.bar:last-of-type  {
	display:inline;
	position: sticky;
	top: 0;
}

#chat > a.bar:first-of-type {
	display:inline;
	position: sticky;
	top: 0;
}

.overlay {
	z-index: 10000;
}

.overlay section {
	padding: 0em 2em 6em 2em;
}

@media (min-width:768px) {
    section.logo-container {
        display: grid;
	grid-auto-rows: 1fr;
        grid-template-columns: 1fr 3fr 1fr;
    }

    .left,
    .right {
	align-items: end;
	background-color: #e5e9ea;
    }
}

@media (max-width:767px) {
	header {
		animation: colorchange 180s infinite;
	}

	.nav {
		color: white !important;
		text-shadow: none;
	}

	.nav a {
		color: white !important;
		font-weight: 500;
	}

	section.logo-container {
		display: block;
	}

	.left,
	.right {
		display: none;
	}

	.middle {
		width: 100vw;
	}

	.converse-container {
		height: 96vh;
	}

	#info-nl:target,
	#info-en:target,
	#info-sv:target {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: white;
		font-size: 1em;
		color: #333;
		line-height: 1.2;
	}

	#chat {
		background-image: none;
		animation: colorchange 180s infinite;
	}
}

/*
div {
	border: 1px solid blue;
}
*/