styles.css

/* Reset default margin and padding */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
}

video {
    width: 50%; /* Set video width to 50% of the page width */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allows clicks to pass through */
}

.overlay img {
    width: 15%; /* Set overlay image width to 20% of the page width */
    height: auto; /* Maintain aspect ratio */
    opacity: 0.2; /* Set transparency to 20% */
}