@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200;400;800&family=Montserrat&display=swap");

@smartphone: (max-width: 30em);
@tablette: (min-width: 30em) and (max-width: 50em);
@laptop: (min-width: 50em);

.poulet-bg() {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(50, 20, 20, 1)) no-repeat center center fixed,
    url("https://s3.inpulse.tv/poulet.jpg") no-repeat center center fixed;
  background-size: cover;
}

body {
  color: purple;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  min-height: 100%;

  @media @smartphone {
    background-color: AliceBlue;
    color: white;
    margin-top: unset;
    margin-bottom: unset;

    .poulet-bg();

    &>h2 {
      font-size: 1.5em;
    }
  }

  @media @tablette {
    background-color: FloralWhite;
  }

  @media @laptop {
    background-color: MistyRose;
  }
}

img {
  @media @smartphone {
    display: none;
  }
}

h1,
h2,
h3 {
  font-family: "Dosis", sans-serif;
}

h1 {
  font-weight: 800;
  font-size: 3em;

  @media @smartphone {
    .poulet-bg();

    position: sticky;
    top: 0px;
    text-align: center;
  }
}

h2 {
  font-weight: 400;
  font-size: 2.5em;

  @media @smartphone {
    &:active {
      color: red;
    }
  }
}

h3 {
  font-weight: 200;
  font-size: 2em;

  @media @smartphone {
    text-align: center;
  }
}

itv-plat-principal {
  color: red;
}

itv-garniture {
  color: blue;
}

itv-sauce {
  color: green;
}

itv-prix {
  display: block;

  @media @smartphone {
    .poulet-bg();

    position: sticky;
    bottom: 0px;

    h2 {
      font-size: 1.5em;
      color: pink;
    }

    td {
      color: pink;
    }
  }
}

itv-plat {
  display: block;

  @media @smartphone {
    p {
      background-color: rgba(0, 0, 0, 0.8);
      padding: 1em;
    }

    &:active p {
      display: block;
      position: absolute;
      top: 100px;
      transition: 500ms;
    }

    &:not(:active) p {
      position: absolute;
      top: -20em;
    }
  }
}

itv-dejeuner {
  @media @smartphone {
    width: 10em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}