@charset "UTF-8";
ul.margin-list {
  margin: 1em 2em;
}
ul.margin-list > ul {
  padding-left: 1em;
}

@media (max-width: 800px) {
  li {
    margin-bottom: 0.5em;
  }
}

span.fa-check {
  color: green;
}

span.fa-xmark {
  color: red;
}

.illustration-container {
  text-align: center;
}

img.illustration, img.step-image {
  border: 6px groove #96b2ee;
  border-radius: 10px;
  cursor: zoom-in;
  width: 100%;
}

img.illustration {
  max-width: 480px;
}
@media (max-width: 800px) {
  img.illustration {
    max-width: 364px;
  }
}

img.step-image {
  max-width: 450px;
}

.slideshow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.button-prev {
  background: #96b2ee;
  background: linear-gradient(90deg, #96b2ee 0%, rgba(0, 212, 255, 0) 100%);
  display: block;
  color: white;
  opacity: 0;
  transition: opacity 500ms ease;
  z-index: 2;
  position: absolute;
  width: 25%;
  height: 100%;
  border: 0;
  top: 0;
  left: 0;
}
@media (hover: none) {
  .button-prev {
    display: none;
  }
}
.button-prev .fa-solid {
  font-size: 4em;
}
.button-prev:hover {
  opacity: 0.9;
}

.button-next {
  background: #96b2ee;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0) 0%, #96b2ee 100%);
  display: block;
  color: white;
  opacity: 0;
  transition: opacity 500ms ease;
  z-index: 2;
  position: absolute;
  width: 25%;
  height: 100%;
  border: 0;
  top: 0;
  right: 0;
}
@media (hover: none) {
  .button-next {
    display: none;
  }
}
.button-next .fa-solid {
  font-size: 4em;
}
.button-next:hover {
  opacity: 0.9;
}

.slideshow-img-frame {
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  border: 6px groove #96b2ee;
  border-radius: 10px;
}
.slideshow-img-frame .slide-row {
  display: flex;
  align-items: flex-start;
  transition: transform 500ms ease-out;
}
.slideshow-img-frame img {
  cursor: zoom-in;
  margin: 0;
  display: block;
  z-index: 1;
}

.slideshow-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.slideshow-thumbnails .slideshow-thumbnail {
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 7px;
  position: relative;
  border: 3px dashed #96b2ee;
  background: 0;
  width: 96px;
  height: 64px;
  overflow: hidden;
}
.slideshow-thumbnails .slideshow-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.slideshow-thumbnails .slideshow-thumbnail .hover-shade {
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  display: block;
}
.slideshow-thumbnails .slideshow-thumbnail.active .hover-shade {
  background-color: #3e72e0;
  opacity: 0.4;
}

.full-width-slideshow {
  margin-top: 2em;
  margin-bottom: 1em;
}
.full-width-slideshow .slideshow-img-frame {
  width: 468px;
}
.full-width-slideshow .slideshow-img-frame img {
  width: 468px;
}
@media (max-width: 800px) {
  .full-width-slideshow .slideshow-img-frame img {
    width: 352px;
  }
}
@media (max-width: 800px) {
  .full-width-slideshow .slideshow-img-frame {
    width: 352px;
  }
}

.side-slideshow .slideshow-img-frame {
  width: 388px;
}
.side-slideshow .slideshow-img-frame img {
  width: 388px;
}
@media (max-width: 800px) {
  .side-slideshow .slideshow-img-frame img {
    width: 352px;
  }
}
@media (max-width: 800px) {
  .side-slideshow .slideshow-img-frame {
    width: 352px;
  }
}

.accessories-section, .section-with-side-img {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
}
.accessories-section .accessories-list h3, .accessories-section .img-list h3, .section-with-side-img .accessories-list h3, .section-with-side-img .img-list h3 {
  border: 0;
  margin-top: 20px;
  margin-bottom: 6px;
}
@media (max-width: 800px) {
  .accessories-section, .section-with-side-img {
    align-items: center;
  }
}

h3 {
  font-size: 1.35em;
  margin-top: 1.2em;
  border-bottom: 1px solid rgba(195, 150, 238, 0.5333333333);
}

figure.instruction-step, figure.instruction-note {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5em;
}
figure.instruction-step .step-number, figure.instruction-note .step-number {
  font-size: 2em;
}
figure.instruction-step .note-header, figure.instruction-note .note-header {
  font-size: 1.7em;
}
figure.instruction-step figcaption, figure.instruction-note figcaption {
  width: 50%;
  line-height: 1.6em;
}
figure.instruction-step figcaption ul, figure.instruction-note figcaption ul {
  margin-left: 0;
}
figure.instruction-step figcaption ul li, figure.instruction-note figcaption ul li {
  font-size: inherit;
  margin-bottom: 3px;
}
figure.instruction-step figcaption ul li:first-child, figure.instruction-note figcaption ul li:first-child {
  margin-top: 0.5em;
}
figure.instruction-step img.step-photo, figure.instruction-note img.step-photo {
  width: 50%;
}
figure.instruction-step:not(:first-child), figure.instruction-note:not(:first-child) {
  margin-top: 1.7em;
}
@media (max-width: 800px) {
  figure.instruction-step {
    flex-direction: column;
  }
  figure.instruction-step figcaption {
    width: 100%;
  }
  figure.instruction-step img.step-photo {
    width: 400px;
  }
}

ul.link-list {
  padding-left: 1em;
}
ul.link-list li {
  list-style: none;
  font-size: 1.2em;
  margin-bottom: 0.2em;
}
ul.link-list li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061";
  margin-right: 0.5em;
}
ul.link-list li:last-child {
  margin-bottom: 0;
}

.country-link-list {
  margin-left: 1.5em;
}
.country-link-list li {
  font-size: 1.2em;
  margin-bottom: 0.2em;
}
.country-link-list li:last-child {
  margin-bottom: 0;
}
.country-link-list .country-usa {
  list-style-image: url("../img/flags/usa.png");
}
.country-link-list .country-canada {
  list-style-image: url("../img/flags/canada.png");
}
.country-link-list .country-uk {
  list-style-image: url("../img/flags/uk.png");
}
.country-link-list .country-australia {
  list-style-image: url("../img/flags/australia.png");
}
.country-link-list .country-poland {
  list-style-image: url("../img/flags/poland.png");
}
.country-link-list .country-japan {
  list-style-image: url("../img/flags/japan.png");
}

@media (max-width: 800px) {
  .accessories-section, .section-with-side-img {
    flex-direction: column;
  }
  .accessories-section .single-image,
  .section-with-side-img .single-image {
    align-self: center;
  }
}
.slideshow-fig figcaption {
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 1.2rem;
  text-align: center;
}

ul.sublist {
  list-style-image: url("../img/dot-green-small.png");
  margin-left: 0;
}

li.sublist-container {
  list-style: none;
}

footer.categories-section {
  font-size: 1.5em;
  background: none;
  border: none;
  text-align: left;
  padding: 1rem 0 0 0;
  border-top: 1px solid #96b2ee;
  width: auto;
  color: black;
}

.soap-info {
  margin-top: 0.96em;
}
.soap-info .flex {
  display: flex;
  gap: 1em;
}
@media (max-width: 800px) {
  .soap-info .flex {
    flex-direction: column;
    align-items: center;
  }
}
.soap-info .flex img.illustration {
  max-width: 350px;
}
@media (max-width: 800px) {
  .soap-info .flex img.illustration {
    max-width: 400px;
  }
}

.nan {
  color: red;
}

.content-btn {
  border: 0;
  background-color: rgba(255, 255, 255, 0);
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  display: flex;
  vertical-align: middle;
}
.content-btn .fa-solid {
  transition: transform 600ms ease;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.1em;
  margin-left: 10px;
}

#contents {
  margin-left: 3rem;
}
#contents h2 {
  border: 0;
  margin-bottom: 0;
}
@media (max-width: 800px) {
  #contents {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    align-items: center;
  }
  #contents h2 {
    margin-top: 1.5em;
  }
}

ul.content-list {
  margin-left: 1rem;
  transition: max-height 600ms ease-out;
  overflow: hidden;
}
@media (max-width: 800px) {
  ul.content-list {
    margin-top: 1em;
  }
  ul.content-list > li {
    font-size: 1.52em;
    text-align: center;
    margin-bottom: 0.2em;
  }
}

ul.content-list > li {
  list-style: none;
  padding: 0.3em;
  font-size: 1.2em;
  position: relative;
  padding-left: 1.3em;
}

ul.content-list > li::before {
  position: absolute;
  left: -0.4em;
  top: 0.1em;
}

ul.content-list ul {
  padding: 0.3em 0.3em 0 0.3em;
  margin-left: 0;
}
ul.content-list ul > li {
  list-style: none;
  padding: 0.3em;
}
@media (max-width: 800px) {
  ul.content-list ul > li {
    margin: 0.5em 0;
  }
  ul.content-list ul > li:last-child {
    padding-bottom: 0;
  }
}
@media (max-width: 800px) {
  ul.content-list ul {
    padding-bottom: 0;
  }
}

ul.content-list > li.general-sec::before {
  content: "ℹ️";
}

ul.content-list > li.accessories-sec::before {
  content: "⭐";
}

ul.content-list > li.soap-info-sec::before {
  content: "🧼";
}

ul.content-list > li.video-sec::before {
  content: "🎞️";
}

ul.content-list > li.instructions-sec::before {
  content: "❔";
  left: -0.16em;
}

ul.content-list > li.copyright-sec::before {
  content: "©️";
}

ul.content-list > li.trivia-sec::before {
  content: "✨";
}

ul.content-list > li.see-also-sec::before,
ul.content-list > li.ref-sec::before {
  content: "➡️";
}

ul.content-list > li.powder-quantity-sec::before,
ul.content-list > li.length-sec::before {
  content: "📏";
}

ul.content-list > li.recycle-info-sec::before {
  content: "♻️";
}

ul.content-list > li.good-sec::before {
  content: "✔️";
}

ul.content-list > li.bad-sec::before {
  content: "❌";
}

ul.content-list > li.book-content-sec::before {
  content: "📙";
}

ul.content-list > li.contact-sec::before {
  content: "✉️";
}

ul.content-list > li.knife-info-sec::before {
  content: "🔪";
}

h1.main-header::before {
  content: url("../img/left_header_decor.png");
}
h1.main-header::after {
  content: url("../img/right_header_decor.png");
}

.single-trivia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.single-trivia img.illustration {
  max-width: 480px;
}
@media (max-width: 800px) {
  .single-trivia img.illustration {
    max-width: 400px;
  }
}
.single-trivia figcaption {
  margin-left: 1em;
  margin-right: 1em;
  text-align: center;
}

.used-in-tutorial p {
  border: 3px groove blue;
  background: linear-gradient(#00c3ff, #9ff2ff);
  border-radius: 0.5em;
  color: white;
  padding: 0.2em;
  margin-bottom: 1em;
  width: -moz-max-content;
  width: max-content;
}/*# sourceMappingURL=tutorial.css.map */