:root {
  --primary: #EAEAE8;
}

body {
  background-color: #EAEAE8;
  overflow-x: hidden;
}

.is-active .tabs{
  color: #232321;
}

.hero.is-info {
    background-color: #6C8C3F;
  }

.hero.is-info .title {
color: #232321;

}

.hero.is-info .subtitle {
color: #232321;

}

#tab-content p {
    display: none;
  }

#tab-content p.is-active {
    display: block;
  }

#tab-content div {
    display: none;
  }
  
#tab-content div.is-active {
    display: block;
  }
  
.fixedHeader {
  position: fixed;
  width: 100%;
  top: 0;
}

.heroBorder {
  border-bottom: 5px solid black;
  border-top: 5px solid black;
  margin-bottom: 20px;
}

.tabSpot.is-active {
  display: block;
} 

.owl-height {
    max-height: 35vh;
  }

  header, section, .hero {
    margin:0px;
    margin-top: -1.5rem;
  }

.button.mbb {
  background-color: #6C8C3F;
  color: var(--primary);
}

.button:hover {
  color: var(--primary);
  background-color: #598c3f;

}
button:focus .mbb,
#mealGenButton,
#genButton,
#drinkGenButton {
  color:white;
}

button:hover.luckybutton {
  background-color: #b00b28;
}

button.luckybutton {
color: white;
}

.luckybutton {
  background-color: #b0170b;
}

.recipe {
  background-color: #EAEAE8;
  margin: 0 2rem;
}

#clear-drinks{
  align-items: right;
}


.item img {
  object-fit: cover;
  object-position: bottom;
} 

pre {
  white-space: pre-wrap;
  text-align: start;
  font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: left;
  width: 100%;
  background-color: var(--primary);
  font-size: 16px;
  max-width:100%;
  margin:0 auto;
}
.modal-card-head{
  padding: 3rem;
}


footer.footer {
  /* green to match */
  background-color: #6C8C3F;
  padding: 1.5rem 1.5rem 1.5rem !important;
}
/* changes link colors to white */
a{
  color: white;
}

li , p {
  color:black;
}
/* Ryan's Classes */
.modalHeight {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
}

.haveIng {
  color: green;
  font-weight: bold;
}

.badIng {
  color: red;
  font-weight: bold;
}

#genButton {
  Height: 100%
}

.centerButtons {
  width: 100%
}

.height100 {
  Height: 100%
}

.centerButtons {
  width: 100%
}
/* End Ryan's Classes*/
.tabs li.is-active a {
  border-bottom-color: #6C8C3F;
  color: #6C8C3F;
}

  /*-------- MEDIA QUERIES --------*/
/* BULMA Breakpoints */
/* Mobile Up to 768px */
@media (max-width: 768px) {  
  .tabs ul {
    -webkit-flex-direction: column;
    flex-direction: column;
  } 

}

 /* Tablets 769px and 1023px */
@media (min-width: 769px) { 
    .owl-height {
      max-height: 55vh;
    }
    .owl-carousel .image-2 {
      transform: translateY(-2%); 
    }
    
    .owl-carousel .image-3{
      transform: translateY(-25%); 
    }
}
@media (max-width: 900px){
  .modal-card{
    max-width: 95% !important;
    margin: 0 auto !important;
    }

    pre {
      max-width: 75%;
    }
}

@media (max-width: 768px){
  .modal-card{
    max-width: 95%;
    margin: 0 auto;
  }
  .modal-card-head{
    padding: 2rem;
  }
  .button:hover {
    background-color: #fff;
    color: black;
  }
  pre{
    max-width: 100%;
    padding: 0;
  }
}


 /* Desktops 1024px and 1215px) */
 @media (min-width: 1024px) { 
   pre{
     max-width: 80%;
   }
}

/* Widescreen 1216px and 1407px) */
@media (min-width: 1216px) { 
  pre{
    max-width: 80%;
    /* text-align: center; */
  }
}

/* Full HD 1408px and above) */
@media (min-width: 1408px) { 
  pre{
    max-width: 80%;
  }
  /* #drinkRecipe{
    text-align: center;
  } */
}