.video-container {
margin-top: 4em;
padding-top: 2em;
margin-bottom: 2em;
padding-bottom: 4em;
width: 50vh;
height: 240px; /* Initial size */
animation: slideAndEnlarge 10s forwards; /* 'forwards' makes the element remain in the final state */
}

@keyframes slideAndEnlarge {
0% {transform: translateX(0) scale(1);}
100% {transform: translateX(calc(100vw - 780px)) scale(2.4375, 2.9167); /* Adjust scale to achieve 780x700 size */
}}


/* Disable animations for smaller screens */
@media screen and (max-width: 880px) {
.video-container {
/* Override the animation property for the video container */
animation: none;
}

/* If there are other animated elements, disable their animations similarly */
.pagelinks a, .intro h1, header h1 {
animation: none;
}
}