body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: black;

}

/* START OF BACKGROUND */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: auto; /* allow JS interactions if needed */
  outline: none;
}
/* END OF BACKGROUND */




/* START OF HEADER */

/* Header wrapper spans full width of main panel and is centered */
.header-wrapper {
    width: 100%;
    height: 200px; /* adjustable height */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* Inner content is centered */

.header-content {
    width: 500px;
    height: 200px; /* adjustable height */

    justify-content: center;
    align-items: center;
    text-align: center;
}
.header-content h1 {
    font-size: 100px; /* large text */
    margin: 0;
    color: white;
}

.header-content p {
    font-size: 25px; /* small text */
    margin: 5px 0 0 0;
    color: white;
}
.header-gif {
    height: 100px; /* adjust size as needed */
    width: auto;
}

.left-gif {
    margin-right: 20px; /* spacing between left GIF and content */
}

.right-gif {
    margin-left: 20px; /* spacing between right GIF and content */
}
/* END OF HEADER */




/* START OF MAIN DIV */

#main-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    border-left: double 15px white;
    border-right: double 15px white;

    width: 800px; /* wider */

    background: rgba(0, 0, 0, 0.25); /* lighter */
    backdrop-filter: blur(4px);       /* less blur */
    -webkit-backdrop-filter: blur(4px);

    overflow-y: auto;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* Edge/IE */
}
#main-panel::-webkit-scrollbar {
    display: none;                /* Chrome / Safari */
}
.content-box p {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.content-box {
    height: 480px;
    margin: 20px;
    background: transparent;
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
    flex-direction: column;  /* stack <p> and video vertically */
}
.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;     /* horizontal center */
    justify-content: flex-start; /* don't stretch video */
    width: 100%;
}
.video-container p {
    max-width: 70%;       /* same as video width or whatever you want */
    word-wrap: break-word; /* break long words onto new lines */
    white-space: normal;   /* allow wrapping */
    text-align: center;    /* center text */
}



.main-video {
    width: 70%;
    height: auto;       /* maintain aspect ratio */
    max-height: 400px;  /* constrain max height */
    border: 5px solid black;
}




/* END OF MAIN DIV */





/* START OF DIVIDER */
    .divider {
    display: block;
    height: 60px;    /* adjust this to change height */
    width: auto;     /* keeps width auto */
    margin-left: auto;
    margin-right: auto;
}
/* END OF DIVIDER */


















/*TEXT CSS EFFECTS*/
.white-outline {
    text-shadow: 
        2px 0 0 white,
        -2px 0 0 white, 
        0 2px 0 white, 
        0 -2px 0 white;
}
.black-outline {
    text-shadow: 
        2px 0 0 black, 
        -2px 0 0 black, 
        0 2px 0 black,
        0 -2px 0 black; 
    color: white;   
}
.thick-black-outline {
    text-shadow: 
        7px 0 0 black, 
        -7px 0 0 black, 
        0 7px 0 black,
        0 -7px 0 black; 
    color: white;   
}