@import url('https://fonts.googleapis.com/css?family=Kosugi');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=Space+Mono');



*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body
{
	font-family: 'Space Mono', sans-serif;
}

header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 5vh;
	padding: 0 5%;
}

.container
{
	display: flex;
	justify-content: space-between;
	height: 95vh;
}

.container .item
{
	position: relative;
	width: 50vw;
	height: 100%;
	overflow: hidden;
	transition: 0.5s ease-in-out;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.container .item.right
{
	background-image: url(img/placeholder.jpg);
	box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}

.container .item.left
{
	background-image: url(img/nightwalk1_1.jpg);
}

.container .item:hover
{
	width: 90vw;
}
.container .item .back
{
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	text-decoration: none;
	color: white;
	transition: 0.5s ease-in-out;
	font-size: 4.5em;
}

.container .item .back
{
	white-space: nowrap;
}

.container .item:hover .back
{
	opacity: 1;
}


.containter img
{
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 768px)
{
	.container
	{
		display: block;
	}
	.container .item
	{
		width: 100%;
		height: 50%;
	}

	.container .item:hover
	{
		width: inherit;
	}

	.container .item .back
	{
		opacity: 1;
		background-color: rgba(0,0,0,0.2);
		font-size: 3em;
	}
}