:root {
  --lettuce: #b5ffe1;
  --leaf: #93e5ab;
  --grass: #65b891;
  --guava: #4e878c;
  --spinach: #00241b;
}
/* Applies to entire main section */
body {
  /* background: linear-gradient(to bottom, #b5ffe1, #4e878c); */
  background-color: var(--guava);
}

/* Applies to header color and size */
.header {
  background-color: var(--leaf);
  color: var(--spinach);
  height: 120px;
  border: solid 2px var(--spinach);
  margin-left: 10px;
  margin-right: 10px;
}

#FitNFreshIntro {
  /* display: flex;
  flex-direction: row;
  justify-content: space-around; */
  position: relative;
  top: -80px;
  left: 180px;
  margin: 0px;
  color: var(--guava);
}

/* Applies to entire nav container */
.nav-container {
  display: flex;
  flex-direction: row;
  justify-content: end;
  position: relative;
  top: -100px;
  margin: 10px;
}

/* Applies to nav bar items */
.nav {
  color: var(--guava);
  margin: 5px;
  font-size: 1.3em;
}

/* Applies to logo in top left  */
#logo {
  width: 190px;
}

/* Applies to buttons */

button {
  background-color: var(--guava);
  color: var(--leaf);
  width: 200px;
  height: 40px;
  margin: 15px;
}

button:hover {
  background-color: var(--grass);
  color: var(--spinach);
}

/* Applies to workout card */
.workoutsection {
  background: linear-gradient(to bottom, #b5ffe1, #65b891);
  border: solid 2px var(--spinach);
  color: var(--spinach);
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  width: 50%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Applies to dropdowns in the workout and recipe boxes */
form {
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* Applies to recipe card */
.recipesection {
  background: linear-gradient(to bottom, #b5ffe1, #65b891);
  border: solid 2px var(--spinach);
  color: var(--spinach);
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  width: 50%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Applies to both cards */
.workoutandrecipecards {
  display: flex;
  flex-direction: row;
}

/* Applies to motivational quotes */
#motivQuotes1 {
  text-align: center;
  color: var(--spinach);
  background-image: url("../images/background2.jpg");
  
  border: solid 2px var(--spinach);
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
}

#motivQuotes1>h3 {
  background-color: rgba(255, 255, 255, .9);
  padding: 5px;
  border: solid 3px black;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}

#motivQuotes2>h3 {
  background-color: rgba(255, 255, 255, .9);
  padding: 5px;
  border: solid 3px black;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}

#motivQuotes2 {
  text-align: center;
  color: var(--spinach);
  background-image: url("../images/backgroundphoto.jpg");

  border: solid 2px var(--spinach);
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
}

/* Applies to footer */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--leaf);
  padding: 15px;
  color: var(--spinach);
  border: solid 2px var(--spinach);
  margin-left: 10px;
  margin-right: 10px;
}

.unhideRecipeInfo {
  display: none;
}

.showRecipeInfo {
  display: block;
}

#workout {
  background-color: #00241b;
  color: #65b891;
}

#recipeCard {
  background-color: #00241b;
  color: #65b891;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 15px;
  margin: 25px;
  border: solid 3px var(--guava);
  
}

#workoutResults {
  background-color: #00241b;
  color: #65b891;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 15px;
  margin: 25px;
  border: solid 3px var(--guava);
  
}
