dialog{
    border-radius: 10px;
    box-shadow: 2px 2px 4px #180d22;
    padding: 20px;
    animation: desaparecer .1s;
        top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

dialog::backdrop{
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(1.7px);
}

dialog[open]{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: aparecer .1s;
}

@keyframes aparecer {
    from{
        opacity: 0;
        top: 30%;
    }
    to {
        opacity: 1;
        top: 50%;
    }
}

@keyframes desaparecer {
    from{
        display: block;
        opacity: 1;
        top: 50%;
    }
    to {
        opacity: 0;
        top: 30%;
    }
}