*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }

html, body {
  height: 100%;
  }

::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}

::selection {
  background: #222;
  color: white;
  }
::-moz-selection {
  background: #222;
  color: white;
  }

body * {
  transform-style: preserve-3d; /* am i doing this wrong? */
  }

body {
  background:
    radial-gradient(
      hsla(199,40%,90%,.7),
      hsla(0,0%,100%,0)
      )
      no-repeat,
    linear-gradient(
      60deg,
      purple,
      dodgerblue,
      violet
      );
  color: #222;
  font-family: 'Gabriela', serif;
  perspective: 70em;/*in your face*/
	overflow-y: hidden;
  }

h1, p {
  margin: 5% 0;
  }

.book {
  height: 90%;
  max-height: 1000px;/*make addaptive*/
  min-height: 300px;/*make addaptive*/
  width: 1000px;
  background-image:
    linear-gradient(
      90deg,
      hsla(30,40%,50%,.6),
      hsla(30,40%,20%,.9),
      hsla(30,40%,50%,.4) 90%
      );
  background-color: hsl(30,35%,55%);
  position: absolute;
  top: 40px; left: 0; bottom: 0; right: 0;
  margin: auto;
  border: 3px solid hsla(30,10%,20%,1);
  border-radius: 5px;
  box-shadow: 0 0 150px hsla(170,0%,0%,.4);
  }

.page {
  height: 100%;
  width: 50%;
	line-height: 1.5;
  border-right: 10px solid transparent;
  position: absolute;
  top: 0; right: 0;
  transform-origin: 0 50%;
  transition: .8s;
  /*animation: unflip .3s linear;*/
  }
  [class*='side'] {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: hsl(30,40%,70%);
    backface-visibility: hidden;
    overflow: hidden; /* было auto — страница должна вмещать текст целиком, без скролла */
    padding: 5% 8%;
    }
  .side-1 {
    z-index: 2;
    box-shadow: inset 50px 0 50px rgba(0,0,0,.5);
    transition: .5s;
    }
  .side-2 {
    transform:
      rotateY(180deg);
    box-shadow: inset -50px 0 50px rgba(0,0,0,.5);
    }
  .flipped > .side-1 {
    box-shadow: inset 300px 0 50px rgba(0,0,0,.8);
    transition: .6s;
    }
  .flipped > [class*='side'] {
    pointer-events: auto;
    }
  .page:after {
    width: 100px;
    height: 50px;
    background-color: #555;
    position: absolute;
    top: 0; bottom: 0; right: -100px;
    margin: auto;
    color: white;
    text-shadow: 0 -1px 0 #222;
    line-height: 50px;
    text-align: center;
    font-family: monospace;
    content: 'вперёд';
    /*content: attr(data-page) ' вперёд' ;*/
    animation: hide .8s linear;
    }
    .page.flipped:after {
      content: 'назад';
      /*content: attr(data-page-flipped) ' назад'; */
      transform:
        rotateY(180deg);
      pointer-events: auto;
    }
    .number {
      width: 20px;
      height: 20px;
      /*background-color: #555;*/
      position: absolute;
      bottom: 48%;
      transform: translateX(50%);
      color: #f03e3e;
      text-shadow: 0 -1px 0 #222;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-family: monospace;
      line-height: 20px; /* высота строки равна высоте элемента для центрирования текста */
    }
  /* to hide on flip animation */
  @keyframes hide {
    0% {opacity: 0;}
    85% {opacity: 0;}
    100% {opacity: 1;}
    }
.flipped {
  transform:
    rotateY(-180deg);
  pointer-events: none;
  /*animation: flip .3s linear;
  animation-fill-mode: forwards;*/
  }

.no-anim,
  .no-anim:after {
  animation: none;/* disable animation when page loads */
  }
@keyframes flip {
  to {
    transform:
      rotateY(-180deg);
    }
  }
@keyframes unflip {
  from {
    transform:
      rotateY(-180deg);
    }
  to {
    transform:
      rotateY(0deg);
    }
  }