/* CSS Document */

* {
  box-sizing: border-box;
}

body {
	background-color: #F1E9E3;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

div {
	border: none;
}

h1, h2 {
	margin-bottom: -10px;;
}

a {
	color: #B97C69;
	text-decoration: none;
}

a:hover {
	font-weight: bold;
}

.main-container {
	display: block;
	max-width: 1080px;
	margin: auto;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header-left'
	'header-right'
	'main-image'
    'main-text'
    'box-1'
	'box-2'
	'box-3'
	'box-4'
    'footer-left'
	'footer-right'
	'footer-links';
  gap: 0px;  
}

.header-left { grid-area: header-left; grid-area: 2 / span 2; width: 100%; }
.header-right { grid-area: header-right; grid-area: 1 / span 2; width: 100%; display: none; }
.main-image { grid-area: main-image; grid-area: 3 / span 2; width: 100%; }
.main-text { grid-area: main-text; grid-area: 4 / span 2; width: 100%; }
.box-1 { grid-area: box-1; grid-area: 5 / span 1; width: 100%; }
.box-2 { grid-area: box-2; grid-area: 5 / span 1; width: 100%; }
.box-3 { grid-area: box-3; grid-area: 6 / span 1; width: 100%; }
.box-4 { grid-area: box-4; grid-area: 6 / span 1; width: 100%; }
.footer-left { grid-area: footer-left; grid-area: 7 / span 2; width: 100%; }
.footer-right { grid-area: footer-right; grid-area: 8 / span 2; width: 100%; }
.footer-links { grid-area: footer-links; grid-area: 9 / span 2; width: 100%; margin-top: 25px; }

img{
	display: block;
	margin: auto;
	width: 100%;
	height: auto;
}

.header-left > img { content: url("../img/MiasMomenteLogo.png"); }
.header-right > img { content: url("../img/MiasMomente.png"); }
.main-image > img { content: url("../img/MiasMomenteFoto.png"); }
.box-1 > img { content: url("../img/Box1_KuesteSpueren.png"); }
.box-2 > img { content: url("../img/Box2_BergeErleben.png"); }
.box-3 > img { content: url("../img/Box3_Wohlfuehlen.png"); }
.box-4 > img { content: url("../img/Box4_MomenteSammeln.png"); }
.main-text > img { content: url("../img/Text.png"); }
.footer-left > img { content: url("../img/HeyIchBinMia.png"); }
.footer-right > img { content: url("../img/LassUnsGemeinsam.png"); }
img#line { content: url("../img/Linie.png"); }

p#footer-links-text { width: 100%; text-align: center; font-size: 20px; }

@media only screen and (min-width: 650px) {
	.header-left {grid-area: 1 / span 1; width: 100%; }
	.header-right {grid-area: 1 / span 3; width: 100%; display: inherit; }
	.main-image {grid-area: 2 / span 4; width: 100%; }
	.main-text {grid-area: 3 / span 4;  width: 100%; }
	.box-1 {grid-area: 4 / span 1; width: 100%; }
    .box-2 {grid-area: 4 / span 1; width: 100%; }	
	.box-3 {grid-area: 4 / span 1; width: 100%; }
	.box-4 {grid-area: 4 / span 1; width: 100%; }
	.footer-left {grid-area: 6 / span 2; width: 100%; }
	.footer-right {grid-area: 6 / span 2; width: 100%; }
	.footer-links {grid-area: 7 / span 4; width: 100%; }
	
	.main-container {
		box-shadow: -1px 1px 50px 5px #B97C69;
		min-height: 100vh;
		padding: 25px;
	}
}

@media only screen and (min-width: 1080px) {
	.header-left {grid-area: 1 / span 1; width: 100%; }
	.header-right {grid-area: 1 / span 3; width: 100%; display: inherit; }
	.main-image {grid-area: 2 / span 4; width: 100%; }
	.main-text {grid-area: 3 / span 4; width: 100%; }
	.box-1 {grid-area: 4 / span 1; width: 100%; }
	.box-2 {grid-area: 4 / span 1;  width: 100%; }
	.box-3 {grid-area: 4 / span 1; width: 100%; }
	.box-4 {grid-area: 4 / span 1; width: 100%; }
	.footer-left {grid-area: 5 / span 2; width: 100%; }
	.footer-right {grid-area: 5 / span 2; width: 100%; }
	.footer-links {grid-area: 6 / span 4; width: 100%; }
}