body {
    background-image:url("../images/beach-background2.jpg");
    background-size:cover;
    margin-left:100px;
    margin-right:100px;
    margin-bottom:100px;
  }
  h1 {
    font-family:'Seaweed Script',cursive;
    color:floralwhite;
    font-size:60px;
  }
  .aboutheader,.thingsheader,.accomodationheader {
    font-family:'Seaweed Script',cursive;
    color:floralwhite;
    font-size:50px;
  }
  h2,h3 {
    font-family:'Original Surfer',sans-serif;
  }
  h1,h2,h3 {
    text-align:center;
  }
  p {
    font-family:'Raleway',sans-serif;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:30px;
    text-align:justify;
  }

  .footerp{
    text-align:center;
  }

  ul {
    display:flex;
    list-style-type:none;
    justify-content:space-between;
  }
  .item1 {
    background-color:#adeee9;
  }
  .about1 {
    background-color:#adeee9;
    padding: 25px;
  }
  .about3 {
    background-color:#c8eddc;
    padding: 25px;
  }
  .about5 {
    background-color:#e4ebcf;
    padding: 25px;
  }
  .things2,.things5 {
    background-color:#adeee9;
  }
  .things3,.things6 {
    background-color:#c8eddc;
  }

  .things2, .things3, .things5, .things6{
    padding: 25px;
  }
  .accomodation2,.accomodation5 {
    background-color:#adeee9;
  }
  .accomodation3,.accomodation6 {
    background-color:#c8eddc;
  }

  .hoursp{
    text-align: center;
  }

  .socialp{
    text-align: center;
  }

  .item2 {
    background-color:#c8eddc;
  }
  .item3 {
    background-color:#e4ebcf;
  }
  .active .link2 .link3 .link4 {
    font-family:'Original Surfer',sans-serif;
  }
  .topnav {
    overflow:hidden;
    background-color:skyblue;
  }
  .topnav a {
    float:left;
    display:block;
    color:black;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
    font-size:17px;
    font-family:'Original Surfer',sans-serif;
  }
  .topnav a:hover {
    background-color:#ddd;
    color:black;
  }
  .topnav a.active {
    background-color:#04AA6D;
    color:white;
  }
  .topnav .icon {
    display:none;
  }
  .fblogo,.twlogo {
    text-align:center;
  }
  .addlinks {
    text-align:center;
    text-decoration:none;
    font-size:large;
  }
  .footer {
    background-color:#ffeac2;
  }

  
  /* Small Screen */
  
  @media screen and (max-width:600px) {
    .topnav a:not(:first-child) {
    display:none;
  }
  .topnav a.icon {
    float:right;
    display:block;
  }
  .topnav.responsive {
    position:relative;
  }
  .topnav.responsive .icon {
    position:absolute;
    right:0;
    top:0;
  }
  .topnav.responsive a {
    float:none;
    display:block;
    text-align:left;
  }
  .container {
    display:grid;
    grid-template-columns:100%;
  }
  .aboutcontainer {
    display:grid;
    grid-template-columns:100%;
  }
  .thingscontainer {
    display:grid;
    grid-template-columns:100%;
  }
  .businesscontainer {
    display:grid;
    grid-template-columns:100%;
  }
  .aboutimages {
    max-height:100%;
    max-width:100%;
  }
  .thingsimages {
    max-height:100%;
    max-width:100%;
  }
  .businessimages {
    max-height:100%;
    max-width:100%;
  }
  
  }
  /* Medium Screen - Laptops */

  @media screen and (min-width:601px) and (max-width:1200px) {
    .container {
    display:grid;
    grid-template-columns:50% 50%;
  }

  .item3 {
    grid-column:1 / span 2;
  }
  .footer {
    grid-column:1 /span 3;
  }
  .aboutimages {
    max-height:100%;
    max-width:100%;
  }
  .thingsimages {
    max-height:100%;
    max-width:100%;
  }
  .businessimages {
    max-height:100%;
    max-width:100%;
  }
  
  }
  
  /* Large Screen */
  
  @media screen and (min-width:1201px) {
    .container {
    display:grid;
    grid-template-columns:33.3% 33.3% 33.3%;
  }
  .aboutcontainer {
    display:grid;
    grid-template-columns:50% 50%;
    
  }
  .thingscontainer {
    display:grid;
    grid-template-columns:50% 50%;
  }

  .businesscontainer {
    display:grid;
    grid-template-columns:50% 50%;
  }
  .aboutimages {
    max-height:100%;
    max-width:100%;
  }
  .thingsimages {
    max-height:100%;
    max-width:100%;
  }
  .businessimages {
    max-height:100%;
    max-width:100%;
  }
  
  .about1 {
    
    grid-column:1 / span 1;
  }
  .about2 {
    
    grid-column:2 / span 1;
    
    
  }
  .about3 {
    
    grid-column:1 / span 1;
    
  }
  .about4 {
    background-color:pink;
    grid-column:2 / span 1;
    margin-bottom: -10px;
  }
  .about5 {
    background-color:#e4ebcf;
    grid-column:1 / span 1;
  }
  .about6 {
    background-color:orange;
    grid-column:2 / span 1;
    margin-bottom: -10px;
  }
  .things1 {
    
    grid-column:1 / span 1;
    grid-row:1 / span 2;
    margin-bottom: -10px;
    
  }
  .things2 {
    background-color:#adeee9;
    grid-column:2 / span 1;
  }
  .things3 {
    background-color:#c8eddc;
    grid-column:2 / span 2;
  }
  .things4 {
   
    grid-column:1 / span 1;
    grid-row:3 / span 2;
    margin-bottom: -10px;
    
  }
  .things5 {
    background-color:#adeee9;
    grid-column:2 / span 1;
  }
  .things6 {
    background-color:#e4ebcf;
    grid-column:2 / span 1;
  }
  .accomodation1 {
    
    grid-column:1 / span 1;
    grid-row:1 / span 2;
    margin-bottom: -10px;
    
    
  }
  .accomodation2 {
    background-color:#adeee9;
    grid-column:2 / span 1;
  }
  .accomodation3 {
    background-color:#c8eddc;
    grid-column:2 / span 2;
  }
  .accomodation4 {
    
    grid-column:1 / span 1;
    grid-row:3 / span 2;
    margin-bottom: -10px;
    
  }
  .accomodation5 {
    background-color:#adeee9;
    grid-column:2 / span 1;
  }
  .accomodation6 {
    background-color:#e4ebcf;
    grid-column:2 / span 1;
  }
  .footer {
    grid-column:1 / span 3;
  }
  }