body {
    background-image: url('https://sadhost.neocities.org/images/tiles/nurple-static-bright.gif');
}

.central {
    display: grid;
    place-items: center;
}

.virgen {
    height: 100%;
}

.divvirgen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh;
}

.angel {
    height: 100%;
}

.divangel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
}

.workbench {
    font-family: "Workbench", serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "BLED" 0,
      "SCAN" 0;
}

p {
    position: fixed;
    top: 0;
    left: 100%s;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    color: rgba(255, 255, 255, 0.2);
}

@keyframes distortion {
    0% {
        transform: translateY(0);
        filter: contrast(100%) brightness(100%) saturate(100%) blur(0px) opacity(100%);
    }
    20% {
        transform: translateY(-2px);
        filter: contrast(120%) brightness(110%) saturate(120%) blur(2px) opacity(50%);
    }
    40% {
        transform: translateY(2px);
        filter: contrast(80%) brightness(90%) saturate(80%) blur(1px) opacity(70%);
    }
    60% {
        transform: translateY(-3px);
        filter: contrast(150%) brightness(130%) saturate(150%) blur(3px) opacity(30%);
    }
    80% {
        transform: translateY(3px);
        filter: contrast(90%) brightness(80%) saturate(90%) blur(2px) opacity(90%);
    }
    100% {
        transform: translateY(0);
        filter: contrast(100%) brightness(100%) saturate(100%) blur(0px) opacity(70%);
    }
}

.central .divvirgen .virgen {
    animation: distortion 2s infinite; /* Establecer duración aquí si no se controla por JS */
    position: relative;
    object-fit: cover;
}