body {
  background-image: url('src/videoclub-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  background-attachment: scroll;
  margin: 0;
  padding: 0;
  height: 100vh;
}

    /* Wrapper to center viewers vertically and horizontally */
    .grid-container {
        width: 100vw;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);

    }

    /* Responsive viewers container: side-by-side on wide, stacked on narrow */

    .vhs-box {
        display: flex;
        gap: 16px;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 12px 0;
    }

    .vhs {
        flex: 1 1 300px;
        width: min(100%, 500px);
        max-width: 500px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .vhs-obj {
        width: 100%;
        height: min(50vh, 500px);
        max-height: 500px;
        position: relative;
        box-sizing: border-box;
        cursor: grab;
    }

    .watch-link {
        width: clamp(150px, 30%, 500px);
        margin-top: 8px;
        text-align: center;
        font-size: clamp(1rem, 1.5rem, 2rem);
        background-color: grey;
        padding: clamp(0.5rem, 1rem, 1.5rem);
        border:5px outset black;
        border-color:darkgray black white;
	    border-radius: 0;
	    border-width: 5px;
	    cursor: pointer;
	    display: inline-flex;
        
    }

    @media (max-width: 640px) {
        .watch-link {
            width: clamp(120px, 50%, 300px);
            font-size: 1rem;
            padding: 0.75rem;
        }
    }

    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        text-decoration: underline;
    }

    a:visited {
        color: black;
        text-decoration: none;
    }

    .vhs.obj canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Stack vertically on small screens */
    @media (max-width: 640px) {
        .grid-container {
            top: 0;
            transform: translate(-50%, 0);
        }
        .vhs-box {
            flex-direction: column;
            align-items: center;
        }
        .vhs {
            width: 92%;
        }
        .vhs-obj {
            height: 300px;
            max-width: none;
        }
    }