Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<title>eksdi</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
	<link rel="stylesheet" href="/normalize.min.css">
	<link rel="stylesheet" href="/style.css">
</head>
<body>
	<div id="background"></div>
	<div id="wrapper">
		<header>FOTOGALÉRIA</header>
		<div id="path">KATEGÓRIE</div>
		<main>
			<section>
				<img src="/images/nature.jpeg" alt="Landscape">
				<details>
					<summary>PRÍRODA</summary>
					<p>0 fotiek</p>
				</details>
			</section>
			<section>
				<img src="/images/arch.jpeg" alt="Modern house">
				<details>
					<summary>ARCHITEKTÚRA</summary>
					<p>6 fotiek</p>
				</details>
			</section>
			<section>
				<img src="/images/people.jpg" alt="Person">
				<details>
					<summary>ĽUDIA</summary>
					<p>0 fotiek</p>
				</details>
			</section>
			<section>
				<img src="/images/food.jpg" alt="Bowl of food">
				<details>
					<summary>JEDLO</summary>
					<p>0 fotiek</p>
				</details>
			</section>
			<section>
				<img src="/images/cars.jpeg" alt="Red car">
				<details>
					<summary>AUTÁ</summary>
					<p>0 fotiek</p>
				</details>
			</section>
		</main>
		<footer>mgmgmg</footer>
	</div>

	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<![endif]-->
</body>
</html>


style

*
{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}

html
{
	background-color: black;
}

body
{
	display: flex;
	justify-content: center;

	font-family: 'Roboto', sans-serif;
}

	#wrapper
	{
		padding: 72px 0 0 0;
		width: 1176px;

		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	#wrapper > *
	{
		flex-shrink: 0;
	}

		#background
		{
			width: 100%;
			height: 338px;
			position: absolute;
			z-index: -25;
			filter: blur(20px) brightness(75%);
			background-image: url("/images/arch.jpeg");
			background-position: 50% 58%;
			background-size: cover;
			border: 0 solid #f9f9f9;
			border-width: 0 0 100vh 0;
		}

		header
		{
			padding: 28px 0;
			margin: 4px 0;

			font-size: 24px;
			font-weight: 500;
			color: white;
		}

		#path
		{
			padding: 15px 0;
			margin: 4px 0;

			font-size: 16px;
			font-weight: 500;
			color: white;
		}

		main
		{
			display: flex;
			flex-flow: row wrap;
		}

			section
			{
				width: calc(100% / 4);
			}

				img
				{
					width: 100%;
				}

				summary
				{
					font-size: 16px;
					font-weight: 500;
					color: #555555;
				}