/* Index page */
.p00 {
  align-items: center;
  background: url("img/kitchen.svg") bottom center no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column-reverse;
}

.p00__char {
  width: calc(100% - 80px);
}

/* Most of story pages */
.story {
  padding-top: 15%;
  text-align: center;
}

.story__char {
  position: relative;
}

.story__img {
  max-height: 80vh;
}

.story__quote01 {
  left: 37%;
  position: absolute;
  top: -8%;
}

.story__quote03 {
  left: 55%;
  position: absolute;
  top: -12%;
}

.story__quote09 {
  left: 38%;
  position: absolute;
  top: -8%;
}

/* Page 08 */
.p08 {
  max-width: 1000px;
  padding: 0 120px;
  position: relative;
  width: 100%;
}

.p08__quote {
  position: absolute;
  top: 17%;
  left: 0;
}

/* Page 14 */
.p14 {
  max-width: 1000px;
  padding: 0 80px;
  position: relative;
  width: 100%;
}

.p14__quote {
  position: absolute;
  top: 17%;
  right: 0;
  width: 360px;
}

/* Pages 15 and 19 */
.p15, .p19 {
  height: 100%;
  width: min-content;
}

.p15__img, .p19__img {
  height: 100%;
}

.p19 {
  position: relative;
}

.p19__counter {
  align-items: center;
  border-radius: 50%;
  bottom: 0;
  color: var(--white);
  display: flex;
  font-size: 2rem;
  height: 136px;
  justify-content: center;
  position: absolute;
  right: 11%;
  text-align: center;
  width: 136px;
}

.p19__water-button {
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 100px;
  position: absolute;
  width: 100px;
  transition: background-color 0.3s;
}

.p19__water-button.p19__water-button--checked {
  background-color: var(--picton-blue-semi);
}

.p19__water-button--1 {
  left: calc(30% - 50px);
  top: calc(21% - 50px);
}

.p19__water-button--2 {
  left: calc(51% - 50px);
  top: calc(42% - 50px);
}

.p19__water-button--3 {
  left: calc(65% - 50px);
  top: calc(51% - 50px);
}

.p19__water-button--4 {
  left: calc(78% - 50px);
  top: calc(45% - 50px);
}

.p19__water-button--5 {
  left: calc(17% - 50px);
  top: calc(62% - 50px);
}

.p19__water-button--6 {
  width: 200px;
  height: 200px;
  left: calc(35% - 100px);
  top: calc(81% - 100px);
}