.post-popup-wrapper{
    background-color: rgba(0, 0, 0, 0);
    z-index: 214748300;
    display: none;
    transition: all 0.5s ease-in-out;
}

.post-popup-wrapper.active{
    display: flex;
    animation: popupWrapperAppear 0.5s;
    background-color: rgba(0, 0, 0, 0.6);
}

@keyframes popupWrapperAppear {
    from {background-color: rgba(0, 0, 0, 0);}
    to {background-color: rgba(0, 0, 0, 0.6);}
}

.post-popup.active{
    animation: popupAppear 0.5s ease-in-out;
} 

@keyframes popupAppear {
    from {transform: translatey(100vh);}
    to {transform: translatey(0);}
}

.post-popup{
    border-radius: 27px;
    transition: all 0.5s ease-in-out;
    min-height: 300px;
    max-height: 100vh;
}

.post-popup-wrapper.closing{
    background-color: rgba(0, 0, 0, 0) !important;
}

.post-popup.closing{
    transform: translatey(100vh) !important;
}

.post-popup-featured-image{
    border-radius: 27px 27px 0px 0px;
    margin-top: -1px;
    object-fit: cover;
}

.post-popup-close{
    top: -10px;
}

.post-popup-wave-background{
    transform: translateY(-10%);
}

.post-popup-wave-background{
    max-height: 400px;
}

.post-popup-content {
    overflow: auto;
    overflow-x: hidden;
    width: 100%;
}

.post-popup-content::-webkit-scrollbar {
    width: 9px;
    background-color: transparent;
  }
  
  .post-popup-content::-webkit-scrollbar-track{
    height: 90px;
  }

  .post-popup-content::-webkit-scrollbar-thumb {
    background: var(--accentColor);
    border-radius: 25px;
  }

.popup-logo-wrapper{
    transform: translateY(-100%);
}

.popup-logo{
    box-shadow: 0px 3px 54.1px 7px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
}

.popup-date{
    color: var(--accentColor);
}

.popup-image-loader div{
    border-radius: 27px 27px 0px 0px;
}

/* small screens */

@media screen and (max-width: 550px) {
    .post-popup {
        width: 100%;
        height: 100%;
        border-radius: 27px 27px 0px 0px;
    }

    .post-popup-close--desktop { 
        display: none;
    }

    .post-popup-close--mobile {
        display: block;
        height: 40px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 20px;
        top: 15px;
        left: 15px;
    }
}

/* xl screens */
@media screen and (min-width: 1900px) {
    .post-popup {
        width: 500px;
        height: 680px;
    }
}


.post-popup ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 18px;
}

.post-popup-content a {
    color: var(--accentColor);
}

.post-popup-content ul li{
    margin-top: 8px;
    margin-bottom: 8px;
}

.popup-text p, .popup-text ul, .popup-text ol, .post-popup-content h2{
    margin-bottom: 20px;
}