html {
            height: 100%;
        }
        body {
            background: #fff;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height: 100%;
/*            font: 36px Teko, sans-serif;*/
            font: 18px IBM Plex Sans Condensed;
            color: #333333;
            /*color: #fff;*/
        }

        div#page {
            display: table;
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            vertical-align: middle;
            padding: 0px 0px 0px 0px;
            border: 0px solid red;
        }
        div#title {
            text-align: center;
            margin-bottom: 0px;
        }
        div#content {
            text-align: left;
            vertical-align: top;
/*            font: 20px Lato, sans-serif;*/
/*            font: 18px IBM Plex Sans Condensed;*/
        }

        div#menu {
/*            width: 100%;*/
            text-align: center;
            vertical-align: top;
/*            font: 20px Lato, sans-serif;*/
            font: 18px IBM Plex Sans Condensed;
            padding-top: 10px;
            padding-bottom: 80px;
        }
        div#footer {
/*            width: 100%;*/
            text-align: center;
            vertical-align: top;
/*            font: 20px Lato, sans-serif;*/
            font: 18px IBM Plex Sans Condensed;
            padding: 50px;
        }

        .zoom {
            padding: 0px;
            transition: transform .2s; /* Animation */
            margin: 0 auto;
        }

        .zoom:hover {
            transform: scale(2.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
        }

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

        a:hover {
            font-weight: bold;
        }

        button#cold {
            background: #AADDFF;
        }
        button#medium {
            background: #DDDDDD;
        }
        button#hot {
            background: #FFCCCC;
        }
        button#bw {
            background: #666666;
        }

        .playbutton {
            width: 25px;
            height: 25px;
            position: relative;
            margin: 0em;
            padding: 0em 0em;
            border: 2px solid transparent;
            border-radius: 0.5em;
            /*  background-color: pink;*/
            /*  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);*/
            cursor: pointer;
        }

        .playbutton:active,
        .active {
        /*    top: 2px;
            left: 1px;

        */
            border: 2px solid rgba(0, 0, 0, 0.5);
            box-shadow: none;
        }

        video {
            max-height: 90vh;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            display: flex;
            flex-wrap: wrap; /* Allows boxes to wrap onto the next line */
/*            justify-content: space-between; /* Distributes space between boxes */*/
            padding: none;
        }

        .videobox {
            background-color: inherit;
/*            border: 1px solid black;*/
            border: none;
            padding: none;
            margin-bottom: 50px;
            min-width: 580px; /* Minimum width for each box */
            max-width: 50%; /* Maximum width to fit two boxes in a row */
        }
        .textbox {
            background-color: inherit;
/*            border: 1px solid black;*/
            border: none;
            padding: 0px 50px 0px 0px;
            min-width: 580px; /* Minimum width for each box */
            max-width: 50%; /* Maximum width to fit two boxes in a row */
        }

        /* Media query for smaller screens */
        @media (max-width: 1200px) {
            .videobox {
                max-width: 100%; /* Full width on smaller screens */
                margin-bottom: 0px; /* Space between stacked boxes */
            }
            .textbox {
                max-width: 100%; /* Full width on smaller screens */
                margin-bottom: 200px; /* Space between stacked boxes */
                padding-left: 50px;                
                padding-right: 50px;
/*                padding-bottom: 200px;                */
            }
        }