* {
  box-sizing: border-box;
}
body {
  font: 16px Arial;
  background-color: #f5cd79;
}
/*** Centered Logo ***/
.served {
  margin-top: 50px;
  font-family: "Bad Script";
  letter-spacing: 18px;
  font-size: 50px;
  color: #f5cd79;
  font-weight: 500;
}

.flexbox{
  display: inline-flex!important;
}

/*** Nav Bar ***/
.navbar {
  box-shadow: 0 10px 10px -2px rgba(0, 0, 0, 0.3);
}
#navbarBasicExample {
  background-color: #ffffff;
}

.landStyling {
  font-family: "Thasadith", sans-serif;
  letter-spacing: 1px;
  margin: 20px;
}
/*** Your Saved Recipes Anchor Button Color/Hover Effect ***/
a.button.is-primary {
  background-color: #f5cd79;
}
a.button.is-primary.is-hovered,
a.button.is-primary:hover {
  background-color: #f7d794;
  border-color: transparent;
  color: #ffffff;
}

/*** HERO STYLING ***/
.hero {
  background-image: url("assets/");
  height: 700px;
  width: auto;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  background-size: cover;
}
h1.hero-title {
  margin: 240px 0px 0px;
  font-size: 200px;
  letter-spacing: 2px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #0a3d62;
  text-align: center;
  font-size: 50px;
  font-family: "Bebas Neue";
}
button#recipe-btn.button {
  font-family: "Thasadith", sans-serif;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 1000;
}
button#add-btn.button.column.is-one-third,
button#clear-btn.button.column.is-one-third {
  font-family: "Thasadith", sans-serif;
  text-align: center;
  background-color: #dcdde1;
}
input#myInput {
  font-family: "Thasadith", sans-serif;
  text-align: center;
  letter-spacing: 1px;
}

div.hero-body {
  margin-right: 0;
  padding: 0;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type="text"] {
  background-color: #f1f1f1;
  border-radius: 4px;
  height: 40px;
  width: 100%;
}
input[type="submit"] {
  background-color: DodgerBlue;
  color: #fff;
}
div.columns.is-gapless {
  margin: 3.5%;
}

#recipe-btn {
  width: 66.66667%;
}
#diet-recipe-btn {
  width: 66.66667%;
  font-family: "Thasadith", sans-serif;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 1000;
}
#clear-btn {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#add-btn {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#myInput {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.mystyle {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#delete-me {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

section ul {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

div .level {
  margin-bottom: 0.5rem !important;
}

/* Hero background - Charli's work */
.hero-body {
  background-image: url("img/heroimg.jpg");
  height: 800px;
  background-size: cover;
}

.navbar-served {
  color: cadetblue;
  font-size: x-large;
}

.recipe-card-saved {
  width: 400px;
  margin: 20px;
}

/* Chevron Styling */
i.fas.fa-chevron-left,
i.fas.fa-chevron-right {
  background-color: #0a3d62;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* Carousel Card Styling */
h4.card-title {
  font-size: 0.8em;
}

button.btn.btn-primary.recipeBtn {
  background-color: #0a3d62;
}

div.column.is-one-fifth {
  margin: 0px 3px 0px 18px;
  box-shadow: 0px 5px 0px 3px rgba(0, 0, 0, 0.2);
  border-radius: 2%;
}

div.column {
  margin: 0px 20px 0px 3px;
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.2);
  border-radius: 1%;
}
footer {
  font-size: 0.6em;
}
footer.footer {
  display: flex;
  justify-content: space-around;
  padding: 0;
}




































































#searchHeader {
  margin: 10px;
  color: #373838;
  font-size: 2.4rem;
  text-align: center;
}






.dietary-box {
  margin: 10px;
  padding: 10px;
  border: 2px solid white;
  border-radius: 5px;
  width: 15rem;
}

.dietary-box h1 {
  padding-left: 5px;
  font-size: 1.5rem;
  font-weight: bold;
}

.diet-container {
  display: block;
  position: relative;
  padding-left: 45px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1.3rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.vegetarian {
  padding-left: 70px;
  font-size: 1rem;
}

/* Hide the browser's default checkbox */
.diet-container input {
  position: absolute;  
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  margin-left: 10px;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eee;
  border-radius: 50%;
}

.vegetarian-checkmark {
  margin-left: 45px;
  height: 18px;
  width: 18px;
}

/* On mouse-over, add a grey background color */
.diet-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.diet-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.diet-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.diet-container .checkmark:after {
  top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.vegetarian .checkmark:after {
  top: 6px;
  left: 6px;
  width: 6px;
  height: 6px;
}

.hide {
  display: none;
}