body {
  background-image: url(img/hatter.jpg);
  background-repeat: repeat;
}

/* ---   Area-one   ---    */
.area-one {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.area-one-container img {
  width: 100%;
}

/* ---   Area-two   ---    */
.area-two {
   width: 100%;
  max-width: 800px;
  margin: 0 auto; 
}
.area-two-container {
  background-color: #f9eec6;
  padding: 3rem 0;
  border: 10px solid #cfb88e;
  height: 50vh;
}
.area-two-container p {
  color: #65311c;
  font-size: 1.2rem;
  text-align: center;
}
.area-two-container p a {
  color: #65311c;
  font-size: 1.7vw;
  text-align: center;
}

@media only screen
and (max-width : 767px) {
  .area-two-container p {font-size: 4.2vw;}  
  .area-two-container p a {font-size: 4.2vw;}
}