:root {
	--LightBrown: #8f664f;
	--DarkBlue:   #020718;
	--SoftBlue:   #3b525e; 
	--BlueGrey:   #97a29e;
	--SoftGrey:   #e7eded; 
	--SoftGreen:  #4d5c33;
	--Black:      #000000;
	--White:      #FFFFFF;
}


html {
  background-color: var(--White);
  font-family: made_tommy_soft_outlinebold, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--SoftBlue);
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
	font-size: 3.5vw;
	margin: 0;
	padding: 0;
}

.header {
	grid-area: header;
}
.hotelContent {
	grid-area: hotelContent;
}
.imageHolder {
	grid-area: hotelContent;
}
.linkContent {
	grid-area: linkContent;
}
.periodicContent {
	grid-area: periodicContent;
}
.forestArt {
	grid-area: forestArt;
	display: flex;
	align-items: center;
	justify-content: center;
}

.forestArt>img {
	width: 70%;
	margin-top: 20px;
	margin-bottom: 20px;
}

.formSubmit {
	font-family: made_tommy_soft_bold, sans-serif;
	grid-area: formSubmit;
	padding: 50px;
}

#name_container, #email_container, #comment_container {
	margin-top: 20px;
	height: auto;
	width: 400px;
	background-color: var(--DarkBlue);
	padding: 10px;
}

label {
	font-size: 2vw;
	color: var(--White);
	margin-bottom: 10px;
}

input[type=submit] {
	font-size: 16px;
	background-color: var(--SoftGreen);
	color: var(--White);
	padding: 7px;
	width: 400px;
	margin-top: 20px;
}

input[type=submit]:hover {
	background-color: var(--DarkBlue);
}

input[type=text], textarea{
	background-color: var(--SoftGrey);
	border-radius: 7px;
	padding: 10px;
	border: var(--White) solid 1px;
	width: 380px;
	
}


.footer {
	grid-area: footer;
}



@media only screen and (min-width: 1171px) {
	.wrapper {
		font-size: 2vw;
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-areas:
			"header header"
			"hotelContent linkContent"
			"periodicContent periodicContent"
			"forestArt formSubmit"
			"footer footer";
		grid-template-rows: auto;
	}
}

@media only screen and (max-width: 1170px) {
	.wrapper {
		display: grid;
		
		grid-template-areas: 
			"header"
			"hotelContent"
			"linkContent"
			"periodicContent"
			"forestArt"
			"formSubmit"
			"footer";
		grid-template-rows: auto;
	}
}