* {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

:root {
 font-family: "Roboto Mono", monospace, Arial, Helvetica, sans-serif;
 font-size: 16px;
}

body {
 background-image: url('compass-2946959_1280.jpg');
 background-repeat: repeat-y;
 background-size: 100%;
}

.clearfix::after {
 content: '';
 display: block;
 clear: both;
}

.location {
 max-width: 1200px;
 margin: 0 auto;
 overflow: hidden;
}

.location__title {
 width: 90%;
 max-width: 500px;
 padding: 10px 10px;
 margin: 100px auto 20px auto;
 border: 4px solid brown;
 border-radius: 10px;
 background-color: rgba(95, 158, 160, 0.5);
 color: white;
}

.location__form {
 width: 90%;
 max-width: 500px;
 margin: 30px auto;
 padding: 10px 0;
 background-color: rgba(0, 0, 0, 0.6);
 border: 4px solid cadetblue;
 border-radius: 10px;
 color: white;
}

label {
 display: block;
 width: 90%;
 margin: 10px auto;
}

input {
 display: block;
 margin: 5px auto;
 width: 80%;
 border-radius: 5px;
 height: 40px;
 font-size: 20px;
}

.location__btnForm,
.location__btnMap,
.location__btnRemove {
 display: inline-block;
 width: 200px;
 height: 50px;
 padding: 5px 10px;
 margin: 10px 30px;
 border-radius: 5px;
 border: 1px solid brown;
 background-color: cadetblue;
 font-family: "Roboto Mono", monospace, Arial, Helvetica, sans-serif;
 font-size: 0.9rem;
 font-weight: 600;
 cursor: pointer;
}

.location__btnMap a {
 display: inline-block;
 width: 100%;
 height: 38px;
 line-height: 38px;
 text-decoration: none;
 color: black;
}

.location__btnForm:hover,
.location__btnMap:hover,
.location__btnRemove:hover,
.location__btnMap a:hover {
 background-color: black;
 color: white;
}

.location__info {
 width: 90%;
 height: 200px;
 margin: 30px auto;
 padding: 10px;
 opacity: 0;
 -webkit-transition: 1s;
 -o-transition: 1s;
 transition: 1s;
 text-align: center;
 font-size: 2rem;
 color: rgb(251, 246, 247)
}

.location__arrowMother {
 width: 90%;
 margin: 0 auto;
}

.location__arrow {
 position: relative;
 height: 150px;
 width: 150px;
 margin: 0 auto;
 border-radius: 50%;
 overflow: hidden;
 -webkit-box-shadow: -5px 20px 4px 4px rgb(0, 0, 0, 0.7);
         box-shadow: -5px 20px 4px 4px rgb(0, 0, 0, 0.7);
 background-image: url('globus-2534766_640.png');
 background-repeat: no-repeat;
 background-size: 120%;
 background-position: center;
 text-align: center;
 font-size: 3rem;
 color: white;
 cursor: pointer;
}

.fa-solid {
 position: absolute;
 left: 50%;
 top: -80%;
 -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
         transform: translateX(-50%);
 text-shadow: 0 20px white, 0 40px white;
 -webkit-animation: arrows 2s linear both infinite;
         animation: arrows 2s linear both infinite;
}

@-webkit-keyframes arrows {
 100% {
  -webkit-transform: translateX(-50%) translateY(600%);
          transform: translateX(-50%) translateY(600%);
 }
}

@keyframes arrows {
 100% {
  -webkit-transform: translateX(-50%) translateY(600%);
          transform: translateX(-50%) translateY(600%);
 }
}

/* result Container */
.location__result {
 display: grid;
 grid-template-columns: 1fr;
 row-gap: 10px;
 width: 90%;
 margin: 0 auto;
}

.location__House {
 padding: 10px;
 background-color: rgba(172, 170, 85, 0.7);
}

.location__name span,
.location__lat span,
.location__long span {
 font-weight: 800;
 font-size: 1.1rem;
}

/* error field
.location__error {
 display: none;
 position: fixed;
 left: 50%;
 top: 30%;
 transform: translateX(-50%);
 width: 340px;
 height: 200px;
 background-color: orangered;
 border: 2px solid brown;
 border-radius: 10px;
}

.location__error.show {
 display: block;
}

.location__error-info {
 padding: 10px;
}

.location__error-btn {
 position: absolute;
 left: 50%;
 bottom: 20%;
 transform: translateX(-50%);
 width: 150px;
 height: 50px;
 cursor: pointer;
} */

/* maked locationDiv */
.location__House {
 border: 2px solid black;
 border-radius: 10px;
}

/*map  */
#map {
 display: block;
 margin: 20px auto;
 height: 300px;
 width: 95%;
 border-radius: 10px;
 z-index: 0;
}

/* footer is important for scrolling to results */
footer {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 height: 200px;
 margin-top: 200px;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 10px;
 color: white;
}

footer .footer__info {
 text-align: center;
 font-size: 1.5rem;
}

.footer__button {
 margin-bottom: 20px;
 padding: 5px;
 border: 2px solid green;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 5px;
 font-weight: 600;
 color: red;
 cursor: pointer;
}

@media(min-width:1024px) {
 .location__form {
  width: 45%;
  max-width: 500px;
  margin-left: 20px;
  float: left;
 }

 .location__btnsMother {
  width: 45%;
  float: left;
  margin-top: 50px;
  margin-left: 30px;
 }

 .location__info {
  float: left;
  width: 45%;
  margin-top: 50px;
  margin-left: 30px;
 }

 .location__arrowMother {
  float: left;
  width: 45%;
  margin-left: 30px;
 }

 .location__arrow {
  height: 200px;
  width: 200px;
  font-size: 4rem;
 }

 #map {
  width: 100%;
  height: 500px;
 }

 .location__result {
  grid-template-columns: 1fr 1fr;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
 }
}