html{
  scroll-behavior: smooth;

}
body{
  background-color: #E1DDDB;
  margin: 0;
}
.parent{
  position: fixed;
  margin: auto;
  width: 100%;
}
:target:before {
    content: "";
    display: block;
    height: 150px;
    margin: -150px 0 0;
}

#navbar{
  background-color: #39401F;
  display: flex;
  justify-content: space-between;
  font-size: 30px;
  z-index:1 !important;
}
#title{
  color: white;
  font-family: 'Fuggles', serif;
  font-size: 61px;
  margin-left: 25px;
  line-height: 10px;
  text-align: center;
}
.links{
  display: flex;
  flex-direction: row;
  align-items: center;
}
section{
  margin-top: 14vh;
}
a{
  color: white;
  font-style: normal;
  text-decoration: none;
}

nav a{
  padding: 0 1.2vw 0 1.2vw;
  font-family: 'Zen Loop', sans-serif;
}
main{
  padding-top: 9%;
  max-width: 100%;
}
.welcome-img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
.reserve-button {
  position: absolute;
  bottom: 10%;
  right: 12%;
  background-color: #969691;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}
.text-box{
  display: block;
  text-align: center;
}
h1{
  font-size: 40px;
  font-family: 'Montserrat', sans-serif;
}
p{
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
}
h2{
  font-family: 'Montserrat', sans-serif;
}
.facilities{
  display:flex;
  flex-direction:row;
  justify-content: center;
}
.facility-item{
  display:flex;
  flex-direction:row-reverse;
  align-items: center;
  padding:0 2em 0 2em;
  font-size: 25px;
}
.text{
  max-width: 75%;
  margin: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  justify-content: center;
}
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
i{
  margin-right: 10px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
.contact-tile{
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
margin-right:2em;
font-size: 25px;
}
.contact-list{
display: flex;
flex-direction: row;
justify-content:  center;
margin-top: 40px;
}
.contact-tile a{
color: black;
}
#Contact{
display: block;
max-width: 100%;
text-align: center;
}
#Reserve, #Location{
  text-align:center;
}
#Location{
  padding: 0;
}
#tourist-attractions{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 3vw;
  flex-wrap: wrap;
}
.attraction-tile{
  max-width: 100%;
  height: auto;
  width: 25%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background-color: #969691;
  margin: 1vw;
  padding: 0 0 1vw 0;
  color: white;
  box-shadow: 0 20px 25px rgba(0,0,0,0.18), 0 6px 6px rgba(0,0,0,0.23);
}
.attraction-img{
  object-fit: contain;
  vertical-align: center;
}
.attraction-text{
  text-align: center;
  font-size: 20px;
  transition: 0.5s;
}
.attraction-text:hover{
  color: #39401F;
}
#show-all-button{
  background-color: #39401F;
  padding: 20px;
  text-align:center;
  max-width 20%;
  height: auto;
  font-size: 20px;
  transition: 0.5s;
  margin: 15px;
}
#show-all-button:hover{
  background-color: #9EA77A;
}
.show-all{
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-row{
  display: flex;
  flex-direction: row;
  margin-top: 2vh;
  justify-content: space-between;
}
.form-box{
  display: flex;
  flex-direction: column;
  margin-right: 2vw;
  width: 100%;
  max-width: 100%;
}
label{
  margin-bottom: 1vh;
}
.feedback-section{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.feedback-image{
  max-width: 50%;
  height: auto;
}
#submit{
  margin-top: 2vh;
  border-radius: 5px;
  border: 0;
  padding: 10px 20px;
  color: white;
  background-color:  #969691;
  transition: 0.5s;
  font-family: 'Montserrat', sans-serif;
}
#submit:hover{
  background-color: #9EA77A;
}
form{
  max-width: 50%;
  height: auto;
  font-family: 'Montserrat', sans-serif;
}
textarea{
  max-width: 60%;
  border-radius: 5px;
  border: 0;
}
form{
  font-size: 20px;
}
input{
  width: 100%;
  height: 30px;
  margin-bottom: 15px;
  margin-top: 5px;
  border-radius: 5px;
  border: 0;
}
footer{
  background-color: #39401F;
  height: 10vh;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
footer p{
  margin-right: 15px;
  font-size: 15px;
}
@media screen and (max-width: 960px){
  :target:before {
      height: 220px;
      margin: -220px 0 0;
  }
  .feedback-image{
    display: none;
  }
  form{
    max-width: 100%;
    height: auto;
  }
  textarea{
    max-width: 100%;
  }
  .contact-list{
  display: flex;
  flex-direction: column;
  justify-content:  center;
  }
  .attraction-tile{
    margin-bottom: 20px;
  }
  #title{
    line-height: 50px;
  }
  .links{
    flex-wrap: wrap;
  }
  main{
    padding-top: 30%;
  }
  .facilities{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }
  .column {
    flex: 50%;
    max-width: 50%;
  }
  iframe{
    width: 300px;
    height: 200px;
  }
  /* FIXME: find another method, it doesn t work well */
  .airbnb-embed-frame{
    max-width: 90%;
  }
  #tourist-attractions{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .attraction-tile{
    width: 50%;
  }
}
@media screen and (max-width: 546px){
  main{
    padding-top: 45%;
  }
  .column {
    flex: 100%;
    max-width: 80%;
  }
  .attraction-tile{
    width: 80%;
  }
 .links{
   margin-left:10px;
 }
 .text{
   max-width: 89%;
   margin: auto;
 }
}