.stop-scrolling {
    overflow-y: hidden;
}

.readDiv {
    background-image: url('/image/var/puzyrnik_bg_1.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}

#puzyr_img {
    text-indent: 0;
    margin: 2rem auto;
    max-width: 50%;
    display: flex;
    justify-content: center;
}

#lop-div {
    position: fixed;
    z-index: 888;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: visible;
}

.lop {
    display: none;
}

.lop-ani {
    position: absolute;
    z-index: 888;
    display: block;
    background-image: url('/image/var/puzyrnik_lop_512.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6rem;
    -webkit-animation: bang 0.5s 1;
    animation: bang 0.5s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Animation steps */

@-webkit-keyframes bang {
    0%   { background-size: 6rem auto; }
	100% { background-size: 100vmax auto; }
  }
  
  @keyframes bang {
    0%   { background-size: 6rem auto; }
	100% { background-size: 100vmax auto; }
  }

/* ========= canvas ========= */
#js-container{
    display: none;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
}
#js-canvas {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}