style.css

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --light: #f4f5f0;
  --yellow: #ffb005;
  --green: hsla(150, 100%, 27%, 1);
  --red: hsla(357, 72%, 47%, 1);
  --dark: hsla(154, 89%, 4%, 1);
}

/*  MAIN SITE CSS*/

body {
  background-color: var(--light);
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.651),
      rgba(255, 255, 255, 0.651)
    ),
    url("./images/bgpattern.svg");
  background-repeat: round;
  background-size: contain;
  font-family: "Poppins", sans-serif;
}

.main-wrapper {
  margin: 0 auto;
  max-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

section .question {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 1em;
}

/* NAV LOOKING BAR TOP OF PAGE */

header h1 {
  margin: 0 auto;
  background-color: var(--green);
  font-family: "Monoton", cursive;
  text-align: center;
  color: var(--light);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 2px;
  border-radius: 0 0 10px 10px;
  box-shadow: rgba(0, 0, 0, 0.137) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.1) 0px 4px 4px -2px;
}

section {
  margin: 0 auto;
  padding-bottom: 2rem;
  background-color: #f4f5f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(85) scale(3.18)'%3E%3Cpath id='a' data-color='fill' fill='none' stroke='%23FFAE03' stroke-width='2' d='M-25 20h50L0-20z'%3E%3C/path%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='50'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='150'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--light);
}

/* HERO - AMOUNT SECTION */
section.section__hero {
  background-color: #ffae03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(85) scale(3.18)'%3E%3Cpath id='a' data-color='fill' fill='none' stroke='%23FFC400' stroke-width='2' d='M-25 20h50L0-20z'%3E%3C/path%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='50'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='150'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
}

section .hero-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 2em;
  padding-bottom: 1em;
  align-content: center;
  justify-content: center;
}

section .hero-wrapper .pizza-select {
  border-radius: 10px;
  text-align: center;
  font-size: 1.1rem;
  align-self: center;
  height: min-content;
  width: min-content;
  padding: 0.2em;
}

section.section__hero .pie-amount {
  margin: 0 auto;
  padding: 0;
  border-radius: 50%;
  text-align: center;
  font-size: 3em;
  height: 3.1rem;
  width: fit-content;
}

/* FLAG DIV */

div.flag {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

div.flag .green {
  height: 5px;
  background-color: var(--green);
}
div.flag .white {
  height: 5px;
  background-color: var(--light);
}
div.flag .red {
  height: 5px;
  background-color: var(--red);
}

/* WHAT SIZE SECTION */

section.section__what-size {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  margin: 0 auto;
}

section.section__what-size .size-cards {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: var(--dark);
}

section.section__what-size .size-card {
  display: grid;
  max-width: 5rem;
}

section .size-card .btn-size {
  padding: 0.5em 0.4em;
  border-radius: 10px;
  border: none;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--red), 0 0 0 6px var(--light),
    0 0 0 9px var(--green), rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

section .size-card .btn-size:hover,
section .size-card .btn-size:focus {
  background-image: url("./images/btn-flag.svg");
  box-shadow: none;
  transform: scale(1.1);
}

section.section__what-size .size-card p {
  margin-top: 0.3em;
  font-size: 0.8rem;
  padding-top: 0.8em;
  transition: all 0.3s ease-in-out;
}
section .size-card .btn-size:hover ~ p,
section .size-card .btn-size:focus ~ p {
  font-weight: 700;
  transform: scale(1.1);
}

/* HYDRATION SECTION */
section.section__hydration {
  background-color: #ffae03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(85) scale(3.18)'%3E%3Cpath id='a' data-color='fill' fill='none' stroke='%23FFC400' stroke-width='2' d='M-25 20h50L0-20z'%3E%3C/path%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='50'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='50' y='150'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: min-content;
}

div.section__hydration .question {
  padding-bottom: 0;
}

div.water-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

div.water-icons {
  display: flex;
  justify-content: space-evenly;
  font-size: 1.5rem;
  text-align: center;
}

div.water-icon button {
  background: transparent url("./images/water-drop.png") no-repeat center;
  background-size: 4.5rem;
  height: 5rem;
  width: 5rem;
  border: none;
  filter: grayscale(100%);
  cursor: pointer;
  transition: all 0.4s ease-out;
}

div.water-icon button:hover,
div.water-icon button:focus {
  filter: grayscale(0);
  transform: scale(1.1);
}

section.section__hydration .hydration-info {
  margin-top: 1.8rem;
  margin-bottom: 0;
  padding-left: 1.2em;
  width: 75%;
  font-style: italic;
  font-size: 0.8em;
  letter-spacing: 0.8px;
}

/* TOTAL RECIPE SECTION*/
section.section__total {
  display: grid;
}

.section__total .recipe-total {
  margin: 3em auto 1em auto;
  width: 66%;
  font-size: 1.6em;
  text-align: right;
  background-color: var(--green);
  border-radius: 10px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  padding: 1.5em min(5em, 2em);
  box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;
}

.section__total .recipe-total p {
  padding-block: 0.4em;
  color: var(--light);
  font-weight: 600;
  letter-spacing: 2px;
}

.section__total .recipe-total p span {
  color: var(--yellow);
}

section.section__total .recipe-title-div {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.651),
      rgba(255, 255, 255, 0.651)
    ),
    url("./images/btn-flag.svg");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0.8em;
  max-width: 100%;
  min-height: 100%;
  text-align: center;
  color: var(--dark);
}

.dough-steps {
  margin-top: 2.5em;
  margin-inline: auto;
  padding: 3em 2.5em;
  width: max(90%, 75%);
  background-color: var(--green);
  border-radius: 10px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
  color: var(--light);
  line-height: 2;
  box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;
}

.dough-steps li:nth-of-type(1) {
  padding-top: 1em;
}

.dough-steps li {
  padding-block: 0.6em;
}

.dough-steps span {
  font-weight: 700;
}

footer {
  display: grid;
  place-items: center;
  padding-block: 1rem;
  background-color: var(--green);
  color: var(--light);
  text-align: center;
  font-size: 0.8rem;
}

footer p {
  letter-spacing: 2px;
}

footer span {
  color: var(--yellow);
}

footer img {
  padding-top: 0.4rem;
  height: 2rem;
}

.poolish-div {
  margin-top: 1.8rem;
  margin-right: 2rem;
  margin-left: auto;
  padding: 0.5rem;
  padding-right: 1rem;
  text-align: center;
  font-weight: 500;
  width: fit-content;
  border-radius: 50vh;
  margin-bottom: 2rem;
  background-color: var(--yellow);
  color: var(--dark);
}

/* checkbox styling poolish */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
  position: absolute;
  left: 0;
  opacity: 0;
}

input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 2.2rem;
  cursor: pointer;
}

/* checkbox aspect */
input[type="checkbox"]:not(:checked) + label::before,
input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 1.4rem;
  height: 1.4rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: unset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.2);
  transition: all 0.275s;
}

input[type="checkbox"]:not(:checked) + label::after,
input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  background-color: var(--green);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  color: var(--dark);
  transition: all 0.3s;
}

/* checked mark aspect changes */

input[type="checkbox"]:not(:checked) + label::after {
  opacity: 0;
  transform: scale(2) rotate(190deg);
}

input[type="checkbox"]:checked + label::after {
  opacity: 1;
  background-image: url("./images/btn-flag.svg");
  transform: scale(1) rotate(0);
}

input[type="checkbox"]:checked + label {
  color: var(--dark);
}

/* utility classes */
.text-yellow {
  color: var(--yellow);
}
.text-white {
  color: var(--light);
}
.hide {
  display: none;
}

@media (min-width: 28rem) {
  .section__total .recipe-total {
    padding: 1em;
    font-size: 2.1rem;
  }
}