:root {
  --page-background: #f7f6f3;
  --text-color: #635147;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-background);
  font-family: Arial, sans-serif;
}

.page {
  width: 100vw;
  overflow-x: hidden;
}

.hero {
  position: relative;

  width: 100vw;
  height: 100vh;

  background: var(--page-background);

  overflow: hidden;
}

.hero__paper {
  position: absolute;

  top: -3vh;
  left: 3vw;

  width: 102vw;
  height: 96vh;

  object-fit: fill;

  transform: rotate(-1.4deg);
  transform-origin: center;

  display: block;
  z-index: 1;
}

.hero__text--left {
  position: absolute;

  top: 20vh;
  left: 24vw;

  width: 26vw;
  height: auto;

  z-index: 5;
}

.hero__photo {
  position: absolute;

  top: 13vh;
  left: 53vw;

  width: 13vw;
  height: auto;

  transform: rotate(8deg);

  z-index: 5;
}

.hero__text--right {
  position: absolute;

  right: 5vw;
  bottom: 15vh;

  width: 35vw;
  height: auto;

  z-index: 5;
}

.intro {
  position: relative;

  width: 100vw;
  height: 100vh;

  background: var(--page-background);
}

.intro__content {
  position: absolute;

  top: 34vh;
  left: 23vw;

  width: 73vw;

  font-family: "American Typewriter", "Courier New", serif;

  font-size: 1.65vw;
  line-height: 1.34;

  font-weight: 400;

  color: var(--text-color);

  text-align: left;
}

.intro__content p {
  margin: 0;
}

.intro__content p + p {
  text-indent: 5.5vw;
}

.morning {
  position: relative;

  width: 100vw;
  height: 165vh;

  background: var(--page-background);

  overflow: hidden;
}

.morning__inner {
  position: relative;

  width: 100vw;
  height: 165vh;
}

.morning__time {
  position: absolute;

  top: 5vh;
  left: 1vw;

  width: 9vw;
  height: auto;

  z-index: 4;
}

.morning__main-photo {
  position: absolute;

  top: 9vh;
  left: 3.5vw;

  width: 90vw;
  height: auto;

  z-index: 2;
}

.morning__bluepaper {
  position: absolute;

  top: 42vh;
  left: 65vw;

  width: 18vw;
  height: auto;

  z-index: 1;
}

.morning__heading {
  position: absolute;

  top: 80vh;
  left: 9.5vw;

  width: 45vw;
  height: auto;

  z-index: 3;
}

.morning__text {
  position: absolute;

  top: 94vh;
  left: 18vw;

  width: 30vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.35;

  color: #635147;

  z-index: 3;
}

.morning__text p {
  margin: 0 0 2.2vh;
}

.morning__text p:last-child {
  margin-bottom: 0;
}

.breakfast {
  position: relative;

  width: 100vw;
  height: 100vh;

  background: var(--page-background);

  overflow: visible;
}

.breakfast__main-text {
  position: absolute;

  top: 30vh;
  left: 10vw;

  width: 43vw;
  height: auto;

  display: block;

  z-index: 10;
}

.breakfast__photo {
  position: absolute;

  top: 18vh;
  left: 55vw;

  width: 27vw;
  height: auto;

  display: block;

  z-index: 10;
}

.breakfast__time {
  position: absolute;

  top: 7vh;
  left: 74vw;

  width: 11vw;
  height: auto;

  display: block;

  z-index: 20;
}

.breakfast__side-text {
  position: absolute;

  top: 48vh;
  left: 70vw;

  width: 26vw;
  height: auto;

  display: block;

  z-index: 10;
}

.bangs {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: relative;
  width: 100vw;
  height: 165vh;

  background: var(--page-background);
  overflow: visible;

  isolation: isolate;
}

.bangs__inner {
  display: block !important;

  position: relative;
  width: 100vw;
  height: 165vh;
}

.bangs__time {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute;

  top: 11vh;
  left: 3vw;

  width: 9vw;
  height: auto;

  z-index: 20;
}

.bangs__main-photo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute;

  top: 18vh;
  left: 0;

  width: 80vw;
  height: auto;

  z-index: 3;
}

.bangs__paper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute;

  top: 36vh;
  left: 20vw;

  width: 100vw;
  height: 104vh;

  object-fit: fill;

  z-index: 1;
}

.bangs__heading {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute;

  top: 10vh;
  left: 35vw;

  width: 45vw;
  height: auto;

  z-index: 4;
}

.bangs__text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute;

  top: 92vh;
  left: 45vw;

  width: 28vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.34;
  font-weight: 400;

  color: #635147;

  z-index: 4;
}

.bangs__text p {
  margin: 0 0 3.2vh 0;
}

.bangs__text p:last-child {
  margin-bottom: 0;
}

.store {
  position: relative;

  width: 100vw;
  height: 110vh;

  background: var(--page-background);

  overflow: visible;
}

.store__photo {
  position: absolute;

  top: 10vh;
  left: 36vw;

  width: 47vw;
  height: auto;

  display: block;

  z-index: 2;
}

.store__time {
  position: absolute;

  top: 4vh;
  left: 32vw;

  width: 10vw;
  height: auto;

  display: block;

  z-index: 10;
}

.pause-screen {
  position: relative;

  width: 90vw;
  height: 100vh;

  background: var(--page-background);

  overflow: hidden;
}

.pause-screen__text {
  position: absolute;

  top: 30vh;
  left: 25vw;

  width: 50vw;
  height: auto;

  display: block;
}

.room-screen {
  position: relative;

  width: 100vw;
  height: 160vh;

  background: var(--page-background);
  overflow: visible;
}

.room-screen__inner {
  position: relative;

  width: 100vw;
  height: 160vh;
}

.room-screen__photo {
  position: absolute;

  top: 9vh;
  left: 50%;

  width: 80.1vw;
  height: auto;

  transform: translateX(-50%);

  display: block;
  z-index: 1;
}

.room-screen__time {
  position: absolute;

  top: 2vh;
  left: 7vw;

  width: 12vw;
  height: auto;

  display: block;
  z-index: 20;
}

.room-item {
  position: absolute;
  display: block;
  z-index: 10;
  height: auto;
}

.room-item--1 {
  top: 27vh;
  left: 75vw;
  width: 15vw;
}

.room-item--2 {
  top: 56vh;
  left: 81vw;
  width: 7.5vw;
}

.room-item--3 {
  top: 61.3vh;
  left: 75vw;
  width: 5vw;
}

/* туфли */
.room-item--4 {
  top: 77.5vh;
  left: 75vw;
  width: 10vw;
}

.room-item--5 {
  top: 75vh;
  left: 18vw;
  width: 10vw;
}

.room-item--6 {
  top: 49.5vh;
  left: 17.5vw;
  width: 9vw;
   z-index: 12;
}

.room-item--7 {
  top: 57vh;
  left: 13vw;
  width: 15vw;
  z-index: 10;
}

.room-item--8 {
  top: 20vh;
  left: 15vw;
  width: 11vw;
}

.room-screen__heading {
  position: absolute;

  top: 90vh;
  left: 29vw;

  width: 43vw;
  height: auto;

  display: block;
  z-index: 20;
}

.room-screen__description {
  position: absolute;

  top: 114vh;
  left: 35vw;

  width: 27vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.1vw;
  line-height: 1.35;
  font-weight: 400;

  color: #635147;

  z-index: 20;
}

.room-screen__description p {
  margin: 0 0 3vh 0;
}

.room-screen__description p:last-child {
  margin-bottom: 0;
}

.room-screen__quote {
  position: absolute;

  top: 185vh;
  left: 55vw;

  width: 47vw;
  height: auto;

  display: block;
  z-index: 20;
}

.desk-screen {
  position: relative;

  width: 100vw;
  height: 145vh;

  background: var(--page-background);
  overflow: visible;
}

.desk-screen__inner {
  position: relative;

  width: 100vw;
  height: 145vh;
}

.desk-screen__photo {
  position: absolute;

  top: 100vh;
  left: 10vw;

  width: 75vw;
  height: auto;

  display: block;
  z-index: 1;
}

.desk-screen__time {
  position: absolute;

  top: 90vh;
  left: 10vw;

  width: 12vw;
  height: auto;

  display: block;
  z-index: 10;
}

.session-screen {
  position: relative;

  width: 100vw;
  height: 155vh;

  background: var(--page-background);
  overflow: visible;
}

.session-screen__inner {
  position: relative;

  width: 100vw;
  height: 155vh;
}

.session-screen__heading {
  position: absolute;

  top: 80vh;
  left: 17vw;

  width: 51vw;
  height: auto;

  display: block;
  z-index: 2;
}

.session-screen__text {
  position: absolute;

  top: 105vh;
  left: 23vw;

  width: 29vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.35;
  font-weight: 400;

  color: #635147;

  z-index: 2;
}

.session-screen__text p {
  margin: 0 0 3.2vh 0;
}

.session-screen__text p:last-child {
  margin-bottom: 0;
}

.session-screen__quote {
  position: absolute;

  top: 180vh;
  left: 58vw;

  width: 31vw;
  height: 28vh;

  z-index: 2;
}

.session-screen__quote-paper {
  position: absolute;

  top: 0;
  left: 0;

  width: 7vw;
  height: auto;

  display: block;
  z-index: 1;
}

.session-screen__quote-text {
  position: absolute;

  top: 6vh;
  left: 4vw;

  width: 26vw;

  margin: 0;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.38;
  font-weight: 400;

  color: #635147;

  z-index: 2;
}

.park-screen {
  position: relative;

  width: 100vw;
  height: 105vh;

  background: var(--page-background);
  overflow: visible;
}

.park-screen__inner {
  position: relative;

  width: 100vw;
  height: 105vh;
}

.park-screen__text-left {
  position: absolute;

  top: 80vh;
  left: 7vw;

  width: 20vw;
  height: auto;

  display: block;
  z-index: 10;
}

.park-screen__photo {
  position: absolute;

  top: 70vh;
  left: 35vw;

  width: 31vw;
  height: auto;

  display: block;
  z-index: 2;
}

.park-screen__time {
  position: absolute;

  top: 60vh;
  left: 62vw;

  width: 12vw;
  height: auto;

  display: block;
  z-index: 3;
}

.park-screen__caption {
  position: absolute;

  top: 100vh;
  left: 65vw;

  width: 25vw;
  height: auto;

  display: block;
  z-index: 2;
}

.park-screen__text-right {
  position: absolute;

  top: 85vh;
  left: 20vw;

  width: 20vw;
  height: auto;

  display: block;
  z-index: 10;
}

.summer-screen {
  position: relative;

  width: 100vw;
  height: 115vh;

  background: var(--page-background);
  overflow: visible;
}

.summer-screen__inner {
  position: relative;

  width: 100vw;
  height: 115vh;
}

.summer-screen__heading {
  position: absolute;

  top: 23vh;
  left: 20vw;

  width: 60vw;
  height: auto;

  display: block;
  z-index: 2;
}

.summer-screen__text {
  position: absolute;

  top: 55vh;
  left: 20vw;

  width: 64vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.35vw;
  line-height: 1.45;
  font-weight: 400;

  color: #635147;

  z-index: 2;
}

.summer-screen__text p {
  margin: 0 0 4vh 0;
}

.summer-screen__text p:last-child {
  margin-bottom: 0;
}

.cinema-screen {
  position: relative;

  width: 100vw;
  height: 120vh;

  background: var(--page-background);
  overflow: visible;
}

.cinema-screen__inner {
  position: relative;

  width: 100vw;
  height: 120vh;
}

.cinema-screen__paper {
  position: absolute;

  top: 8vh;
  left: 25vw;

  width: 80vw;
  height: 100vh;

  object-fit: fill;

  transform: rotate(-8deg);

  display: block;
  z-index: 1;
}

.cinema-screen__photo {
  position: absolute;

  top: 25vh;
  left: 8vw;

  width: 62vw;
  height: auto;

  display: block;

  transform: rotate(-2deg);

  z-index: 3;
}

.cinema-screen__time {
  position: absolute;

  top: 14vh;
  left: 56vw;

  width: 11vw;
  height: auto;

  display: block;

  z-index: 10;
}

.value-screen {
  position: relative;

  width: 100vw;
  height: 120vh;

  background: var(--page-background);
  overflow: visible;
}

.value-screen__inner {
  position: relative;

  width: 100vw;
  height: 120vh;
}

.value-screen__heading {
  position: absolute;

  top: 2vh;
  left: 30vw;

  width: 60vw;
  height: auto;

  display: block;

  z-index: 5;
}

.value-screen__text {
  position: absolute;

  top: 29vh;
  left: 35vw;

  width: 26vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.38;
  font-weight: 400;

  color: #635147;

  display: block;
  z-index: 5;
}

.value-screen__text p {
  margin: 0 0 4vh 0;
}

.value-screen__text p:last-child {
  margin-bottom: 0;
}

.quote-screen {
  position: relative;

  width: 100vw;
  height: 68vh;

  background: var(--page-background);
  overflow: visible;
}

.quote-screen__image {
  position: absolute;

  top: 4vh;
  left: 10vw;

  width: 48vw;
  height: auto;

  display: block;

  z-index: 2;
}

.maintext2-screen {
  position: relative;

  width: 100vw;
  height: 75vh;

  background: var(--page-background);
  overflow: visible;
}

.maintext2-screen__image {
  position: absolute;

  top: 8vh;
  left: 50%;

  width: 50vw;
  height: auto;

  transform: translateX(-50%);

  display: block;

  z-index: 2;
}

.bed-screen {
  position: relative;

  width: 100vw;
  height: 125vh;

  background: var(--page-background);
  overflow: visible;
}

.bed-screen__inner {
  position: relative;

  width: 100vw;
  height: 125vh;
}

.bed-screen__photo {
  position: absolute;

  top: 2vh;
  left: 7vw;

  width: 72vw;
  height: auto;

  display: block;

  z-index: 2;
}

.bed-screen__time {
  position: absolute;

  top: -4vh;
  left: 14vw;

  width: 10vw;
  height: auto;

  display: block;

  z-index: 10;
}

.romantic-screen {
  position: relative;

  width: 100vw;
  height: 120vh;

  background: var(--page-background);
  overflow: visible;
}

.romantic-screen__inner {
  position: relative;

  width: 100vw;
  height: 120vh;
}

.romantic-screen__heading {
  position: absolute;

  top: 3vh;
  left: 8vw;

  width: 34vw;
  height: auto;

  display: block;
  z-index: 5;
}

.romantic-screen__text {
  position: absolute;

  top: 23vh;
  left: 10vw;

  width: 27vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.38;
  font-weight: 400;

  color: #635147;

  z-index: 5;
}

.romantic-screen__text p {
  margin: 0 0 4vh 0;
}

.romantic-screen__text p:last-child {
  margin-bottom: 0;
}

.romantic-screen__quote {
  position: absolute;

  top: 84vh;
  left: 62vw;

  width: 28vw;
  height: 24vh;

  z-index: 5;
}

.romantic-screen__quote-paper {
  position: absolute;

  top: 15vh;
  left: 0;

  width: 6vw;
  height: auto;

  display: block;
  z-index: 1;
}

.romantic-screen__quote-text {
  position: absolute;

  top: 20vh;
  left: 3vw;

  width: 22vw;

  margin: 0;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.05vw;
  line-height: 1.38;
  font-weight: 400;

  color: #635147;

  z-index: 2;
}

.night-screen {
  position: relative;

  width: 100vw;
  height: 100vh;

  background: var(--page-background);
  overflow: visible;
}

.night-screen__inner {
  position: relative;

  width: 100vw;
  height: 100vh;
}

.night-screen__text-1 {
  position: absolute;

  top: 33vh;
  left: 6vw;

  width: 27vw;
  height: auto;

  display: block;
  z-index: 5;
}

.night-screen__text-2 {
  position: absolute;

  top: 39vh;
  left: 15vw;

  width: 24vw;
  height: auto;

  display: block;
  z-index: 5;
}

.night-screen__photo {
  position: absolute;

  top: 13vh;
  left: 40vw;

  width: 41vw;
  height: auto;

  display: block;
  z-index: 2;
}

.night-screen__text-3 {
  position: absolute;

  top: 68vh;
  left: 60vw;

  width: 33vw;
  height: auto;

  display: block;
  z-index: 5;
}

.night-screen__time {
  position: absolute;

  top: 1vh;
  left: 78vw;

  width: 13vw;
  height: auto;

  display: block;
  z-index: 10;
}

.final-screen {
  position: relative;

  width: 100vw;
  height: 95vh;

  background: var(--page-background);
  overflow: visible;
}

.final-screen__inner {
  position: relative;

  width: 100vw;
  height: 95vh;
}

.final-screen__text {
  position: absolute;

  top: 18vh;
  left: 33vw;

  width: 42vw;

  font-family: "American Typewriter", "Courier New", serif;
  font-size: 1.15vw;
  line-height: 1.4;
  font-weight: 400;

  color: #635147;

  z-index: 5;
}

.final-screen__text p {
  margin: 0 0 4vh 0;
}

.final-screen__text p:last-child {
  margin-bottom: 0;
}

.footer-screen {
  position: relative;

  width: 100vw;
  height: 100vh;

  background: var(--page-background);
  overflow: hidden;
}

.footer-screen__inner {
  position: relative;

  width: 100vw;
  height: 100vh;
}

.footer-screen__paper {
  position: absolute;

  top: 20vh;
  left: 5vw;

  width: 100vw;
  height: 100vh;

  object-fit: fill;

  transform: rotate(-9deg);

  display: block;
  z-index: 1;
}

.footer-screen__text {
  position: absolute;

  top: 58vh;
  left: 42vw;

  width: 48vw;
  height: auto;

  display: block;
  z-index: 5;
}