/* TYPOGRAPHY */
h1 {
  margin:8% 5% 5% 5%;
  color: var(--green);
  text-shadow: 2px 2px 4px var(--green)(0, 0, 0, 0.5);
  text-align:center;
  position:relative;
  z-index:100;
}
h2 {
  text-align:center;
}

/* PAGE INTRO */
.page-intro {
  width: 100%;
  height:47vh;
  overflow: hidden;
  margin-top:10vh;
  padding-bottom:10vh;
}
.page-intro img:first-of-type {
  width:100vw;
  opacity:.75;
  position:relative;
  top:0;
  left:0;
  z-index: 1;
}


/* MAIN CONTENT */
.main-content {
  background-color: linear-gradient(180, var(--beige), rgba(0,0,0,0));
  padding:0 10% 0 10%;
}

.main-content #tagline {
  text-align:center;
  font-size: 2rem;
  margin:0 20% 0 20%;
}
/* > BODY CONTENT */
.body-content {
  display: flex;
  flex-direction: row; 
  margin-top:5%;
  padding:5%;
}


/* >> INFORMATION */
.info {
  background-color:var(--pale-green);
  color:var(--cream);
  border-radius:10%;
  border: 6px double var(--green);
  width:27vw;
  height:fit-content;
  padding:3%;  
}
.info h3 {
  margin-bottom:3%;
}

/* >>> CONTACT */
.contact {
  display:grid;
  grid-template-columns:1fr 8fr;
  grid-template-rows: repeat(2, 1fr);
}

.contact img {
  margin-top:10%;
  margin-left:30%;
}
.contact img:first-of-type {
  grid-column-start: 1;
  grid-row-start: 1;
}
.contact img:last-of-type {
  grid-column-start: 1;
  grid-row-start: 2;
}

.contact a {
  color:var(--cream);
}

.contact a:hover {
  font-style:italic;
  color:white;
}

#star-divider {
  display:flex;
  flex-direction: row;
  width:10vw;
  justify-content: space-around;
}

/* >>> HOURS */
.hours {
    display:flex;
    flex-direction: row;
    width:22vw;
    margin-top:3%;

}
.day {
    border-radius: 100%;
    width:36px;
    height:36px;
    margin:auto;
    padding-top:3px;
    border:4px solid var(--green);
    text-align:center;
    font-weight: bold;
    line-height:1.2rem;
}

/* >> DESCRIPTION */
.description {
  padding:3%;
  padding-left:5%
}

#facebook, #insta {
  display: flex;
  flex-direction:row;
}


#logo {
  width:24px;
  height:24px;
}


/* EXPLORE MORE */
.explore {
  margin-top:20%;
}
.five-row {
  display: flex;
  flex-direction:row;
  width:80vw;
  height:20vh;
  margin:5% 9% 10% 9%;
}


/* ////////////////////////////////////////////// */
/* RESPONSIVE LAYOUT */
/* > mobile */
@media (max-width: 430px) {
  /* need to reformat body-content to be just regular stack
     */
     .page-intro {
      height:20vh;
      padding-bottom:3vh;
     }
    html {
      font-size:16px;
    }

    h1 {
      line-height:2.7rem;
      font-size:2.5rem;
      margin-top:3%
    }

    #tagline {
      line-height:1.4rem;
      font-size:2rem;
      margin: 0 10% 0 10%;
    }
     .body-content {
      display:flex;
      flex-direction: column;
     }
     .page-intro img:last-of-type {
      display:none;
     }
     
     .info { 
      border-radius:10%;
      width:80vw;
      height:fit-content;
      padding:5%;  
    }

    .day {
      border-radius: 100%;
      width:36px;
      height:36px;
      padding:0;
    }
     

}