body{
     background-color: #0A0F1C;
    color: white;
    margin: 0;
}
main{
     height: 55vh;
    width: 100%;

}
.div-wht-dis{
    display: flex;
    align-content: center;
}

#mainSection{
    display: flex;
}
.titlePage{
    background-color: saddlebrown;
    height: 50vh;
    width: 20%;
    margin: 0 auto;
    padding: 5vh;
    border-radius: 0 3vh 3vh 0;
    align-content: center;
}
.titleOfBook{
    color: white;
    text-align: center;
    transform: translateY(8vh);
    margin-right: 10%;
}
.butonOne{
    height: 15vh;
    width: 15%;
    margin-left: 95%;
    transform: translateY(-5vh);
}
.forAnother{
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* ПК — все як було */

@media (max-width: 1000px){
    main{
     height: 80vh;
}
    .forAnoither{
        width: 100%;
    }

    .buton{

        height: 5vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }


}

.buton{
    background-color: #f1ab00;
    border: solid 3px #723a12;
    color: saddlebrown;
    width: 8%;
    height: 30vh;
    border-radius: 1vh;
    margin-left: 1.5%;
    margin-right: 1.5%;
}
.forDivHis
{
    position: absolute;

    left: 50%;
    transform: translateX(-100%);

    width: 20%;
    height: 40vh;

    border-radius: 3vh 0 0 3vh;
    background-color: saddlebrown;
    border: solid 3px #723a12;

    text-align: center;
    align-content: center;
    justify-content: center;
}

.forDivHis img{
    width: 100%;
    height: 70%;
    object-fit: cover;
    display: block;
    border-radius: 1vh;
}

.leftAnim{
    animation-name: animationInLeft;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes animationInLeft{

    0%{
        transform: translateX(-100%) rotateY(0deg);
    }

    100%{
        transform: translateX(0%) rotateY(180deg);
    }
}

.RightAnim{
      animation-name: animationInRight;
    animation-duration: 1.5s;
    animation-iteration-count: 1;

}

@keyframes animationInRight{

    0%{
        transform: translateX(0%) rotateY(180deg);
    }

    100%{
        transform: translateX(-100%) rotateY(0deg);
    }
}
.animWithOpasity{
    animation-name: withOpasity;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    opacity: 0;
}
@keyframes withOpasity{
    0%{
        opacity: 1;
    }
    75%{
        opacity: 0;

    }
    100%{
        display: inline-block;
    }
}
.forREdo{
    animation-name: withoutOpasity;
    animation-duration: 3s;
    animation-iteration-count: 1;
    opacity: 1;
}
@keyframes withoutOpasity{
    0%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
    100%{
        display: none;
    }
}