/* Universal selector */
* {
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Element selectors */
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #0c1522;
	text-align: center;
}

p {
	color: white; 
}

/* Class selectors */
.custom-map-control-button {
  background-color: white;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}

.custom-map-control-button:hover {
  background: rgb(235, 235, 235);
}

.footer {
	background-color: #0c1522;
}

/* Id selectors */
#total {
  animation: blink 1.3s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#result {
	background-color: #17191b;
	border-radius: 10px;
  height: 300px;
  width: 60%;
	margin-left: auto;
  margin-right: auto;
	border-radius: 10px;
	box-shadow: 4px 4px hsl(204, 86%, 53%);
}

#map {
  height: 400px;
  width: 42%;
	margin-left: auto;
  margin-right: auto;
	border-radius: 10px;
	box-shadow: 4px 4px hsl(204, 86%, 53%);
}

#test {
	background-color: #17191b;
	border-radius: 10px;
  height: 300px;
  width: 60%;
	margin-left: auto;
  margin-right: auto;
	border-radius: 10px;
	box-shadow: 4px 4px hsl(204, 86%, 53%);
}