@charset 'utf-8';


:root {
	--bg-color: black;
	--bg-line-color: rgba(255,255,255,.2);
	--main-text-color: white;
	--reached-marker-color: color(srgb 0.326 0.102 1);
	--reached-marker-text-color: white;
	--marker-size: 3rem;
	--marker-font-size: .8em;
}



html {
	height: 100%;
	color: var(--main-text-color);
	background: 
		linear-gradient(0deg, transparent calc(50% - 1px), var(--bg-line-color) calc(50% - 1px), var(--bg-line-color) 50%, transparent 50% ), 
		linear-gradient(90deg, transparent calc(50% - 1px), var(--bg-line-color) calc(50% - 1px), var(--bg-line-color) 50%, transparent 50% ),
		repeating-radial-gradient(circle at center, transparent, transparent calc(15% - 1px), var(--bg-line-color) calc(15% - 1px), var(--bg-line-color) 15%, transparent 15%),
		var(--bg-color);
	font-family: Arial, sans-serif;
}
html:before, html:after {
	content: '';
	position: fixed;
	height: 200%;
	width: 1px;
	background: var(--bg-line-color);
	top: 50%;
	left: 50%;
	z-index: -1;
}
html:before {
	transform: translate(-50%,-50%) rotate(45deg);
}
html:after {
	transform: translate(-50%,-50%) rotate(-45deg);	
}

header, footer {
	position: fixed;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 1rem;
}
header {
	font-size: .8em;
}
footer {
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}


button {
	margin-top: 2rem;
	height: 2rem;
	background: white;
	border-radius: 10px;
}

#place_message_button {
	font-size: 3em;
	cursor: pointer;
}

#lat_lon_info {
	text-align: right;
	font-size: .8em;
}

#start_compass_button {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2000;
	border-radius: 10px;
	text-align: center;
	padding: 1em 2em;
	background: white;
	color: black;
	cursor: pointer;
	box-shadow: 0 0 50px black;
	border: 2px solid lightgray;
}


.notification {
	position: fixed;
	top: -3rem;
	left: 50%;
	padding: .5em 1em;
	text-align: center;
	color: black;
	background: white;
	transform: translate(-50%,-100%);
	border-radius: .4em;
	font-size: .8em;
	transition: transform 1s, top 1s;
}
.notification.show {
	transform: translate(-50%,0);
	top: 1rem;
}
.notification.err {
	background: #ff6767;
	color: white;
}



#geo_message_markers_wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#geo_message_markers_wrapper:before {
	position: absolute;
	width: 20px;
	height: 300vh;
	content: '▲';
	text-align: center;
	transform: translate(-50%,-52%);
	z-index: -2;
	line-height: 300vh;
	background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.35) calc(50% - 1px), rgba(255,255,255,.35) 50%, transparent 50% );
}
#geo_message_markers_wrapper:after {
	position: absolute;
	background: black;
	border-radius: 50%;
	content: 'N';
	transform: translate(-50%,-150%);
	z-index: -1;
}
.geo_message {
	position: absolute;
	transform-origin: 0 50%;
	width: var(--marker-size);
	height: var(--marker-size);
	line-height: var(--marker-size);
	background: radial-gradient( transparent 50%, rgba(142, 255, 35, 0.66) 80%, transparent );
	white-space: nowrap;
	color: white;
	border-radius: 50%;
	transition: all 2s;
	opacity: 1;
	box-shadow: 0 0 12px rgba(0,0,0,.66);
	box-sizing: border-box;
	font-size: var(--marker-font-size);
}
/*.geo_message:before {
	position: absolute;
	content: '';
	transform: translate(48%,-50%) rotate(45deg);
	background: inherit;
	width: 1.2em;
	height: 1.2em;
	right: 0;
	top: 50%;
	z-index: -1;
	border-radius: 2px;
	border: 2px solid rgba(0,0,0,.25);
	box-sizing: border-box;
}*/
.geo_message span {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 50%;
	left: 50%;
	text-align: center;
	transform-origin: center;
	transform: translate(-50%, -50%);
	/*background: inherit;*/
	border-radius: 50%;
}
.geo_message.reached {
	background: radial-gradient( rgba(52, 109, 255, 0.33) 50%, rgba(142, 255, 35, 0.66) 80%, transparent );
	color: var(--reached-marker-text-color);;
	cursor: pointer;
}
.geo_message.hidden {
	opacity: 0;
}



#accuracy_meter {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(transparent, rgba(0,0,255,.33) 90%, rgba(0,0,255,.66) );
	border: 1px solid rgba(0,0,255,.6);
	border-radius: 50%;
	z-index: -1;
	transition: width 1s, height 1s;
}

#accuracy_info {
	position: absolute;
	text-align: right;
	top: 33%;
	left: -1em;
	transform: translateX(-100%);
	color: rgba(27, 67, 255, 0.9);
	font-size: .8em;
	white-space: nowrap;
}