body {
    background-color: #ffffff; /* Dark background */
    color: #333333; /* White text */
    font-family: Arial, sans-serif; /* Font style */
}

header {
    background-color: #e91e63; /* Black header */
    padding: 20px;
    text-align: center;
}

header h1 {
    color: #ffffff; /* Red logo text */
}

nav a {
    color: #ffffff; /* Red link color */
    margin: 0 15px;
    text-decoration: none; /* Remove underline */
}

nav a:hover {
    text-decoration: underline; /* Underline on hover */
}

.container {
    padding: 20px;
    content: "";
    clear: both;
    display: table;
}

section {
    border: 2px solid #e91e63; /* Red borders for sections */
    border-radius: 10px; /* Rounded corners */
    margin: 20px 0;
    padding: 15px;
    background-color: #f6f6f6; /* Darker background for sections */
}

h2 {
    color: #e91e63; /* Red headings */
}

.review-button {
    background-color: #e91e63; /* Red button background */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding for button */
    cursor: pointer;
    font-size: 1em; /* Button font size */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow for button */
    transition: background-color 0.3s; /* Smooth transition */
}

.review-button:hover {
    background-color: #d40000; /* Darker red on hover */
}

.share-button {
    background-color: #ff0000; /* Red background */
    color: white; /* White text */
    border: none;
    border-radius: 50%; /* Round shape */
    width: 50px; /* Width of the button */
    height: 50px; /* Height of the button */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Slight shadow */
    font-size: 24px; /* Adjust icon size */
}

.share-button:hover {
    background-color: #d40000; /* Darker red on hover */
}


footer {
    background-color: #000000; /* Black footer */
    text-align: center;
    padding: 15px;
    color: #ffffff; /* Red text */
}

.tabs {width: 100%;
    float: left;}

.tab {
            display: flex;
            cursor: pointer;
            padding: 5px;
            background-color: #2a2a2a;
            border: 1px solid #ff0000;
            color: #ffcc00;
            margin: 1%;
            border-radius: 5px;
            width: 25%;
            float: left;
        }
        .tab.active {
            background-color: #e91e63;
            color: #ffffff;
        }
        .scoreboard {
            display: none; /* Hide all scoreboards by default */
            
            margin-top: 10px;
            
        }
        .scoreboard.active {
            display: block; /* Show active scoreboard */
        }
       
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            border: 2px solid #ff0000;
            padding: 5px;
            font-size: 24px;
            color: #ffffff;
            background-color: #333;
        }
        .slot-number {
            font-size: 18px;
            color: #ffcc00;
        }
        
      /* Base styles */
.sidebanner {
    margin: 2%;
    width: 26%;
    float: left; /* To allow side-by-side layout */
}

.rsidebanner {
    margin: 4%;
    width: 62%;
    float: left; /* To allow side-by-side layout */
}



/* Mobile styles */
@media (max-width: 768px) {
    .sidebanner {
        width: 96%; /* Full width on mobile */
        float: none; /* Remove float */
    }

    .rsidebanner {
        width: 93%; /* Full width on mobile */
        float: none; /* Remove float */
    }
}