/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,500&family=Playfair+Display:ital,wght@0,700;1,400&display=swap");

/* font-family: 'Montserrat', sans-serif;
font-family: 'Playfair Display', serif;

Playfair Display
Regular 400 Italic
Bold 700

Regular 400
Medium 500
Medium 500 Italic
Bold 700
*/

/* SOME RESET */

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
div,
span,
h1,
h2,
h3,
p,
aside,
footer,
header,
menu,
nav {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html {
  font-size: 62.5%;
}

aside,
footer,
header {
  display: block;
}

/* Reapply the pointer cursor for anchor tags */
a {
  cursor: revert;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* COLORS */

:root {
  --black-text: #000;
  --dark-gray-headline: #4f4f4f;
  --dark-gray-body: #333333;
  --ligh-gray: #bdbdbd;
  --orange-text: #f2994a;
}

/* ATTRIBUTES */

body {
  margin: 32px 12px 32px 12px;
  font-family: "Montserrat", sans-serif;
  color: var(--black-text);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
}

h1 {
  font-size: clamp(2.4rem, 2.5vw, 4.8rem);
}

h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  color: var(--dark-gray-body);
}

h3 {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 1.5vw, 1.8rem);
  color: var(--dark-gray-body);
}

label {
  font-size: clamp(1.4rem, 1vw, 1.6rem);
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  color: var(--dark-gray-body);
}

ol {
  padding: 0;
  margin: 12px;
}

input {
  margin: 0;
}

aside {
  height: fit-content;
}

.subheading {
  display: flex;
  gap: 1.2rem;
  margin: 1.2rem auto 1.2rem auto;
  align-items: flex-start;
}

.subheading > img {
  padding-top: 0.3rem;
}
.subtitle {
  color: var(--dark-gray-headline);
}

.pre-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(0.8rem, 1vw, 1rem);
  color: var(--ligh-gray);
}

.servings {
  color: var(--orange-text);
  font-weight: 500;
  font-size: clamp(1rem, 1vw, 1.4rem);
}
.icon {
  max-width: 100%;
}

.recipe--info,
.recipe--servings {
  display: flex;
  gap: 0.6rem;
  margin: 2.2rem auto 2.2rem auto;
  align-items: center;
}

.recipe--info {
  display: flex;
  flex-direction: row;
  gap: 4rem;
}

.time--wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bold--text {
  font-weight: 700;
}

.italic--text {
  font-style: italic;
  font-weight: 500;
}

.ingredients--heading {
  margin: 3rem auto 1.4rem auto;
}

.main--checkboxes {
  margin: 2.4rem auto 3rem auto;
}

.recipe--heading {
  margin: 4rem auto 3rem auto;
}

/* INGREDIENTS AND INSTRUCTIONS */

.instructions--heading > h2 {
  color: var(--dark-gray-body);
  font-size: 2.4rem;
}

ol {
  list-style: none;
  counter-reset: ordered;
  margin-left: 20px;
}

.insctructions--steps {
  margin: 2.8rem 1.2rem 2.6rem 1.2rem;
}

.insctructions--steps > li::before {
  content: counter(ordered);
  counter-increment: ordered;
  float: left;
  border-radius: 0.6rem;
  width: 36px;
  height: 36px;
  text-align: center;
  margin-left: -1.2rem;
  background-color: var(--orange-text);
  color: #fff;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 2.2rem;
  margin-right: 1.5rem;
  vertical-align: middle;
}

.insctructions--steps > li {
  color: var(--black-text);
  font-size: 1.6rem;
  margin: 1.2rem auto 1.2rem auto;
  font-weight: 400;
}

.insctructions--steps > li > p {
  margin-left: 4rem;
}

.bold--instructions {
  color: var(--dark-gray-body);
  font-weight: 700;
}
input[type="checkbox"] {
  position: absolute;
}
input[type="checkbox"] ~ label {
  display: inline-block;
  padding-left: 3.5rem;
  vertical-align: middle;
}

input[type="checkbox"] {
  border: 2px solid var(--dark-gray-headline);
  border-radius: 4px;
  cursor: pointer;
  width: 22px;
  height: 22px;
}

.checkbox:checked + label {
  text-decoration: line-through;
}

.checkboxes {
  margin: 1.2rem auto 1.4rem auto;
}

.source {
  color: #bdbdbd;
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
}

footer {
  text-align: center;
  margin-top: 12rem;
}

footer > p {
  font-size: 1.4rem;
  font-family: "Montserrat", serif;
  font-weight: 500;
  color: #828282;
}

.github {
  font-weight: 700;
  color: #828282;
}

.github:hover {
  cursor: pointer;
}

/* TABLET */

@media screen and (min-width: 481px) and (max-width: 1000px) {
  .site--container {
    max-width: 90%;
    margin: 0 auto;
  }

  .subheading {
    max-width: 590px;
    margin-left: 0;
  }

  .cake--image {
    width: 90%;
    height: auto;
  }
  .insctructions--steps > li {
    margin: 3.2rem auto 3.2rem;
  }
}

/* LAPTOP + */

@media screen and (min-width: 1000px) {
  .site--container {
    max-width: 67%;
    margin: 0 auto;
    display: grid;
    grid:
      "header header header" auto
      "main   main   aside" 450px
      "main   main    .  " 1fr
      "footer footer footer" 150px
      / auto auto 300px;

    gap: 4rem;
  }

  header {
    grid-area: header;
  }

  main {
    grid-area: main;
  }

  aside {
    grid-area: aside;
    display: flex;
    flex-direction: column;
    height: 400px;
    background: #ffffff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    max-width: 80%;
    margin-left: 6rem;
  }

  footer {
    grid-area: footer;
  }
  .subheading {
    max-width: 590px;
    margin-left: 0;
  }
  .cake--image {
    width: 100%;
    height: auto;
  }

  .recipe--servings {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 5.8rem;
  }

  .knife--icon {
    width: 25px;
  }

  .icon {
    width: 25px;
    margin: 0;
  }

  .recipe--info {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .time--wrapper {
    display: flex;
    flex-direction: row;
    gap: 1.4rem;
    align-items: center;
  }

  .insctructions--steps > li {
    margin-top: 4rem;
  }
}