/*This container includes our table and our canvas.*/
.center-container{
    /*This property sets the width of our container.*/
    width: 60vw;
    /*This property centers our container.*/
    margin: 0 auto;
    /*50px down from the top.*/
    margin-top: 10vh;
}

table {
    /*This property collapses table border into 1 border.*/
    border-collapse: collapse;
    /*This hides outer borders on table.*/
    border-style: hidden;
}

td{
    /*This property changes the cursor to the index finger hand when
    we hover over td elements.*/
    cursor: pointer;
    /*This property sets our table border style.*/
    border: 4px solid rgb(213, 84, 79);
    /*This property removes default padding*/
    padding: 0px;
    width: 20vw;
    height: 20vh;
    filter: contrast(3);
}

canvas {
    /*This property sets the position of our canvas to the top left
    corner of our container.*/
    position: fixed;
    /*This property places our canvas over the top of our table.*/
    z-index: 10;
    /*This property makes our canvas invisible.*/
    pointer-events: none;
}

h1{
    text-align: center;
    font-size: 3vw;
    color: white;
}

#colosseum {
    position: fixed; /* This fixes the video to the page */
    margin-left: 10vw; /* This ensures no space between the bottom of the video and the bottom of the page */
    margin-top: 5vw;
    width: 70vw; /* This ensures the image is displayed across the full width of the page */
    height: 70vh; 
    z-index: -1;
    opacity: 75%;
    border: 2.5em solid red;
}

html {
    background-color: black;
}