@import url(reset.css);

body,
html {
	font-size: 62.5%;
	font-family: courier, courier new, monospace;
	font-weight: normal;
}

img {
	max-height: 100%;
	width: auto;
}

p,
h2,
h3 {
	font-size: 1.5rem;
}

h2,
h3 {
	text-transform: uppercase;
	color: white;
}

.header {
	background-color: black;
	padding: 1rem;
}

.content {
	margin-left: auto;
	margin-right: auto;
}

.header,
.content {
	padding-left: 1rem;
	padding-right: 1rem;
}

.wrapper {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
}

.image {
	height: 50rem;
}

.image.special {
	max-height: 50rem;
	box-sizing: border-box;
	padding: 1rem;
	z-index: 100;
	margin-bottom: 1rem;
}

.phone {
	position: relative;
	height: 38rem;
	background-color: black;
	border-radius: 1.5rem;
	padding: 4rem 1rem 4.5rem 1rem;
	margin-bottom: 1em;
	overflow: hidden;
}

.phone-content {
	position: relative;
	height: 38rem;
}

/* Kleiner MQ */

@media all and (max-width: 768px) {

	html, body {
		font-size: 40%;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	.wrapper {
		justify-content: center;
	}
	
	.image {
/*		max-width: 35rem;*/
		max-width: 90%;
		height: auto;
		margin-top: 2rem;
	}
	
	.phone {
		max-width: 35rem;
		height: auto;
	}
	
}

/*LINKS*/

a:link {
	color: white;
	text-decoration: underline;
}

a:visited {
	color: white;
	text-decoration: underline;
}

a:hover {
	text-decoration: underline;
	color: black;
	background-color: white;
}

a:active {
	text-decoration: underline;
	color: purple;
	background-color: none;
}

p a:link {
	color: black;
}

p a:visited {
	color: black;
}

p a:hover {
	color: blue;
}

p a:active {
	color: blue;
}