:root {
  --background-color: rgb(0, 45, 58);
  --font-color1: white;
  --font-color2: rgba(17, 25, 40, 0.58);
}

* {
  margin: 0px;
  padding: 0px;
}

/* HEADER */
header {
  position: fixed;
  color: var(--font-color1);
  top: 0;
  width: 100%;
  backdrop-filter: blur(7px) saturate(200%);
  -webkit-backdrop-filter: blur(7px) saturate(200%);
  background-color: rgb(0, 45, 58, 0.64);
  height: 70px;
  ul {
    /* float: right;
    padding-right: 30px;
    padding-top: 24px; */

    li {
      display: inline;
      padding-left: 40px;
      @media screen and (max-width: 500px) {
        padding-left: 10px;
      }
      @media screen and (max-width: 400px) {
        padding: 0;
      }
    }
    a {
      color: var(--font-color1);
      text-decoration: none;
      @media screen and (max-width: 500px) {
        font-size: 15px;
      }
      @media screen and (max-width: 400px) {
        font-size: 10px;
      }
    }
    a:hover {
      color: black;
    }
  }
  h2 {
    float: left;
    padding-left: 20px;
    padding-top: 20px;
    @media screen and (max-width: 500px) {
      font-size: 18px;
      padding-top: 24px;
    }
  }
}

/* HERO SECTION */

.heroSection {
  background-image: url(https://images.pexels.com/photos/3560168/pexels-photo-3560168.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
  height: 100vh;
  width: 100%;
  @media screen and (max-width: 500px) {
    height: 70vh;
  }
  h1 {
    color: var(--font-color1);
    font-size: 800%;
    padding-top: 38vw;
    text-align: center;
    @media screen and (max-width: 500px) {
      font-size: 40px;
      padding-top: 60vh;
    }
    @media screen and (max-width: 400px) {
      font-size: 30px;
    }
  }
}

section#travel {
  .travel {
    display: flex;
    background-color: var(--background-color);
    @media screen and (max-width: 500px) {
      flex-direction: column;
    }
    .left {
      background-image: url(https://images.unsplash.com/photo-1507880572231-f85401ce76e6?q=80&w=2158&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      height: 100vh;
      background-size: cover;
      background-position: center;
      padding-top: 20px;
      @media screen and (max-width: 500px) {
        height: 70vh;
      }
      h2 {
        color: var(--font-color1);
        writing-mode: vertical-rl;
        font-size: 50px;
        padding-left: 40px;
      }
    }

    .left,
    .right {
      width: 50%;
      @media screen and (max-width: 500px) {
        width: 100%;
      }
    }

    .right {
      background-color: var(--background-color);
      color: var(--font-color1);
      
      h4 {
        padding-left: 20px;
        padding-top: 20px;
        font-size: 30px;
      }
      p {
        padding-left: 20px;
        padding-right: 40px;
        padding-bottom: 20px;
        padding-top: 20px;
      }

      .images a:hover {
        background-color: rgb(0, 0, 0);
        opacity: 0.8;
      }

      .images {
        display: flex;
        padding-top: 20px;
        @media screen and (max-width: 500px) {
          width: 100%;
        }

        .rightimgdiv,
        .rightimgdiv2,
        .rightimgdiv3 {
          display: flex;
          height: 280px;
          width: 220px;
          background-size: cover;
          background-position: center;
          margin-left: 20px;
          @media screen and (max-width: 500px) {
            height: 60vh;
            width: 33%;
            margin-left: 0;
          }
          a {
            color: rgb(0, 45, 58);
            height: 280px;
            width: 220px;
            text-decoration: none;
            font-weight: 900;
            text-align: center;
            font-size: 30px;
            @media screen and (max-width: 500px) {
              height: 60vh;
              width: 100%;
              margin-left: 0;
            }
          }
        }

        .rightimgdiv {
          background-image: url(https://images.unsplash.com/photo-1610056352054-a68fe4f998e1?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        }

        .rightimgdiv2 {
          background-image: url(https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=1925&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        }

        .rightimgdiv3 {
          background-image: url(https://images.unsplash.com/photo-1606017259057-527114e27826?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        }
      }
    }
  }
}
/* DESCRIPTION */

section#description {
  height: 80vh;
  color: rgb(255, 255, 255);
  font-size: 30px;
  background-color: var(--background-color);
  display: flex;
  align-items: center;
  p {
    text-transform: uppercase;
    text-align: center;
    @media screen and (max-width: 500px) {
      font-size: 20px;
      padding: 50px;
    }
  }
}

/* ACTIVITIES */

section#activities {
  background-color: var(--background-color);
  height: 100vh;
  padding-top: 100px;
  @media screen and (max-width: 500px) {
    height: 270vh;
  }
  @media screen and (max-width: 400px) {
    height: 220vh;
  }

  h4 {
    color: var(--font-color1);
    text-align: center;
    padding-top: 50px;
    font-size: 30px;
    padding-bottom: 40px;
  }
  .allactivities {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    @media screen and (max-width: 500px) {
      flex-direction: column;
    }
    .activity1,
    .activity2,
    .activity3 {
      margin-right: 20px;
      @media screen and (max-width: 500px) {
        margin-right: 0;
      }
    }

    .activity1:hover p,
    .activity2:hover p,
    .activity3:hover p,
    .activity4:hover p {
      visibility: visible;
    }
    .activity1,
    .activity2,
    .activity3,
    .activity4 {
      @media screen and (max-width: 500px) {
        padding-bottom: 5%;
      }
      img {
        width: 20vw;
        height: 60vh;
        object-fit: cover;
        object-position: center;
        @media screen and (max-width: 500px) {
          width: 100vw;
          height: 50vh;
        }
      }
      p {
        visibility: hidden;
        color: var(--font-color1);
        font-size: 20px;
        text-align: center;
      }
    }
  }
}

/* OAHU */

section#oahu {
  display: flex;
  @media screen and (max-width: 500px) {
    flex-direction: column;
  }

  .leftoahu,
  .rightoahu {
    width: 50%;
    @media screen and (max-width: 500px) {
      width: 100%;
    }
  }
  .rightoahu {
    background-image: url(https://images.pexels.com/photos/2127969/pexels-photo-2127969.jpeg);
    height: 600px;
    background-size: cover;
    background-position: center;
  }

  .leftoahu {
    background-color: var(--background-color);
    height: 600px;
    color: var(--font-color1);
  }
}

/* NEWSLETTER */

section#newsletter {
  background-image: url(https://images.pexels.com/photos/1577238/pexels-photo-1577238.jpeg);
  width: auto;
  height: 550px;
  background-position: center;
  background-size: cover;
  text-align: center;

  h4 {
    padding-top: 40px;
    color: var(--font-color1);
    font-size: 50px;
  }

  p {
    color: rgb(0, 45, 58);
    font-weight: 600;
    margin-bottom: 360px;
    @media screen and (max-width: 500px) {
      margin-bottom: 35vh;
    }
    @media screen and (max-width: 400px) {
      margin-bottom: 20vh;
    }
  }

  a {
    background-color: white;
    opacity: 0.8;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    text-decoration: none;
    font-weight: 700;
    color: rgb(0, 45, 58);
  }

  a:hover {
    background-color: rgb(0, 45, 58);
    color: white;
  }
}

/* FOOTER */

footer {
  background-image: url(https://images.unsplash.com/photo-1488921618671-463b781ac428?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  height: 200px;
  width: auto;
  background-position: center;
  background-size: cover;
  display: flex;

  h2 {
    color: rgb(255, 255, 255);
    writing-mode: vertical-rl;
    font-size: 35px;
    padding-left: 40px;
    padding-top: 20px;
  }

  nav {
    color: var(--font-color1);
    display: flex;
    padding-top: 35px;
    font-size: 20px;
    font-weight: 500;
    @media screen and (max-width: 500px) {
      padding: 0;
    }
    @media screen and (max-width: 400px) {
      padding-left: 0;
      padding-top: 5%;
      font-size: 18px;
    }
   
    ul {
      /* padding-right: 125px; */
      @media screen and (max-width: 400px) {
        padding-right: 0;
      }

      li {
        list-style-type: none;
        
      }
    }

    a {
      color: var(--font-color1);
      text-decoration: none;
      @media screen and (max-width: 400px) {
        color: black;
      }
    }

    a:hover {
      color: var(--font-color1);
    }
  }
}