body {
    background-color: #e5e7e1;
    /* Sterile hospital-ish grey */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    /* This makes the page "jitter" once every 10 seconds */
    animation: page-glitch 10s infinite;
}

@keyframes page-glitch {

    0%,
    99% {
        transform: skew(0deg);
    }

    99.5% {
        transform: skew(1deg);
        background-color: #fff;
    }

    100% {
        transform: skew(0deg);
    }
}

h1 {
    color: #1a1a1a;
    font-size: clamp(1.2rem, 4vw, 2rem);
    line-height: 1.3;
    margin-bottom: 1rem;
    /* Subtle glitch effect */
    text-shadow: 1px 0px 0px rgba(255, 0, 0, 0.5), -1px 0px 0px rgba(0, 0, 255, 0.5);
    animation: text-shiver 3s infinite;
}

@keyframes text-shiver {

    0%,
    95%,
    100% {
        transform: translate(0, 0);
    }

    96% {
        transform: translate(2px, 0);
    }

    98% {
        transform: translate(-2px, 0);
    }
}

video {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.1s ease-in-out;
    border: 3px solid transparent;
    /* Keeps layout stable */
}

video:hover {
    border: 3px solid #ff0000;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
    filter: sepia(50%) hue-rotate(-50deg);
    /* Makes the video look sickly/yellowish on hover */
    cursor: help;
    /* Changes the mouse to a question mark */
}