.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: #c77195;
    border: 3px solid #7e3327;
    z-index: 10000;

    /*animation styling*/
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,-45%);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.popup.open {
    display: block;

    /*animation styling*/
    opacity: 1;
    visibility: visible; 
    transform: translate(-50%,-50%);

}

/*
.reading-popup {
    reading specific styling 
}

or can use ids
#reading-popup .popupbody {
    reading specific styling 
}*
/