:root {

	--panel-bg-color:  hsl(131.6, 47.7%, 12.5%);
	--panel-place-name-bg-color:  hsl(131.6, 52.7%, 7.5%);
	--panel-place-name-color:  white;
}



body {

	background:  hsl(0, 50%, 2%);
	color: white;
}

a, 
a:visited {

	color: white;
}

#login-page {

	color: white;
}

#go-back-home {

	background-color:  hsla(132.2, 59.8%, 12.1%, 0.5);
}

#go-back-home a {
	text-decoration: none;
}

#go-back-home a span {
	display:  none;
}

#go-back-home a:before {

	content: "<";
	background: hsl(132.2, 59.8%, 52.2%);
	color: hsla(132.2, 59.8%, 12.1%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
	font-weight: bolder;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

#mapview #geoPoint {

	color: white;
	opacity:  0.4;
	text-decoration: none;
}



body#sonar {

	background:
		/* 
		repeating-linear-gradient(to right, hsl(132.2, 59.8%, 52.2%) 0vh, hsl(132.2, 59.8%, 52.2%) 0.4vh, transparent 0.4vh, transparent 10vh),
		repeating-linear-gradient(transparent, transparent 9.8vh, hsl(132.2, 59.8%, 52.2%) 10.2vh, hsl(132.2, 59.8%, 52.2%) 10.2vh, transparent 10.2vh),
		*/

		linear-gradient(to right, transparent 0vw, transparent 32.9vw, hsl(132.2, 59.8%, 74.2%) 32.9vw, hsl(132.2, 59.8%, 74.2%) 33.1vw, transparent 33.1vw), 
		linear-gradient(to right, hsl(132.2, 59.8%, 12.1%) 0vw, hsl(132.2, 59.8%, 12.1%) 0.1vw, transparent 0.1vw), 
		repeating-linear-gradient(to right, hsl(132.2, 59.8%, 52.2%) 0vw, hsl(132.2, 59.8%, 52.2%) 0.1vw, transparent 0.1vw, transparent 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.5vw),

		/*linear-gradient(to bottom, transparent 0vw, transparent 32.9vw, hsl(132.2, 59.8%, 74.2%) 32.9vw, hsl(132.2, 59.8%, 74.2%) 33.1vw, transparent 33.1vw), */
		linear-gradient(to bottom, hsl(132.2, 59.8%, 12.1%) 0vw, hsl(132.2, 59.8%, 12.1%) 0.1vw, transparent 0.1vw), 
		repeating-linear-gradient(to bottom, hsl(132.2, 59.8%, 52.2%) 0vw, hsl(132.2, 59.8%, 52.2%) 0.1vw, transparent 0.1vw, transparent 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.4vw, hsl(132.2, 59.8%, 52.2%) 5.5vw),
		
		hsl(132.2, 59.8%, 12.1%);
}



#map {

	border-style:  solid;
	border-color:  hsl(132.2, 59.8%, 74.2%);
}


#map[data-radius="100"] {

	background: 
		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		repeating-radial-gradient(transparent 0, transparent 5%, hsl(132.2, 59.8%, 74.2%) 5%, hsl(132.2, 59.8%, 74.2%) 5.4%), 
		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
		hsla(132.2, 59.8%, 37.1%, 0.8);

}


#map[data-radius="50"] {

	background: 
		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		repeating-radial-gradient(transparent 0, transparent 10%, hsl(132.2, 59.8%, 74.2%) 10%, hsl(132.2, 59.8%, 74.2%) 10.4%), 
		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
		hsla(132.2, 59.8%, 37.1%, 0.8);

}


#map[data-radius="20"] {

	background: 
		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		repeating-radial-gradient(transparent 0, transparent 12.5%, hsl(132.2, 59.8%, 74.2%) 12.5%, hsl(132.2, 59.8%, 74.2%) 12.9%), 
		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
		hsla(132.2, 59.8%, 37.1%, 0.8);

}


#map[data-radius="10"] {

	background: 
		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		repeating-radial-gradient(transparent 0, transparent 25%, hsl(132.2, 59.8%, 74.2%) 25%, hsl(132.2, 59.8%, 74.2%) 25.4%), 
		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
		hsla(132.2, 59.8%, 37.1%, 0.8);

}


#map[data-radius="5"] {

	background: 
		linear-gradient(  0deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%),
		linear-gradient( 90deg, transparent 49.85%, hsl(132.2, 59.8%, 74.2%) 49.85%, hsl(132.2, 59.8%, 74.2%) 50.15%, transparent 50.15%), 
		linear-gradient( 45deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		linear-gradient(135deg, transparent 49.90%, hsl(132.2, 59.8%, 74.2%) 49.90%, hsl(132.2, 59.8%, 74.2%) 50.10%, transparent 50.10%), 
		repeating-radial-gradient(transparent 0, transparent 50%, hsl(132.2, 59.8%, 74.2%) 100%, hsl(132.2, 59.8%, 74.2%) 100%), 
		/*radial-gradient(circle at center, hsl(132.2, 59.8%, 37.1%) 0%, hsl(132.2, 59.8%, 74.2%) 50%, hsl(132.2, 59.8%, 37.1%) 100%), */
		hsla(132.2, 59.8%, 37.1%, 0.8);

}



#map-deco {

	background: 
		conic-gradient(hsla(132.2, 59.8%, 74.2%, 1) 0deg, hsla(132.2, 59.8%, 74.2%, 0) 45deg, hsla(132.2, 59.8%, 74.2%, 0) 0deg);
	animation:  sonar 5s linear infinite reverse;
}

@keyframes sonar {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(355deg);
	}

}


#map .place {

	opacity: 0;
	animation: appear infinite 5s;
}

@keyframes appear {

	0% {
		opacity:  1;
	}

	100% {
		opacity: 0;
	}
}

#map .place img {
	
	border-radius:  50%;
}


#map .place, 
#map .player {

	cursor:  pointer;
}

#mapview #zoom {
	
	background-color: black;
}

#mapview #zoom a, 
#mapview #zoom a:visited {
	
	color:  white;
	text-decoration: none;
}






#place-details {

	background: var(--panel-bg-color);
	color:  white;

	cursor: auto;

	animation: slideIn 1s forwards;
}

@keyframes slideIn {

	0% {
		transform: translateX(33vw);
	}
	100% {
		transform: translateX(0);
	}
}

#place-details > .place-name {


	background-color: var(--panel-place-name-bg-color);
	color: var(--panel-place-name-color);
}



#place-details > address {
	
	opacity: 0.8;
}

#place-details > address .distance:after {

	content: " à vol d\'OVNI";
}

#place-details .get-directions a span {

	display: none;
}


#place-details .get-directions .car:after {

	content:  "en hyperespace";
}

#place-details .get-directions .bike:after {

	content:  "en vitesse supraluminique";
}

#place-details .get-directions .foot:after {

	content:  "en vitesse subluminique";
}

#place-details > h4 {

	background: var(--panel-place-name-bg-color);
}

#place-details a, 
#place-details a:hover,
#place-details a:focus,
#place-details a:active,
#place-details a:visited {

	color:  inherit;
	text-decoration:  none;
}





#messenger-page {

	background-color: black;
	color:  white;
}



#messenger-page .penpal {

	background: hsl(0, 100%, 50%);
	color:  white;
	font-weight:  bold;
}

#messenger-page #msgList .message {

	color:  white;
}

#messenger-page #msgList .message.in {

	background-color: hsl(132.2, 59.8%, 12.1%);
}

#messenger-page #msgList .message.out {

	background-color: hsl(132.2, 59.8%, 12.1%);
}


#messenger-page #msgList .message .date {

	color: hsl(132.2, 59.8%, 75.2%);
}

#messenger-page #conversations-list {

	background-color: hsl(0, 27.8%, 12.1%);
}

#messenger-page #conversations-list .conversation time {

	font-weight: normal;
	color: hsl(0, 27.8%, 82.1%);
}

#messenger-page #conversations-list .conversation cite {

	font-style: normal;
	font-weight: bold;
}

#messenger-page #conversations-list .conversation .contents-preview {

	height:  1rem;
	overflow: hidden;
}

#messenger-page #conversations-list .conversation {

	background-color: hsl(0, 27.8%, 12.1%);
}

#messenger-page #conversations-list .conversation:hover {

	background-color: hsl(0, 27.8%, 24.2%);
}

#messenger-page #conversation form, 
#messenger-page #conversation textarea {

	background-color: hsl(0, 50.8%, 95.1%);
}

#messenger-page #conversation textarea, 
#messenger-page #conversation .submit-button-wrapper input {

	font-size: 1.5rem;
}

#messenger-page #conversation .submit-button-wrapper input {

	background-color: transparent;
}