@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Comforter&display=swap');

@font-face {
  font-family: "ComforterBrush-Regular";
  src: url('fonts/ComforterBrush-Regular.ttf'),
    url('fonts/ComforterBrush-Regular.ttf');
}

@font-face {
  font-family: "Audiowide-Regular";
  src: url('fonts/Audiowide-Regular.ttf'),
    url('fonts/Audiowide-Regular.ttf');
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

:root {
  --light: white;
  --grey: #494949;
  --dark: #3a3a3a;
  --gold: rgba(255, 238, 0, 0.828);
  --blue: #2eb1c2;
  --green: #04a126;
  --purple: #8c27eb;
  --orange: #ed490e;
  --red: #e51106;

  --dark: black;

}

.logo-title {
  font-family: "Audiowide-Regular";
  font-weight: 500;
  letter-spacing: 17px;
  font-size: 2.3rem;
}

.clear-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 500;
}

.clear-btn:hover {
  color: var(--dark);
}

.card-title {
  font-family: "ComforterBrush-Regular";
}

#meal {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

#calories {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.add-meal {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 500;
}

.add-meal:hover {
  color: var(--dark);
}

.update-btn:hover {
  color: var(--dark);
}

.delete-btn:hover {
  color: var(--dark);
}

.back-btn:hover {
  color: var(--dark);
}

#total-calories {
  font-family: "ComforterBrush-Regular";
  font-size: 4rem;
  font-weight: 500;
}

.pencil {
  font-size: 66px;
}

#pencil {
  font-size: 66px;
}

ul li .fa-pencil {
  position: relative;
  margin-top: -5px;
  font-size: 34px;
  color: var(--purple);
}

ul li .fa-pencil:hover {
  font-size: 40px;
  color: var(--green);
}

section {
  display: flex;
  align-items: center;
  left: -50%;
}

.smart-code {
  margin-top: 100px;
  text-align: center;
  font-family: "ComforterBrush-Regular";
  font-size: 1.5rem;
  letter-spacing: 4px;
  font-weight: 500;
}

#bread-alone {
  font-family: "ComforterBrush-Regular";
  font-size: 2rem;
  letter-spacing: 7px;
  font-weight: 550;
  color: var(--green);
}

.bread-left {
  padding-right: 22px;
}

.bread-right {
  padding-left: 22px;
}

#w {
  font-size: 4rem;
}

#word {
  font-size: 2rem;
}

#flow {
  color: var(--purple);
}

#wearewhatatweeat {
  font-family: "ComforterBrush-Regular";
  font-size: 2rem;
  letter-spacing: 7px;
  font-weight: 550;
}

/* Start of: Food apps */

.healthy {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

a {
  text-decoration: none;
  font-family: 'Comforter',
    cursive;
  font-weight: 300;
  font-size: 2rem;
}

a:hover {
  text-decoration: underline;
  color: var(--green);
  letter-spacing: 3px;
}

#calorie {
  padding-right: 24px;
  left: 0%
}

#forkify {
  padding-right: 24px;
}

#meal_finder {
  right: 0%
}

.food_apps {
  position: absolute;
  bottom: 1%;
  padding: 12px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;

}

.inner_food_apps {
  /* position: absolute;
  bottom: 2%; */
  padding: 24px;
  font-family: "ComforterBrush-Regular";
  font-size: 1.3rem;
}

ul li {
  font-family: 'Orbitron', 'Poppins', sans-serif;
  font-weight: 300;

}

/* 
End of: Food Apps */



/* Media Queries: Mobile Responsiveness */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .clear-btn {
    position: absolute;
    top: 77px;
    text-align: center;
    left: 48%;
    transform: translate(-50%, -50%);
  }

  .smart-code {
    max-width: 90%;
    text-align: center;
  }

  .bread-left {
    position: absolute;
    top: 22px;
    left: 12px;
    width: 66px;
  }

  .bread-right {
    position: absolute;
    top: 22px;
    right: 12px;
    width: 66px;
  }

  .smart-code {
    position: absolute;
    width: 98%;
    margin-bottom: 200px;
    text-align: center;
    font-family: "ComforterBrush-Regular";
    font-size: 1rem;
    letter-spacing: 2px;
    font-weight: 500;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #bread-alone {
    position: relative;
    font-family: "ComforterBrush-Regular";
    font-size: 1rem;
    letter-spacing: 5px;
    font-weight: 550;
    color: var(--green);
    left: 0%;
    transform: translate(-50%, -50%);
    padding-bottom: 240px;

  }

  #word {
    font-family: 1.2rem;
  }

  #w {
    font-family: 1.5rem;
  }

  #wearewhatatweeat {
    padding-bottom: 66px;
  }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 600px) and (max-width:900px) {
  .smart-code {
    max-width: 90%;
  }

  .bread-left {
    position: absolute;
    top: 34px;
    left: 4px;
    width: 100px;
  }

  .bread-right {
    position: absolute;
    top: 34px;
    right: 4px;
    width: 100px;
  }
}



/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {
} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {
} */