body {
  font-family: 'Mulish', sans-serif;
  font-family: 'Nanum Gothic', sans-serif;
  font-family: 'Nunito', sans-serif;
  background-color: #db9e67;
  overflow: auto;
  height: 100%;
}

html {
  overflow: auto;
  height: 100%;
}

.container {
  margin: 5%;
}

.mainPage, .searchCont {
  background-color: #f0e8dd;
  border-style: solid;
  border-color: #6e1417;
  border-width: 3px;
}

.hidden {
    display: none;
}

.navbar, .navbar-item, #logo, 
.navbar-link, .navbar-dropdown {
  background-color: #6e1417;
  color: white;
}

a.navbar-item:hover {
  background-color: #a34033;
  color: white;
}

.navbar-burger {
  color: white;
}

#IMGLogo {
  background-color: white;
  border: solid;
  border-radius: 20px;
}

#searchTitle {
  text-align: center;
  font-size: 30px;
  color: #6e1417;
}

#SavedTitle {
  text-align: center;
}

#MealErrorMsg, #drinkErrorMsg {
  font-size: 20px;
  color: #6e1417;
  text-align: center;
  margin: 20px;
}

#mainTitle, p {
  text-align: center;
  margin: 18px;
  padding: 18px;
}

#SearchForm, #SearchSelect, 
#drinkSearch, #searchSelect {
  text-align: center;
  margin: 10px;
  justify-content: center;
  font-size: 20px;
}

input, #drinkInput, #MealSearchInput {
  font-size: 18px;
  margin: auto;
}

p {
  font-size: 20px;
  color: #6e1417;
}

.getStartedBtn {
  background-color: #a34033;
  color: white;
    border-style: solid;
    border-color: #6e1417;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
}

.MealIngredientList li {
  font-size: 20px;
  color: #6e1417;
  margin: 5px;
}

.MealRandomGenerator {
  border-style: solid;
  border-color: #6e1417;
}


.MealCategory, #MealRandomGenerator, .drinkCategory, 
.drinkGlass, .drinkAlcohol, #drinkRandomGenerator {
  border-style: solid;
  border-color: #6e1417;
  border-radius: 10px;
  border-width: 3px;
  color: white;
}

#MealSearchBtn, .ReturnMealResults, #SaveMealBtn, 
#saveDrinkBtn, #RemoveMealBtn, #removeDrinkBtn, #drinkSearchBtn {
  background-color: #6e1417;
  border-color: #6e1417;
  border-radius: 3px;
  color: white;
}

#SearchForm, #drinkSearch {
  color: #a34033;
}

.MealCategories, .MealAreas, .MealRandomGenerator, 
.MealIngredientList, #MealDetails, .drinkSearchResult, 
.drinkCategories, .drinkAreas, .drinkRandomGenerator, 
.drinkIngredientList, .drinkGlasses, .drinkAlcoholic, #drinkDetails {
    border-style: solid;
    border-width: 3px;
    border-color: #6e1417;
    width: 100%;
    padding: 20px;
    background-color: #f0e8dd;
    color: white;
}

.MealSearchResult, .drinkSearchResult {
  width: 95%;
  padding: 20px;
  margin: 3%;
  text-align: center;
  border-style: solid;
  border-color: #6e1417;
  border-radius: 10px;
}

.Areas-Buttons {
  color: white;
  border-style: solid;
  border-color: #6e1417;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  margin-bottom: 15px;

}

.MealCategory, .drinkCategory, .drinkGlass, .drinkAlcohol {
  margin: 20px;
  padding: 20px;
  margin-bottom: 15px;
}

.MealCategory h2, .drinkCategory h2, .drinkGlass h2, .drinkAlcohol {
  color: white;
}

#MealDetails, #drinkDetails {
  text-align: center;
  background-color: #a34033;
}

#MealIMG, #drinkIMG {
  border-style: solid;
  border-color: #6e1417;
  border-width: 3px;
}

#MealInstructions {
  margin: 20px;
  padding: 15px;
  border-style: solid;
  border-color: #6e1417;
}

li, #MealInstructions {
  color: #6e1417;
  font-size: 20px;
}

h2, u, #drinkSearchResults h1 {
  font-size: 30px;
}

footer a, #MealSource a, #MealVideo a {
  color: white;
}

footer a:hover, #MealSource a:hover, #MealVideo a:hover {
  color: #db9e67;
}

#MealInstructions, #IngredientList, #drinkIngredientList, #drinkInstructions {
  color: #6e1417;
  background-color: #f0e8dd;
  margin-left: 10%;
  margin-right: 10%;
  border-style: solid;
  border-color: #6e1417;
}

 #MealSearchresults p {
  color: white;
}

#ReturnMealCatalog, .ReturnMealResults, #returnDrinkCatalog, 
#MealRandomGenerator, .returnDrinkResults, #saveDrinkBtn, 
#SaveMealBtn, #RemoveMealBtn, #removeDrinkBtn, #MealSearchBtn, #drinkSearchBtn {
  margin-top: 5px;
  border-style: solid;
  border-color: #6e1417;
  border-radius: 10px;
  color: white;
  font-size: 1.25rem;
  background-color: #6e1417;
}

.MealSearchResult img, .drinkSearchResult img {
  border-style: solid;
  border-color: #6e1417;
  border-radius: 3px;
}

.MealArea {
  padding: 0;
}

.MealArea h2 {
  padding: 10px;
}


.MealCategory, .Areas-Buttons, button, 
.MealSearchResult, .drinkCategory, .drinkGlass, 
.drinkAlcohol, .drinkSearchResult {
  background-color: #a34033;
}

.subtitle {
  color: #e8e3e3;
}

.MealSearchResult h1, .drinkSearchResult h1, #drinkSearchResults p {
  font-size: 25px;
  color: white;
}

.title {
  color: #501B1D;
  margin: 15px;
}


.navbar-item:hover, .MealSearchResult:hover, .MealCategory:hover, 
.Areas-Buttons:hover, .subtitle:hover, .Areas-Buttons:hover, 
#MealSearchBtn:hover, .ReturnMealResults:hover, #ReturnMealCatalog:hover, 
#MealRandomGenerator:hover, #RemoveMealBtn:hover, .RemoveMealBtn:hover, 
#removeDrinkBtn:hover, .drinkSearchResult:hover, .drinkCategory:hover, 
.drinkGlass:hover, .drinkAlcohol:hover, #SaveMealBtn:hover, 
#drinkRandomGenerator:hover, .drinkSearchResult:hover, #returnDrinkCatalog:hover, 
.returnDrinkResults:hover, #saveDrinkBtn:hover, #drinkSearchBtn:hover {
    background-color: #b86146;
    color: white;
}

footer {
  /* margin: auto; */
  /* position: fixed; */
    text-align: center;
    width: 100%;
    background-color:#6e1417;
    color: white;
    position: absolute;
  bottom: 0;
    /* bottom: 0; */
    /* left: 0; */
    /* margin-top: 20px; */
}

.autocomplete-suggestions { 
    border: 2px solid #501B1D; 
    background: #FFF; 
    overflow: auto; 
  }
  
  .autocomplete-suggestion { 
    padding: 2px 5px; 
    white-space: nowrap; 
    overflow: hidden; 
  }
  
  .autocomplete-selected { 
    background: #F0F0F0; 
  }
  
  .autocomplete-suggestions strong { 
    font-weight: normal; 
    color: #64485C; 
  }
  
  .autocomplete-group { 
    padding: 2px 5px; 
  }
  
  .autocomplete-group strong { 
    display: block; 
    border-bottom: 1px solid #000; 
  }

  .drinkCategories h1, .drinkGlasses h1, .drinkAlcoholic h1, 
  .drinkRandomGenerator h2, .drinkIngredientList h1, .MealIngredientList h1, 
  .MealRandomGenerator h2 {
    color: #6e1417;
    margin: 15px;
    font-size: 32px;
  }

  #drinkName, #MealTitle {
    font-size: 2rem;
    color: white;
  }

  #drinkRandomGenerator {
    font-size: 1.25rem;
  }

  #drinkDetails h3, #drinkDetails h4 {
    font-size: 25px;
  }

  .drinkCategories, .drinkGlasses, .drinkAlcoholic, 
  .drinkRandomGenerator, .drinkIngredientList, .MealIngredientList, 
  .MealRandomGenerator {
    border: solid 3px #a34033;
  }