body{
	background: rgb(0, 0, 0);
}

::selection{
	background: red;
}

::-moz-selection{
	background: red;
}

#picFrame{
	position: fixed;
	top: 5%;
	left: 5%;
	display: block;
	width: 90%;
	height: 90%;
	border-radius: 5px;
	z-index: 10;
	display: none;
}

#picFrame #pic{
	position: relative;
	display: block;
	top: 0%;
	margin: auto;
	height: 80%;
	border-radius: 5px;
	border: solid 3px white;
}

#picFrame #desc{
	position: relative;
	display: block;
	top: 3%;
	margin: auto;
	width: 80%;
	height: 16%;
	background: rgba(32, 32, 32, 0.8);
	border-radius: 5px;
	color: white;
	padding: 1% 2% 1% 2%;
	line-height: 200%;
	font-size: 20px;
	border: dashed 1px white; 
}

#filter{
	position: fixed;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9;
	display: none;
}

#title{
	position: fixed;
	top: 10%;
	left: 10%;
	display: block;
	width: 80%;
	height: 80%;
	padding: 0px;
	color: white;
	text-align: center;
	display: none;
}

#title img{
	top: 14.4px;
	left: 19.2px;
}

#map{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	margin: 0px;
	overflow: hidden;
	z-index: 1;
	display: none;
}

#map img{
	display: block;
	width: 1500px;
	position: relative;
	top: -190px;
	left: -415px;
	z-index: 2;
}

#spotSet{
	display: none;
}

.spot{
	position: fixed;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: white 1px solid;
	background:	rgb(32, 32, 32);
	box-shadow: 0px 0px 15px #157DEC;
	cursor: pointer;
	z-index: 3;
	text-align: center;
	padding-top: 2px;
	padding-right: 1px;
	font-size: 15px;
	color: white;
}

.spot:hover{
	background:	rgb(255, 0, 0);
}

#spot_1{
	top: 20px;
	left: 760px;
}
#spot_2{
	top: 62px;
	left: 782px; 
}
#spot_3{
	top: 250px;
	left: 842px;
}
#spot_4{
	top: 238px;
	left: 891px;
}
#spot_5{
	top: 218px;
	left: 1000px;
}
#spot_6{
	top: 298px;
	left: 745px;
}
#spot_7{
	top: 336px;
	left: 688px;
}
#spot_8{
	top: 357px;
	left: 662px;
}
#spot_9{
	top: 442px;
	left: 525px;
}
#spot_10{
	top: 512px;
	left: 570px;
}
#spot_11{
	top: 472px;
	left: 482px;
}
#spot_12{
	top: 498px;
	left: 438px;
}
#spot_13{
	top: 520px;
	left: 370px;
}
#spot_14{
	top: 552px;
	left: 285px;
}
#spot_15{
	top: 573px;
	left: 255px;
}
#spot_16{
	top: 590px;
	left: 223px;
}
#spot_17{
	top: 625px;
	left: 160px;
}
#spot_18{
	top: 640px;
	left: 127px;
}
#spot_19{
	top: 652px;
	left: 83px;
}
#spot_20{
	top: 680px;
	left: 20px;
}

#comment{
	position: fixed;
	left: 10%;
	top: 10%;
	display: block;
	width: 80%;
	height: 80%;
	background: rgba(32, 32, 32, 0.6);
	border:dashed 1px white;
	display: none;
	z-index: 13;
	color: white;
	font-size: 25px;
	padding: 2% 2% 2% 2%;
}

#comment p{
	color: #FDD017;
	display: block;
	border: solid 1px white;
	border-radius: 2px;
	padding: 1%;
	background: transparent; 
	text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.9);
}

#comment p::selection{
	color: white;
}

#comment p::-moz-selection{
	color: white;
}

#comment-btn{
	position: fixed;
	right: 5%;
	bottom: 5%;
	display: block;
	width: 200px;
	height: 30px;
	background:	#157DEC;
	color: white;
	font-size: 25px;
	text-align: center;
	z-index: 3;
	border-radius: 2px;
	cursor: pointer;
	display: none;
}

#comment-btn:hover{
	background:	rgb(247, 101, 65);
	box-shadow: 0px 0px 5px red;
}