tv.css

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow: hidden;

}

.message-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column; /* Stack messages vertically */
    padding-top: 6rem; /* Create space for the text box */
}

.text-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 3rem;  /* Unified text size */
    color: orangered;
    text-align: center;
    background-color: #000; /* Match the background color */
    padding: 1rem 0;  /* Space around the text box */
    border-bottom: 2px solid #fff; /* Optional: Add a bottom border for separation */
    z-index: 100; /* Ensure the text box stays on top */
}

.message {
    font-size: 3rem;  /* Unified text size */
    opacity: 0;
    transition: opacity 2s ease-in-out;
    text-align: center;
    margin-bottom: 1rem;  /* Space between messages */
}

.message-list {
    margin-top: 1rem;
    padding-left: 0;
    text-align: center;
    list-style-type: none; /* Remove bullet points */
    width: 100%; /* Ensure list takes full width */
}

.message-list .message {
    list-style-type: none; /* No list item marker */
}

.message-list a {
    color: #00f; /* Blue color for the link */
    text-decoration: underline; /* Underline the link */
    font-weight: bold; /* Make the link text bold */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.message-list a:hover {
    color: #ff0; /* Change link color on hover */
}
.message img {
    display: inline-block;
    marigin: 0 auto;
    max-width: 100%;
    height: auto;
    border: 2px solid #fff;
    margin-top: 1rem;
}

.full-screen-image {
    width: 90vw;    /* Forces the image to take up the entire viewport width */
    height: 90vh;   /* Forces the image to take up the entire viewport height */
    object-fit: fill;
    border: 2px solid #fff;
    margin-top: 1rem;
}
.top-text-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 3rem;  /* Adjust size as needed */
    color: orangered;  /* Text color */
    text-align: center;
    background-color: #333; /* Background color */
    padding: 1rem 0;  /* Space around the text */
    z-index: 1000;  /* Ensure it stays on top */
    border-bottom: 2px solid orangered;
    align-items: center;
}
.top-box-image {
    position: fixed;
    left: 10px; /* Move image to the left edge with a little padding */
    top: 10px; /* Move image to the top edge with a little padding */

    max-height: 75px;  /* Adjust height as needed */
}