.item1 { grid-area: top; }
.item2 { grid-area: intro; border: 5px solid green;}
.item3 { grid-area: main; border: 5px solid red;}
.item4 { grid-area: form; border: 5px solid blue; }
.item5 { grid-area: more; border: 5px solid yellow; }
 
.grid-container {
	font-family: helvetica;
	color: white;
	  display: grid;
	  grid-template-areas:
		'top top'	
		'main intro'
		'main intro'
		'form intro'
		'form more'
		'form more';
	grid-gap: 10px;
}	

.grid-container > div {
  text-align: center;
  padding: 10px;
}

.navigation {grid-area: navigation;}
.title {grid-area: title; font-family: verdana;}
.hts {grid-area: hts;}

.item1 {
	background-image: url('../Images/background2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: white;
	 display: grid;
	 grid-template-areas:
	 'hts title title title navigation';
}	

.item1 > div {
  text-align: center;
}

header {
	color: white;
}

body {
	background-image: url('../Images/background1.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	margin: 0;
}

input[type=checkbox] {
	width: 18px; 
	height: 18px;
}

img, iframe {
	border-radius: 10px;
}

h2, h3 {
	text-align: center;
}

.error {
	font-size: 12px;
	color: red;
}

textarea {
	font-size: 12px;
}

button {
	border: 3px solid gray;
	background: transparent;
	color: white;
	padding: 10px;
}

button:hover {
	color: black;
	background-color: lightgreen;
}

.item4 img:hover{
	filter: grayscale(100%);
}

.item5 img:hover{
	filter: grayscale(100%);
}

@media screen and (min-width: 1400px) {
	.grid-container {
		font-size: 18px;
	}
}

@media screen and (max-width: 1400px) {
	.grid-container {
		font-size: 12px;
	}
	.item1 {
		font-size: 18px;
	}
}