.announcement-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    pointer-events: none;
}

.announcement-modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.55);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.announcement-modal-window {
    position: relative;
    max-width: 900px;
    width: 90%;
    margin: 60px auto;
    background: white;
    padding: 40px;
    max-height: calc(100vh - 120px - 4.2em);/* no idea where 4.2em come from */
    overflow: auto;
    border-radius: 10px;

    transform: translateY(20px) scale(.98);
    opacity: 0;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.announcement-modal-close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.announcement-modal.is-open {
    pointer-events: auto;
}

.announcement-modal.is-open .announcement-modal-overlay {
    opacity: 1;
    visibility: visible;
}

.announcement-modal.is-open .announcement-modal-window {
    transform: translateY(0) scale(1);
    opacity: 1;
}