html {
	padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	background-color: rgb(0, 50, 50);
}

img {
	position: absolute;
}

button {
	background: none;
	border: none;
}

.container {
	position: absolute;
	margin: 5%;
	height: 500px;
	width: 500px;
}

/* text description */
.description {
	position: absolute;
	top: 5%;
	right: 5%;
	max-width: 500px;
	border-radius: 3px;
	padding: 20px;
	display: none;
	border: solid;
}

#descriptionCity {
	background-color: rgb(216, 75, 32);
	border-color: rgb(0, 0, 0);
	color: rgb(0, 0, 0);
}

#descriptionPlace {
	background-color: rgb(229, 190, 1);
	border-color: rgb(0, 0, 0);
	color: rgb(0, 0, 0);
}

#descriptionRoute {
	background-color: rgb(49, 127, 67);
	border-color: rgb(255, 255, 255);
	color: rgb(255, 255, 255);
}

#descriptionIsland {
	background-color: rgb(30, 36, 96);
	border-color: rgb(255, 255, 255);
	color: rgb(255, 255, 255);
}

/* island */

.island {
	opacity: 1;
	scale: 14%;
}

.island:hover {
	opacity: 0.7;
}

.island:focus {
	opacity: 0.5;
}

#island001 {
	top: 1500px;
	left: 1000px;
}

#island002 {
	top: 2070px;
	left: 240px;
}

#island003 {
	top: -50px;
	left: -200px;
}

/* city */
.city {
	position: absolute;
	scale: 14%;
	border: none;
	filter: grayscale();
}

	.city:hover {
		filter: grayscale();
	}

	.city:focus {
		border-color: rgb(255, 255, 255);
		filter: none;
	}

	#city001 {
		top: 1600px;
		left: 1400px;
	}

	#city002 {
		top: 1700px;
		left: 2100px;
	}

	#city003 {
		top: 2150px;
		left: 3150px;
	}

	#city004 {
		top: 2200px;
		left: 900px;
	}

	#city005 {
		top: 2300px;
		left: 1100px;
	}

	#city006 {
		top: 2400px;
		left: 1400px;
	}

	#city007 {
		top: 1900px;
		left: 1900px;
	}

	#city008 {
		top: 2300px;
		left: 2300px;
	}

	#city009 {
		top: 2800px;
		left: 100px;
	}

	#city010 {
		top: 2900px;
		left: 400px;
	}

	#city011 {
		top: 3800px;
		left: 1100px;
	}

	#city012 {
		top: 4200px;
		left: 1150px;
	}

/* route */
.route {
	position: absolute;
	background: none;
	border: none;
	scale: 14%;
	filter: grayscale();
}

	.route:hover {
		filter: grayscale();
	}

	.route:focus {
		filter: none;
	}

	#tratta02 {
		top: 3000px;
		left: -250px;
	}

/* places */
.place {
	position: absolute;
	scale: 14%;
	border: none;
	filter: grayscale();
}

	.place:hover {
		filter: grayscale();
	}

	.place:focus {
		opacity: 1;
		filter: none;
	}

	#place001 {
		top: 1900px;
		left: 1300px;
	}

	#place002 {
		top: 2300px;
		left: 3100px;
	}

	#place003 {
		top: 2600px;
		left: 2000px;
	}

	#place004 {
		top: 3200px;
		left: 2900px;
	}

	#place005 {
		top: 3100px;
		left: 2100px;
	}
	
	#place006 {
		top: 3600px;
		left: 1000px;
	}

	#place007 {
		top: 3200px;
		left: 300px;
	}

	#place008 {
		top: 3550px;
		left: 180px;
	}

	#place009 {
		top: 3800px;
		left: 1400px;
	}

	#place010 {
		top: 4300px;
		left: 800px;
	}

	#place011 {
		top: 4450px;
		left: 1450px;
	}

	#place012 {
		top: 3680px;
		left: 2200px;
	}

	#place013 {
		top: 4150px;
		left: 2000px;
	}

	#place014 {
		top: -200px;
		left: -300px;
	}

	#place015 {
		top: 480px;
		left: -245px;
	}


/* Responsive versione mobile */
@media only screen and (max-width: 600px) {
	.description {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.container {
		top: 20%;
	}
}