.item1 { grid-area: top; }
.l1 { grid-area: l1; border: 5px solid red;}
.l2 { grid-area: l2; border: 5px solid green;}
.l3 { grid-area: l3; border: 5px solid blue;}
.l4 { grid-area: l4; border: 5px solid yellow;}
.l5 { grid-area: l5; border: 5px solid purple;}
.l6 { grid-area: l6; border: 5px solid orange;}
.l7 { grid-area: l7; border: 5px solid violet;}
.l8 { grid-area: l8; border: 5px solid pink;}
.l9 { grid-area: l9; border: 5px solid brown;}
.code { grid-area: gallery; border: 5px solid aqua;} 
 
.grid-container {
	font-family: helvetica;
	color: white;
	display: grid;
	grid-template-areas:
	    'top top top'
		'l1 l2 l3'
		'l4 l5 l6'
		'l7 l8 l9'
		'gallery gallery gallery';
	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';
}	

body {
	background-image: url('../Images/background1.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	margin: 0;
	min-width: 50%;
}

ul {
	list-style: none;
}

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

.l1 img:hover {
	filter: grayscale(100%);
}
.l2 img:hover {
	filter: grayscale(100%);
}
.l3 img:hover {
	filter: grayscale(100%);
}
.l4 img:hover {
	filter: grayscale(100%);
}
.l5 img:hover {
	filter: grayscale(100%);
}
.l6 img:hover {
	filter: grayscale(100%);
}
.l7 img:hover {
	filter: grayscale(100%);
}
.l8 img:hover {
	filter: grayscale(100%);
}
.l9 img:hover {
	filter: grayscale(100%);
}
.code img:hover {
	filter: grayscale(100%);
}

.startingImage {
	border-radius: 20px;
	border: 2.5px solid lightyellow;
}

span.lb-caption {
	font-family: helvetica;
	color: lightyellow;
}

@media screen and (min-width: 1400px) {
	.symbol{
		float: right;
	}
}

@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;
	}
}