html, body{
  background-image: url("./images/map2.jpg"); /* The image used */
  background-color: #d6b8a0; /* Used if the image is unavailable */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

h1 {
    font-family: 'Pirata One', cursive;
    color:rgb(8, 8, 8);
      -webkit-text-fill-color: black;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: white;
    font-size: 48px;
    text-align:center;

}
h2 {
  text-align:center;
}

nav{
  font-size: 24px;
  font-family: 'Pirata One', cursive;
}
body {
    /* Box-model */
  padding: 0;

  /* Positioning */
  margin: 0;
  font-family: 'Pirata One', cursive;

  /* Typography */
  font-size: 18px;
  line-height: 150%;
  color: #333;
}
image{
  opacity: .4;
   filter: alpha(opacity=53); /* For Internet Explorer 8 and earlier */
    font-family: 'Pirata One', cursive; 
}
button{
  font-family: 'Pirata One', cursive;
}
p{
  font-family: 'Pirata One', cursive;
  font-size: 24px;
    color:rgb(8, 8, 8);
    text-align:center;
}
footer{
  font-family: 'Pirata One', cursive;
    color:rgb(8, 8, 8);
    text-align:center;
}

.navbar-brand{
  font-size: 24px;
}

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
    font-size: 24px;
}

.treasure-chest-title{
  font-size: 48px;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.text-box{
  font-family: 'Pirata One', cursive;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
legend{
  font-family: 'Pirata One', cursive;
  color:rgb(8, 8, 8);
}
form{
  font-family: 'Pirata One', cursive;
  color:rgb(8, 8, 8);
}

.formFieldset{
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.image-container{
  border-style: dashed;
  padding: 20px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-height: inherit;
  max-width: fit-content;
}

#treasure-form{
  margin-left:auto;
  margin-right:auto;
}

.treasure-images{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

#myMap{
  position:relative;
  width:600px;
  height:400px;
  margin-left:auto;
  margin-right:auto;
}

#formDiv{
  margin-left:auto;
  margin-right:auto;
}

#label{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#textbox{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 890px) {
  /* The body's bg color will be #333 */
  .textbox {
    width: 100px;
    margin-left: auto;
    margin-right: auto
  }
  .label {
    font-size: 20px;
    margin-left: auto;
    margin-right: auto
  }
  h3 {
    font-size: 22px;
    margin-left: auto;
    margin-right: auto
  }
}

@media screen and (max-width: 650px) {
  /* The body's bg color will be #333 */
  #myMap {
    width: 400px;
  }
}

@media screen and (max-width: 375px) {
  .textbox {
    width: 75px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
  }
  .label {
    font-size: 18px;
  }
  h3 {
    font-size: 20px; 
  }
  #myMap {
    width: 200px;
  }

}


#mapLocationForm {
  border: dashed 2px black;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.479);
  margin-left: auto;
  margin-right: auto;
}

#pastLocations{
  border: dashed 2px black;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.479);
}

#pastLocationDiv{
  border: dashed 2px black;
 text-align: center;
}

#pinLocationDiv{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#dragInstructions {
  margin-left:auto;
  margin-right:auto;
}