* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  font-size: 6.25%;
  font-family: "Source Serif 4", serif;

  --color: #A54328;
}

body {
  color: var(--color);

  background-image: url(assets/background.png);
}

main {
  box-sizing: content-box;
  padding: 56rem 32rem;
  margin-inline: auto;

  max-width: 320rem;

  display: flex;
  flex-direction: column;
  gap: 34rem;
}

section {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 36rem;
}

h1,
h2 {
  font-size: clamp(28rem, 10rem + 2vw, 40rem);
  line-height: clamp(36rem, 10rem + 2vw, 50rem);
}

p,
li,
h3 {
  font-size: clamp(14rem, 1vw + 4rem, 20rem);
  line-height: clamp(18rem, 1vw + 10rem, 24rem);
}

#about-recipe img {
  width: 100%;
}

#recipe {
  gap: 36rem;
}

#ingredients li,
#directions li {
  margin-left: 25rem;
}

#recipe button {
  max-width: 94rem;
  padding: 8rem 12rem;
  border: none;
  border-radius: 6rem;

  font-family: "Source Serif 4", serif;
  font-size: 10rem;
  font-weight: 500;
  text-align: center;
  color: #FFF;

  background-color: var(--color);
}


@media (min-width: 768px) {
  main {
    padding: 90rem 60rem;

    flex-direction: row;
    gap: 160rem;
    max-width: fit-content;
  }

  section {
    flex: 1;
  }

  #about-recipe {
    gap: 66rem;
  }

  #recipe button {
    font-size: 14rem;

    padding: 10rem 20rem;

    max-width: 130rem;
  }
}