/* styles.css */

body {
    background-color: black;
    color: white;
    font-family: 'Calibri', sans-serif; /* Change the font family */
    text-align: center;
}

table {
    margin: auto;
    border-collapse: collapse; /* Collapse table borders */
    width: 80%; /* Set the width of the table */
}

th, td {
    border: 1px solid white; /* Add border to table cells */
    padding: 8px; /* Add padding to table cells */
}

#header img {
    width: 50%; /* Adjust the width of the image */
    max-width: 200px; /* Set a maximum width for the image */
}

#score {
    width: 25%; /* Width for desktop */
    display: inline-block; /* Display score section inline */
    vertical-align: top; /* Align score section to the top */
}

#video {
    width: 75%; /* Width for desktop */
    display: inline-block; /* Display video section inline */
    vertical-align: top; /* Align video section to the top */
    margin: 20px auto; /* Center the video horizontally */
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height/width) */
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 500px) {
    #player {
        width: 100%; /* Make the video player full width on smaller screens */
        height: auto; /* Allow the height to adjust according to the width */
    }
}