.phone i:hover {
    animation: shake 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.appear {
    cursor: pointer;
    animation: appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.disap {
    animation: disap 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.book-warp.appear-in {
    animation: appear_out_frame_Y 1s ease both;
}

.book-warp.appear-out {
    animation: disap_out_frame_Y 1s ease both;
}


@keyframes shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20%,
    40%,
    80% {
        transform: rotate(10deg);
    }

    30%,
    60%,
    90% {
        transform: rotate(-5deg);
    }
}

@keyframes appear {
    0% {
        transform: translateY(80px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes disap {
    0% {
        transform: translateY(0px);
        opacity: 1;
    }

    100% {
        transform: translateY(80px);
        opacity: 0;
    }
}

@keyframes appear_out_frame_Y {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0);

    }
}

@keyframes disap_out_frame_Y {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100vh);

    }
}