<div class="recipe-container">

  <input type="checkbox" id="turn">

  <div class="recipe-box">

    <div class="recipe-card">

      <div class="recipe-front">

        <label for="turn">The Process</label>

        <figure>
          <img src="https://images.unsplash.com/photo-1593253787226-567eda4ad32d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80" alt="spaghetti with pesto sauce and cherry tomatoes.">
          <figcaption>Photo by Shania Pinnata</figcaption>
        </figure>

        <div class="content">

          <h1>Pasta with Pesto and Tomatoes</h1>

          <div class="description">
            <p>This quick and delicious pasta dish is the perfect way to use up a summer bounty of basil and tomatoes! </p>
            <p class="tip">Don't have a green thumb? Never fear! You can knock out this classic pasta dish in no time with a jar of prepared pesto sauce. </p>
          </div>

          <ul class="details">
            <li>Servings <span>4</span></li>
            <li>Dificult <span>Easy</span></li>
            <li>Prep Time <span>5 min</span></li>
            <li>Cook Time <span>25 min</span></li>
            <!--<li>Total Time <span>30 min</span></li>-->
          </ul>

          <h2>The Ingredients</h2>
          <ul class="ingredients">
            <li><span>8 oz.</span><input type="checkbox" id="ing-1"><label for="ing-1">spaghetti or linguine pasta</label></li>
            <li><span>2 cups</span><input type="checkbox" id="ing-2"><label for="ing-2">fresh basil leaves, <em>plus 4-8 leaves for garnish</em></label></li>
            <li><span>2</span><input type="checkbox" id="ing-3"><label for="ing-3">cloves garlic</label></li>
            <li><span>2 tbsp</span><input type="checkbox" id="ing-4"><label for="ing-4">pine nuts <em>or blanched almonds</em></label></li>
            <li><span><sup>1</sup>/<sub>2</sub> cup</span><input type="checkbox" id="ing-5"><label for="ing-5">olive oil, <em>plus 1/2 tsp for the skillet</em></label></li>
            <li><span><sup>1</sup>/<sub>2</sub> cup</span><input type="checkbox" id="ing-6"><label for="ing-6">grated Parmesan cheese, <em>plus 2 tbsp for garnish</em></label></li>
            <li><span><sup>1</sup>/<sub>8</sub> tsp</span><input type="checkbox" id="ing-7"><label for="ing-7">salt</label></li>
            <li><span>1 pint</span><input type="checkbox" id="ing-8"><label for="ing-8">cherry tomatoes</label></li>
            <!--<li><span>1 tsp</span><input type="checkbox" id="ing-9"><label for="ing-9">olive oil</label></li>-->
          </ul>
          <p class="tip">Variation: Got no time, or no fresh basil? <span></span>Use a 6 ounce jar of prepared pesto instead.</p>

        </div>

      </div>

      <!-- BACK -->
      <div class="recipe-back">

        <label for="turn">The Ingredients</label>

        <figure>
          <img src="https://images.unsplash.com/photo-1606923829579-0cb981a83e2e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="tomato halves surrounded by basil leaves and peppercorns.">
          <figcaption>Photo by Tamanna Rumee</figcaption>
        </figure>

        <div class="content">

          <h2>The Process</h2>
          <input type="checkbox" id="make-pesto">
          <ol class="instructions">
            <li>Bring 4 quarts of water to a rolling boil in a large pot. Salt the water generously and add the pasta. </li>
            <li>While the pasta cooks, <label for="make-pesto">make the pesto <span></span></label>.
              <ul>
                <li>Remove stems from basil leaves.</li>
                <li>Put the basil, garlic, and pine nuts or almonds into the bowl of a food processor and pulse it a few times to chop them up.</li>
                <li>Then, turn the food processor on and <strong>slowly</strong> pour the olive oil through the feeder tube to blend with the chopped herbs and nuts. </li>
                <li>Process until all ingredients are fully blended, stopping the food processor to scrape down the sides occasionally to get it all mixed. </li>
                <li>Turn off the food processor, and add the salt and Parmesean, then pulse a few times to blend.</li>
              </ul>
            </li>
            <li>Heat a large skillet over medium heat. </li>
            <li>Add the <sup>1</sup>/<sub>2</sub> tsp. olive oil to the heated skillet.</li>
            <li>Add the cherry tomatoes to the skillet and let them blister, stirring occasionally and gently so they don't burst. </li>
            <li>Remove tomatoes from the pan and set aside. </li>
            <li>Drain the pasta, reserving <sup>1</sup>/<sub>4</sub> cup of the cooking water.</li>
            <li>Return the pasta to the pot</li>
            <li>Add the reserved cooking water and pesto to the pasta and stir to mix</li>
            <li>Plate the pasta and add 6-8 tomatoes to each plate</li>
            <li>Garnish with reserved basil leaves and Parmesean and serve.</li>
          </ol>

          <div class="buon-appetito">Buon Appetito!</div>

        </div>

      </div>

    </div><!-- card -->

  </div><!-- box -->

</div><!-- container -->

@import url("https://fonts.googleapis.com/css2?family=Neucha&display=swap");

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Neucha", Arial, Helvetica, sans-serif;
  background: #000;
}

body:before {
  content: "";
  width: 100vw;
  height: 100vh;
  background: url(https://images.unsplash.com/photo-1593253787226-567eda4ad32d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80)
    no-repeat 80% 40%;
  position: absolute;
  left: 0;
  filter: blur(5px);
  opacity: 0.45;
}

.recipe-container {
  position: relative;
}

.recipe-box {
  float: left;
  perspective: 100vw;
  transition: all 0.75s ease 0s;
  width: 80vw;
  height: 80vh;
}

.recipe-card {
  background: #fff;
  cursor: default;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s ease 0s;
  width: 100%;
  color: #333;
  animation: giro 1.5s 1.25s 1;
}

.recipe-front,
.recipe-back {
  backface-visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
  color: #2d2d2d;
  display: block;
  font-size: 1.2em;
  height: 100%;
  position: absolute;
  text-align: left;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.recipe-back {
  transform: rotateY(180deg);
}

@keyframes giro {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.content {
  float: right;
  width: 75%;
  box-sizing: border-box;
  margin: 0;
  padding: 2vmin;
  height: 100%;
}

h1 {
  margin-top: 0;
  margin-bottom: 1vmin;
}

h2 {
  font-size: 1em;
  padding-bottom: 0;
}

.description p {
  margin: 0.75vh 0;
  font-size: 1.15em;
}

p.tip {
  font-size: 1em;
  color: #999;
}

figure {
  float: left;
  width: 25%;
  overflow: hidden;
  height: 100%;
  margin: 0;
}

.recipe-front figure img {
  margin-left: -150%;
  transform: scale(2.5);
  height: 200%;
}

.recipe-back figure img {
  margin-left: -80%;
  transform: scale(1);
  height: 105%;
  margin-top: -2vh;
}

figcaption {
  bottom: 0.5em;
  position: absolute;
  font-size: 0.75em;
  text-shadow: 1px 1px 1px #fff;
  color: #000;
  width: 25%;
  text-align: center;
}

/*** DETAILS ***/

ul.details {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 9em;
  float: left;
}

ul.details li {
  background: linear-gradient(90deg, #e1ba55 1.6em, #a5a5a530 1.6em);
  margin-bottom: 0.25em;
  padding-left: 2em;
  box-sizing: border-box;
  line-height: 1.65em;
  position: relative;
}

ul.details li span {
  background: #e1ba55;
  float: right;
  min-width: 2.25em;
  text-align: right;
  padding-right: 0.35em;
  color: #fff;
  padding-left: 0.25em;
  word-spacing: -0.15em;
}

ul.details + h2 {
  margin-top: 0.5em;
  float: left;
  width: 100%;
}

.description {
  width: calc(100% - 10em);
  float: left;
  margin-right: 1em;
}

.recipe-front .content:before,
.recipe-back .content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://live.staticflickr.com/576/32865710525_0686ba1bbc_b.jpg)
    no-repeat center center;
  background-size: cover;
  z-index: -1;
  left: 0;
  top: 0;
  opacity: 0.15;
  backface-visibility: hidden;
}

ul.details li:nth-child(1):before {
  content: "";
  position: absolute;
  width: 0.35em;
  height: 0.35em;
  margin-top: 0.375em;
  background: #fff;
  left: 0.5em;
  border-radius: 100%;
  box-shadow: 0.35em 0.15em 0 0 #fff;
}

ul.details li:nth-child(1):after {
  content: "";
  position: absolute;
  left: 0.4em;
  margin-top: 0.75em;
  background: #fff;
  width: 0.5em;
  height: 0.35em;
  border-radius: 100% 100% 0.1875em 0.1875em;
  border-right: 0.0625em solid #e1ba55;
  box-shadow: 0.3em 0.15em 0 0 #fff;
  border-bottom: 0.0625em solid #e1ba55;
}

ul.details li:nth-child(2):before {
  content: "";
  border: 2px dotted #fff;
  width: 0.85em;
  height: 0.85em;
  float: left;
  border-radius: 100%;
  left: 0.25em;
  margin-top: 0.25em;
  border-color: #fff #fff transparent transparent;
  transform: rotate(-45deg);
  position: absolute;
  border-right-width: 3px;
}

ul.details li:nth-child(2):after {
  content: "";
  border: 2px solid #fff;
  float: left;
  width: 0;
  height: 0.35em;
  border-radius: 100% 100% 50% 50%;
  left: 0.5em;
  margin-top: 0.6em;
  transform-origin: center calc(100% - 0.5em);
  position: absolute;
  transform: rotate(-45deg);
}

ul.details li + li + li:before {
  content: "";
  position: absolute;
  width: 0.85em;
  height: 0.8em;
  margin-top: 0.25em;
  left: 0.25em;
  border: 0.15em solid #fff;
  border-radius: 100%;
}

ul.details li + li + li:after {
  content: "";
  position: absolute;
  margin-top: 0.45em;
  left: 0.7em;
  border-left: 0.15em solid #fff;
  border-bottom: 0.15em solid #fff;
  width: 0.25em;
  height: 0.35em;
  border-radius: 0;
}

/*** INGREDIENTS ***/
ul.ingredients {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  width: calc(100% - 10em);
}

ul.ingredients + .tip {
  float: right;
  width: 9em;
  margin-top: 0;
}

ul.ingredients li {
  background: linear-gradient(90deg, #ffffff80, transparent);
  margin-bottom: 0.25em;
  padding-right: 0.25em;
  line-height: 1.65em;
}

ul.ingredients li span {
  background: #8bc34a;
  float: left;
  min-width: 2.75em;
  text-align: left;
  padding-right: 0.5em;
  color: #fff;
  padding-left: 0.25em;
}

ul.ingredients li em {
  font-size: 0.65em;
  display: inline-block;
  text-align: right;
  line-height: 0.95em;
  font-style: normal;
  margin-top: 0.35em;
}

ul.ingredients input[type="checkbox"] {
  display: none;
}

ul.ingredients label {
  cursor: pointer;
  position: relative;
  margin-left: 1.65em;
  padding-left: 0.25em;
  font-weight: bold;
  backface-visibility: hidden;
}

ul.ingredients label:hover {
  color: #8bc34a;
}

ul.ingredients label:before {
  content: "";
  background: #a5a5a550;
  width: 1.65em;
  height: 1.6em;
  /* margin-right: 0.5em; */
  position: absolute;
  left: -1.65em;
}

ul.ingredients label:after {
  content: "";
  width: 0.75em;
  height: 0.5em;
  border-left: 0.2em solid #66666680;
  border-bottom: 0.2em solid #66666680;
  transform: rotate(-55deg);
  position: absolute;
  left: -1.3em;
  top: 0.15em;
}

ul.ingredients input:checked + label {
  text-decoration: line-through;
  color: #72b162;
  border-top: 0.175em solid;
  border-bottom: 0.175em solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #00990050, transparent);
  box-sizing: border-box;
}
ul.ingredients input:checked + label:before {
  background: #00990050;
}
ul.ingredients input:checked + label:after {
  border-color: #8bc34a;
}

ul.ingredients + .tip span {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 0.25em;
}

ul.ingredients + .tip span:before {
  border: 0.2em solid #b1b1b1;
  width: 0.4em;
  height: 0.65em;
  content: "";
  border-radius: 0.2em;
  float: left;
  border-top: 0;
  margin-right: 0.35em;
  margin-top: 0.15em;
}

ul.ingredients + .tip span:after {
  border-top: 0.3em solid #b1b1b1;
  width: 0.765em;
  content: "";
  border-radius: 0.05em;
  position: absolute;
  top: 0.15em;
  left: 0em;
}

sup,
sub {
  line-height: 0;
}

/*** BUTTONS ***/

input#turn {
  display: none;
}

label[for="turn"] {
  position: absolute;
  right: 1em;
  bottom: 1em;
  background: #cf3f3f;
  z-index: 3;
  width: 9em;
  cursor: pointer;
  line-height: 1.75em;
  padding: 0.25em 0.5em;
  box-sizing: border-box;
  color: #fff;
  border-radius: 1px;
  backface-visibility: hidden;
}

label[for="turn"]:after {
  content: "\21BA";
  float: right;
  border-left: 0.125em solid #fff;
  width: 2.05em;
  text-align: center;
  position: absolute;
  right: 0;
  height: 100%;
  margin-top: -0.25em;
  line-height: 2.25em;
}

label[for="turn"]:hover {
  background: #212121 !important;
  transition: all 0.5s ease 0s;
}

input#turn:checked ~ .recipe-box .recipe-card {
  transform: rotateY(180deg);
}

.recipe-back label[for="turn"] {
  background: #8bc34a;
}

/*** INSTRUCTIONS ***/

ol.instructions {
  padding-left: 1em;
  list-style: none;
  counter-reset: counter-primary;
  margin: 0;
}

ol.instructions li {
  padding-left: 0.75em;
  line-height: 1.15em;
  margin-bottom: 0.25em;
}

ol.instructions > li:before {
  width: 1.45em;
  content: "1";
  float: left;
  background: #cf3f3f;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  margin-left: -1.75em;
  z-index: 2;
  position: absolute;
  margin-right: 0.5em;
  content: counter(counter-primary, decimal);
  counter-increment: counter-primary;
  border-radius: 2px;
}

ol.instructions li ul {
  counter-reset: counter-secondary;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  display: none;
  margin-left: -0.25em;
  margin-top: 0.15em;
}

ol.instructions li ul li {
  padding-left: 1.75em;
  line-height: 0.95em;
}

ol.instructions li ul li:before {
  content: counter(counter-primary, decimal) "."
    counter(counter-secondary, decimal);
  counter-increment: counter-secondary;
  background: #8bc34a;
  border-radius: 2px;
  width: 1.4em;
  float: left;
  text-align: center;
  margin-right: 0.25em;
  color: #fff;
  margin-left: -1.65em;
  letter-spacing: 0.05em;
  font-size: 0.85em;
}

input#make-pesto {
  display: none;
}

label[for="make-pesto"] {
  color: #cf3f3f;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

input#make-pesto:checked + ol li label[for="make-pesto"],
label[for="make-pesto"]:hover {
  color: #8bc34a;
}

input#make-pesto:checked + ol li ul {
  display: block;
}

label[for="make-pesto"] span {
  background: #cf3f3f;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-block;
  text-align: center;
  color: #fff;
}

label[for="make-pesto"] span:before {
  content: "+";
}

input#make-pesto:checked + ol li label[for="make-pesto"] span:before {
  content: "-";
}

label[for="make-pesto"]:hover span,
input#make-pesto:checked + ol li label[for="make-pesto"] span {
  background: #8bc34a;
}

.recipe-back h2 {
  margin-top: 0;
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.buon-appetito {
  margin-top: 0.25em;
  font-weight: bold;
  font-size: 1.15em;
  color: #000000;
}

/*** TABLET ***/

@media only screen and (max-width: 980px) {
  ul.ingredients + .tip {
    width: calc(75% - 13em);
    font-size: 0.85em;
    line-height: 1em;
    position: absolute;
    bottom: -0.25em;
  }
  ul.ingredients + .tip span {
    padding-top: 0;
  }
  ul.ingredients {
    width: 100%;
  }
  .description p.tip {
    width: 180%;
  }
}

@media only screen and (max-width: 768px) {
  h1 {
    font-size: 1.85em;
  }
}

/*** MOBILE ***/

@media only screen and (max-width: 767px) {
  h1 {
    font-size: 1.5em;
  }
  .recipe-box {
    width: 90vw;
    height: 90vh;
  }

  figure {
    width: 15%;
  }

  .content {
    width: 85%;
  }

  ul.details {
    transform: scale(0.75);
    float: right;
    margin-right: -1em;
    margin-top: -2.5em;
  }

  .description {
    width: calc(100% - 11.5em);
    margin-right: 0;
    font-size: 0.7em;
  }

  .description p.tip {
    width: 105%;
  }

  ul.details + h2 {
    margin: -0.5em 0 1em 0;
    font-size: 0.85em;
  }

  ul.ingredients {
    transform: scale(0.75);
    margin-left: -3em;
    margin-top: -2em;
  }

  ul.ingredients + .tip {
    display: none;
  }

  ul.ingredients label:before {
    height: 1.25em;
  }

  figcaption {
    transform: rotate(90deg) translateX(-4em) translateY(5em);
    font-size: 0.65em;
  }

  ul.ingredients li {
    line-height: 1.25em;
  }

  .recipe-back h2 {
    font-size: 1.15em;
  }

  ol.instructions li {
    line-height: 1em;
    font-size: 0.85em;
  }

  ol.instructions li ul li {
    line-height: 1em;
    font-size: 1em;
  }
}

@media only screen and (max-width: 580px) {
  figure {
    width: 100%;
    height: 10%;
  }

  .content {
    width: 100%;
  }

  h1 {
    font-size: 1.45em;
  }

  ul.details {
    margin-top: -0.5em;
  }

  .description {
  }

  ul.ingredients {
    margin-left: -2.75em;
    width: 130%;
    margin-top: -1.5em;
  }

  ul.details + h2 {
    margin-top: 1em;
  }

  ul.ingredients label:before {
    height: 1.25em;
  }

  figure img {
    margin-left: -10em !important;
    margin-top: -6em;
    height: auto !important;
    width: 100%;
  }

  figcaption {
    transform: none;
    bottom: inherit;
    top: 7%;
    width: 98%;
    text-align: right;
  }

  .recipe-back figure img {
    width: 160%;
    margin-top: -3em;
  }
}