@font-face {
  font-family: 'Comfortaa';
  src: url('Comfortaa-Regular.ttf');
  font-weight: "normal";
}

@font-face {
  font-family: 'Comfortaa';
  src: url('Comfortaa-SemiBold.ttf');
  font-weight: "semibold";
}

@font-face {
  font-family: 'Comfortaa';
  src: url('Comfortaa-Bold.ttf');
  font-weight: "bold";
}

body {
	margin: 2rem;
	padding: 0;
	background: #000;
	color: #fff;
	font-family: "Comfortaa";
}
h1 {
	text-decoration: underline overline #faf;
}
.info {
	display: inline-block;
	background: #333;
	padding: .5rem;
	float:left;
	line-height: 1.5rem;
	box-sizing: border-box;
	margin:0;
}
.info strong{
	font-weight: bold;
}
.menu {
	list-style-type: none;
	float:left;
	padding:0;
	margin:0;
	display:inline-block;
}
.menu a {
	color: #ddd;
	padding: .5rem;
	display:inline-block;
}
.titelbild {
	float:left;
}
.thumbs a {
	float:left;
	display: inline-block;
	border: 1px solid #333;
	box-sizing: border-box;
	text-decoration:none;
	position:relative;
}
.thumbs a img{
	width:100%;
}
.thumbs a div {
	color: #fff;
	background: rgba(0,0,0,0.25);
	left: 50%;
	transform: translate(-50%, -100%);
	position:absolute;
	padding:2px;
	width:90%;
	text-align:center;
}

h2 {
	clear: both;
	margin:0;
	padding: 2rem 0 .5rem 0;
	border-bottom: 1px solid #fff;
	margin-bottom: .5rem;
}

@media only screen and (max-width: 375px) {
	.thumbs a, .info, .menu, .titelbild {
		width:100%;
	}
}

@media only screen and (min-width: 375px) {
	.thumbs a, .info, .menu, .titelbild {
		width:33.333%;
	}
}

@media only screen and (min-width: 512px) {
	.thumbs a, .info, .menu, .titelbild {
		width:33.333%;
	}
}

@media only screen and (min-width: 768px) {
	.thumbs a, .info, .menu, .titelbild {
		width:25%;
	}
}

@media only screen and (min-width: 1024px) {
	.thumbs a, .info, .menu, .titelbild {
		width:20%;
	}
}