html {
  font-family: 'B612', sans-serif;
}

/*cualquier elemento con el atributo hidden
para que funcione en los flexbox*/
[hidden] {
  display: none;
}

body {
  display: flex;
  background-color: rgb(132, 199, 221);
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

main {
  height: 95%;
  width: 95%;
  background-color: lightblue;
  border-radius: 25px;
  padding-bottom: 20%;

  -webkit-box-shadow: 8px 24px 24px 8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 8px 24px 24px 8px rgba(0, 0, 0, 0.75);
  box-shadow: 8px 24px 24px 8px rgba(0, 0, 0, 0.75);
}

h1 {
  text-shadow: blue 20px;
}

h2 {
  margin: 0;
}

button {
  font-size: large;
  font-weight: bold;
  width: 75%;
  height: 50px;
  margin: 20px;
  background-color: rgb(127, 212, 255);
  border-radius: 10px;

  -webkit-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  -moz-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
}

section {
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  font-size: large;
  font-weight: bold;
}

ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

li {
  margin: 10px;
}

fieldset {
  border: 5px solid #0bbbec;
  border-radius: 25px;
  
  -webkit-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  -moz-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
}

button#viewBylocationBTN {
  background-color: rgb(127, 161, 255);
}

button#saveToFavouritesBtn {
  background-color: rgb(219, 255, 127);
}

input[type=submit] {
  font-size: large;
  font-weight: bold;
  width: 50%;
  height: 50px;
  margin: 10px;
  background-color: rgb(127, 255, 168);
  border-radius: 10px;

  -webkit-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  -moz-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
}

input[type=text] {
  font-size: large;
  font-weight: bold;
  width: 50%;
  height: 50px;
  margin: 10px;
  background-color: rgb(166, 251, 193);
  border-radius: 10px;
}

p#leyenda {
  font-size: small;
  padding-left: 10%;
  color: lightslategray;
}

img#aircraftImg {
  width: 50vw;
}

#map {
  height: 400px;
  width: 400px;
  border-radius: 20px;

  -webkit-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  -moz-box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
  box-shadow: 8px 14px 24px 1px rgba(102, 174, 196, 1);
}

@media screen and (min-width: 700px) {
  #map {
    width: 500px;
  }

}

@media screen and (min-width: 1025px) {

  #map {
    width: 800px;
  }
}

#loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}