body{
	margin: 0;
	height: 100vh;
	/*background: url(img/map.jpeg) no-repeat;
	background-size: cover;*/
	background: linear-gradient(171deg, rgba(179,25,66,1) 0%, rgba(255,255,255,1) 50%, rgba(10,49,97,1) 100%);
}

@keyframes draw {
  0% {
    stroke-dashoffset: 1010;
    fill-opacity: 0;
  }
  80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 1;
  }
}

#map{
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: -1;

	animation: draw 3s linear forwards;
	stroke: white;
	stroke-dasharray: 1010;
}

#container{
	position: relative;
	height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns:repeat(80, 1fr);
	grid-template-rows:repeat(30, 1fr);
}

#seattle{
	max-width: 15px;
	max-height: 15px;
	grid-column: 25 / 26;
	grid-row: 3 / 4;

	border: solid 2px goldenrod;
	border-radius: 50%;
}

#seattle:hover{
	transform: scale(2,2);
	transition-duration: 1s;
}

#la{
	max-width: 15px;
	max-height: 15px;
	grid-column: 29 / 30;
	grid-row: 15 / 16;

	border: solid 2px goldenrod;
	border-radius: 50%;
}

#la:hover{
	transform: scale(2,2);
	transition-duration: 1s;
}

#kc{
	max-width: 15px;
	max-height: 15px;
	grid-column: 50 / 51;
	grid-row: 11 / 12;

	border: solid 2px goldenrod;
	border-radius: 50%;
}

#kc:hover{
	transform: scale(2,2);
	transition-duration: 1s;
}

#seattle,#la,#kc,#mountain,#lake,#sea,#az,#nm1,#nm2,#nm3,#co{
	z-index: 5;
}

#mountain,#lake,#sea,#az,#nm1,#nm2,#nm3,#co{
	max-width:100%;
	max-height:100%;
	border: solid 0px black;
}

#mountain{
	grid-row: 6 / 7;
	grid-column: 24 / 25;
}

#lake{
	grid-row: 10 / 11;
	grid-column: 24 / 25;
}

#sea{
	grid-row: 13 / 14;
	grid-column: 26 / 27;
}

#az{
	grid-row: 15 / 16;
	grid-column: 36 / 37;
}

#nm1{
	grid-row: 15 / 16;
	grid-column: 38 / 39;
}

#nm2{
	grid-row: 15 / 16;
	grid-column: 40 / 41;
}

#nm3{
	grid-row: 14 / 15;
	grid-column: 41 / 42;
}

#co{
	grid-row: 12 / 13;
	grid-column: 42 / 43;
}

#container:hover #map {
    animation-play-state: paused; 
}

@media only screen and (max-width: 480px) {
	#container{
		grid-template-rows:repeat(60, 1fr);
	}
	#seattle{
		grid-row: 19 / 20;
		grid-column: 9 / 10;
	}
	#la{
		grid-row: 30 / 31;
		grid-column: 16 / 17;
	}
	#kc{
		grid-row: 26 / 27;
		grid-column: 60 / 61;
	}
	#mountain{
		grid-row: 22 / 23;
		grid-column: 7 / 8;
	}
	#lake{
		grid-row: 26 / 27;
		grid-column: 7 / 8;
	}
	#sea{
		grid-row: 29 / 30;
		grid-column: 13 / 14;
	}
	#az{
		grid-row: 31 / 32;
		grid-column: 31 / 32;
	}
	#nm1{
		grid-row: 31 / 32;
		grid-column: 36 / 37;
	}
	#nm2{
		grid-row: 31 / 32;
		grid-column: 38 / 39;
	}
	#nm3{
		grid-row: 30 / 31;
		grid-column: 39 / 40;
	}
	#co{
		grid-row: 27 / 28;
		grid-column: 40 / 41;
	}
}