@import url('https://fonts.googleapis.com/css2?family=Epunda+Slab:ital,wght@0,300..900;1,300..900&family=Ms+Madi&display=swap');
/* Font for the Logo and rest of the page */

/* General site setup  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* General changes */
a {
  text-decoration: none;
}

/* To change the font */
body {
  font-family: 'Epunda Slab', serif, Arial, Helvetica, sans-serif;
}

/* To position the content */
nav {
  display: flex;
}

/* Design */
footer {
  background-color: black;
  color: white;
}

/* Navbar 1 */
/* place the items */
#nav1 {
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
/* color the links */
#nav1 a {
  color: black;
}
/* Design the logo */
.logo {
  font-family: 'Ms Madi', cursive;
  font-size: 2rem;
  margin: 0.1rem;
}
/* Place the items */
.nav1-links {
  display: flex;
  list-style: none;
  margin: 0.5rem;
  gap: 2rem;
  font-size: 1.2rem;
}

/* Navbar 2 */
/* design navbar 2 */
.nav2 {
  justify-content: space-around;
  border-top: black solid 1px;
  border-bottom: black solid 1px;
}
/* color ans place the links */
#nav2 a {
  color: black;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Main index*/
/* Grid-container */
.recipe-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 5rem;
}
/* contains picture and paragraph */
.recipe {
  position: relative;
  text-align: center;
  max-width: 400px;
}
.recipe img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* places the name onto the picture */
.recipe p {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 0.5rem 0;
  color: white;
  font-weight: bold;
}

/* Rotating images */
.recipe img {
  transition: transform 3s ease;
}
.recipe img:hover {
  transform: rotate(180deg);
}

/* Main general pages */
/* design the main-page */
.main {
  margin: 1rem 3rem 0 3rem;
}

/* The pages heading */
.heading2 {
  text-align: center;
  font-family: 'MS Madi', cursive;
  font-size: 4rem;
  padding-bottom: 1rem;
  border-bottom: solid black 1px;
  margin-bottom: 2rem;
}

/* Hero Image for About-Page */
#abouthero {
  width: 100%;
  max-height: 150px;
}
/* Most popular Recipes on About */
.galery {
  display: flex;
  justify-content: space-around;
}
/* The popular-cards */
.popular {
  position: relative;
  text-align: center;
  max-width: 400px;
}
.popular img {
  width: 100%;
  max-width: 300px;
  height: auto;
}
/* The recipe-name */
.RN {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, -20%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  color: white;
  font-weight: bold;
}
/* The recipe-Author */
.RA {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -5%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  color: white;
}

/* Paragraphs on the other pages */
.main p {
  text-align: center;
  font-size: 1.2rem;
}

/* The Name of the recipe-donator */
.username {
  font-family: 'MS Madi', cursive;
  font-size: 1.5rem;
  font-weight: bold;
}

/* The Recipe's name */
.heading3 {
  text-align: center;
  font-family: 'MS Madi', cursive;
  font-size: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: solid black 1px;
  margin-bottom: 0.5rem;
}

/* The recipe's picture */
#monpic {
  display: block;
  margin: auto;
  width: 60%;
}

/* Ratings-bar */
.difficulty {
  display: flex;
  justify-content: space-around;
  background-color: rgba(213, 109, 3, 0.5);
  padding-top: 0.5rem;
  border-bottom: solid 1px rgba(213, 109, 3, 0.5);
}
.difficulty1 {
  display: flex;
  justify-content: space-between;
}
.rating {
  display: flex;
  list-style: none;
  gap: 1rem;
  padding-left: 2rem;
}
/* The time-container */
.time {
  display: flex;
  justify-content: space-around;
  background-color: rgba(213, 109, 3, 0.3);
  padding-top: 0.4rem;
}
.time1 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.time2 {
  margin-bottom: 0.5rem;
}

/* Ingredients and Instructions */
.how2 {
  display: flex;
}
/* List of ingredients */
.ingredients {
  display: block;
  width: 40%;
  padding: 1px;
  background-color: rgba(213, 109, 3, 0.1);
}
/* To put the bullet-points inside the container */
.ingredients ul {
  list-style-position: inside;
}
/* Instructions */
.instructions {
  display: block;
  width: 60%;
  background-color: rgba(213, 109, 3, 0.05);
  font-size: 1.1rem;
}
.instructions p {
  padding: 5px;
}
/* Font-chnage */
#enjoy {
  font-family: 'MS Madi', cursive;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Footer */
/* Spacing */
.footer {
  text-align: center;
  padding: 0.5rem;
  font-size: 1.2rem;
}
.footer-links {
  display: flex;
  justify-content: space-around;
}
/* Color the links */
.footer-links a {
  color: white;
  margin-bottom: 0.5rem;
}
/* The icons */
.social {
  font-size: 1.4rem;
}
.social a {
  margin-left: 2rem;
  margin-right: 2rem;
  color: white;
}
/* The copyright-tag */
.footer p {
  margin-top: 0.5rem;
}

/* Media queries */
/* Phones */
@media (max-width: 480px) {
  .recipe-container {
    grid-template-columns: repeat(1, 1fr);
    /* One card per row */
  }
}
/* so menue doesn't need flexwrap */
@media (max-width: 460px) {
  .nav2 {
    font-size: 0.4rem;
  }
  .logo {
    font-size: 1rem;
  }
  .nav1-links {
    font-size: 0.6rem;
  }
  .popular p {
    font-size: 0.6rem;
  }
  .RA {
    font-size: 0.4rem;
  }
}

/* Tablets */
@media (min-width: 480px) and (max-width: 1024px) {
  .recipe-container {
    grid-template-columns: repeat(2, 1fr);
    /* Two cards per row */
  }
}