@charset "utf8";

/* 
Styles for the home page
*/

@import url("base.css");

/* BANNER */

#banner {
  background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(./resources/meals2.jpg) center center / cover no-repeat;
  background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 0.6)),
      to(rgba(0, 0, 0, 0.6))
    ),
    url(./resources/meals2.jpg) center center / cover no-repeat;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(./resources/meals2.jpg) center center / cover no-repeat;
}

/* SPECIALS */

#cards-container {
  margin-bottom: 2rem;
}

.card {
  padding: 1rem;
  border-radius: calc(5px + 2%);
  -webkit-box-shadow: 0 0 20px var(--light-gray);
  box-shadow: 0 0 20px var(--light-gray);
  -webkit-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
  margin-bottom: 2rem;
}

@media screen and (min-width: 600px) {
  #cards-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .card {
    width: 28%;
    max-width: 250px;
    margin: 2%;
    padding: 2%;
  }
}

.card:hover {
  -webkit-box-shadow: 0 0 20px var(--gray);
  box-shadow: 0 0 20px var(--gray);
}

.foodImg {
  border-radius: 5px;
  border: 1px solid var(--light-gray);
  -webkit-box-shadow: var(--gray) 0 0 15px;
  box-shadow: var(--gray) 0 0 15px;
  width: 100%;
  height: 200px;
}

.food-item-container {
  margin-top: 0.85rem;
}

.food-item-name {
  font-family: RobotoBold;
  line-height: 1.4em;
  height: 2.8rem;
}

.food-item-desc {
  margin-top: 0.85rem;
  color: var(--dark-gray);
  font-size: 0.9rem;
  line-height: 1.35rem;
  height: 6.75rem;
}

.food-item-price {
  margin-top: 0.85rem;
  font-weight: 600;
}

.food-item-btn {
  display: block;
  text-align: center;
  padding: 0.85rem;
  margin: 0.85rem 0;
  border-radius: 5px;
  background-color: var(--red);
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
}

/* OPEN */

@media screen and (min-width: 600px) {
  #open {
    height: 66vh;
  }
}

#open {
  background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(resources/toast.jpg) center center / cover no-repeat;
  background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(rgba(0, 0, 0, 0.6)),
      to(rgba(0, 0, 0, 0.6))
    ),
    url(resources/toast.jpg) center center / cover no-repeat;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url(resources/toast.jpg) center center / cover no-repeat;
  color: var(--white);
  margin-bottom: 0;
  height: 80vh;
  position: relative;
}

.open-text {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.open-text h1,
.open-text h2 {
  text-shadow: var(--text-shadow);
}

#open > .btn-container {
  margin-top: 2rem;
}

/* JOIN */

#join-img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

#join-main p {
  line-height: 1.5;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

@media screen and (min-width: 600px) {
  #join {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    margin-bottom: 0;
  }

  #join-img {
    width: 50%;
    height: auto;
    margin-bottom: 0;
  }

  #join-main {
    -ms-flex-item-align: center;
    align-self: center;
    width: 30%;
    margin: 0 10%;
    top: 50%;
  }

  #join-main p {
    line-height: 1.5;
    margin-bottom: 2rem;
  }
}