.play {
    cursor: pointer;
}

.modal-background {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    z-index: 101;
    display: none;
}

.modal-background.open {
    display: block;
    animation: fade-in 0.4s linear forwards;
}

.modal-background .modal-inner {
    height: 720px;
    max-width: 1280px;
    width: 90%;
    display: block;
    margin: 30px auto;
    position: relative;
}

.modal-background .modal-close {
    height: 36px;
    width: 36px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
    z-index: 10;
}

.modal-background .modal-close::before,
.modal-background .modal-close::after {
    content: "";
    height: 2px;
    width: 16px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 1px);
    left: calc(50% - 8px);
}

.modal-background .modal-close::before {
    transform: rotate(-45deg);
}

.modal-background .modal-close::after {
    transform: rotate(45deg);
}

/* Animação opcional (se ainda não tiver definida) */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}