*{
  margin: 0.2rem;
  padding: 0;
  outline: 0;
  border: 0;
  background-color: #2b2b2b;
}
body{
  transform: scale(3);
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
h1,p,#getLoc{
  margin: .5rem 1rem;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
code{
  color: orange;
}
button,label{
  cursor: pointer;
}
#getLoc {
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 1rem;
  padding: .5rem 1rem;
  border: 1px solid #00ff9d;
  transition: all .3s;
}
#getLoc:hover{
  box-shadow: 1px 6px 10px -5px rgb(2 255 158 / 38%);
  color: rgb(255, 207, 118);
}
#getLoc:active{
  background-color: #00ff9d;
  color: black;

}
h1{
  font: 1rem;
}

.flex{
  display: flex;
}
.justify-center{
  justify-content: center;
}
.align-center{
  align-items: center;
}
p{
  padding: 0;
}
[id=result]{
  border: 1px dashed rgba(255, 255, 255, 0.384);
}
[id=mapopen]{
  
margin: 0.5rem;
  
color: #999;
transition:all 600ms cubic-bezier(0.61, 1.07, 1, 1);
  
display: flex;
  
/* justify-content: space-evenly; */
}
.opacity-0{
  opacity: 0;
  transform: translateY(2.3rem);
}
[id=mapopen]:active{  
color: white;
}

.cls-1,
.cls-2,
.cls-4 {
  fill: #2b2b2b;
  stroke-width: 0.75px;
}
.cls-1,
.cls-4 {
  stroke: #999;
}
.cls-1,
.cls-2 {
  stroke-miterlimit: 10;
}
.cls-2 {
  stroke: #999;
}
.cls-3 {
  fill: #999;
}
.cls-4 {
  stroke-linecap: round;
  stroke-linejoin: round;
}