body {
    font-size: 20px;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 10px; /* Adjust margin as needed */
}

.left-div {
    width: 200px;
    background-color: #FF0000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 4px solid green;
}

.left-div img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.right-divs {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px; /* Add gap between right-divs */
}

.right-div {
    overflow: visible;
    box-sizing: border-box;
    
}

.right-div.top {
    background-color: #FF0000;
    flex: 1;
    
        
}

.social-icon {
  display: innline-block;
  align-items: center;  /* Vertically centers the content */
   
}

.right-div.top a {
  display: inline-block;
  margin-right: 10px;
  margin-top: 3px;
  padding: 0;
  float: right;
  
}

.right-div.bottom {
    background: linear-gradient(90deg, #FF0000, #FFFFFF);
    flex: 3;
    position: relative;
    padding-top: 5px;
    overflow: visible;
    
}

.right-div.bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, green, white, #FF0000);
    z-index: 1;
}

.bottom-right-image {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 190px; /* adjust as needed */
    height: auto;
}

@media (max-width: 768px) {
    .bottom-right-image {
        display: none;
    }
}

/* Hide on mobile landscape */
@media (max-width: 1024px) and (orientation: landscape) {
    .bottom-right-image {
        display: none;
    }
}

.bottom-header {
    color: white;
    font-size: 1.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}

.bottom-text {
    color: black;
    font-size: 1.0em;
    font-weight: bold;
    text-align: left;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.navbar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.0);
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'Oswald', sans-serif;
    z-index: 1000;
}

.navbar a, .dropdown-btn {
    text-decoration: none;
    color: black;
    padding: 10px;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 4px solid transparent;
    transition: border-bottom 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.navbar a:hover, .dropdown-btn:hover {
    border-bottom: 4px solid #FFEB3B; /* Bright yellow */
    color: #FFEB3B; /* Yellow text color */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); /* Maintain text shadow */
}

.dropdown {
    position: relative;
}

.dropdown-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background-color: #FFFFFF;
    color: #000000;
    padding: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* Larger shadow for better visibility */
    z-index: 1001;
    min-width: 160px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px); /* Add transform for smooth animation */
    font-size: 0.8em;
}

.dropdown-menu a {
    display: block;
    padding: 10px 15px;
    color: black;
    text-decoration: none;
    font-size: 0.9em;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease;
}

.dropdown-menu a:hover {
    color: #C60000;
    background-color: #F5F5F5;
    border-bottom: 2px solid #000000; /* Match border color with .left-div */
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 0; /* Adjust padding for mobile view */
    }

     .left-div {
        width: 100%;
        height: auto;
        border-bottom: none;
        padding: 15px; /* Increase padding for better spacing on mobile */
        
    }

    .right-divs {
        width: 100%;
    }

     .navbar {
        flex-direction: row;
        gap: 10px;
        padding: 15px;
        width: 100%;  /* Ensure navbar takes full width */
        position: relative;  /* Change from absolute to relative positioning */
        box-sizing: border-box;  /* Ensure padding and content fit within width */
        z-index: 1000;
    }

    .navbar a, .dropdown-btn {
        font-size: 0.6em;  /* Adjust font size for smaller screen */
        padding: 8px;    /* Decrease padding for better spacing */
        text-align: center; /* Ensure text aligns properly */
    }

    .dropdown-menu {
        min-width: 100%; /* Make dropdown fit full width */
    }

    .responsive-container {
        flex-direction: column;
          
    }

.responsive-div.middle {
        flex: 2.0;
        overflow-x: auto;  
    
}

    .responsive-div {
        margin-bottom: 0;
        flex: 1.0;
    }

    .footer {
        padding: 20px;
        font-size: 0.9em; /* Adjust font size for better readability on mobile */
    }
    
   iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

}

.responsive-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    text-align: center;
    
}

.responsive-div {
    background-color: #F9F9F9;
    border-radius: 10px;
    padding: 5px 10px;
    box-sizing: border-box;
    flex: 1.0;
    text-align: center;
    color: black;
    
}

.responsive-div.middle {
    background-color: #F9F9F9;
    flex: 2.0;
    
}

.responsive-div.betmiddle {
    background-color: #F9F9F9;
    flex: 2.5;
    
}

.leftrespcont {
    width: 100%;
    margin-bottom: 4px;
    text-align: center;

}

.title-box {
    font-size: 0.9em; /* Adjust font size for better readability on mobile */
    background-color: #C60000;
    padding: 5px 10px;
    margin: 0 0 10px 0;
    color: #F9F9F9;
    text-align: left;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.title-box::before {
    content: '';
    background-image: url('images/template/ballbullet.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
}

.footer {
    background-color: #222222;
    color: #F9F9F9;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    border-radius: 0;
    margin-top: 20px;
}

/* General styles for the link box */
.link-box {
    display: inline-block; /* Adjusts width to fit the text */
    padding: 5px 20px;    /* Adds some space inside the box */
    background-color: #222222; /* Background color */
    color: #ffffff;        /* Text color */
    text-decoration: none; /* Removes underline from the link */
    border: 2px solid #000000; /* Black border */
    border-radius: 5px;   /* Optional: adds rounded corners */
    font-family: Arial, sans-serif; /* Optional: sets the font */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition effect */
}

/* Hover effect */
.link-box:hover, .link-box:focus, .link-box:active {
    background-color: #FF0000; /* Red background */
    color: #ffffff; /* White text */
}


.newscontainer {
    padding: 0px;
     overflow-x: auto;
}

.row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px; /* Space between rows */
}

.divnews {
    font-size: 0.8em;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 5px; /* Margin around divs */
    text-align: left;
    padding-top: 5px; /* Add margin to the top of the content */
}

.wide {
    flex: 2; /* Wider div */
}

.row .divnews:not(.wide) {
    flex: 1; /* Normal width for other divs */
}

/* Responsive adjustments */

    .divnews {
        flex: 0 1 100%; /* Full width on smaller screens */
    }


.news-item {
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
       
        
}

.editor-info {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    font-weight: bold;
    padding: 10px 0px; 
}

.editor-thumbnail {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.timestamp {
    font-size: 0.9em;
    color: #777;
}

.newslink {
    font-size: 0.8em !important;
    font-weight: bold;
    color: #C60000 !important;
    text-decoration: none; /* Remove default underline */
    border-bottom: 1px dashed #000; /* Dashed underline */
    padding-bottom: 2px; /* Adjust spacing as needed */
}

.newslink:hover {
    color: #000000 !important;
    
    
}

.archiveslink {
    font-size: 0.6em !important;
    color: #000000 !important;
    text-decoration: none; /* Remove default underline */
    border-bottom: 1px dashed #000; /* Dashed underline */
    padding-bottom: 2px; /* Adjust spacing as needed */
}

.archiveslink:hover {
    color: #C60000 !important;
    
    
}


.hover-bubble {
    position: absolute; /* Position the bubble relative to the player name */
    text-align: left;
    font-size: 0.7em;
    width: 300px; /* Set a fixed width for uniformity */
    background-color: white; /* Background color */
    border: 1px solid #C60000; /* Border for the bubble */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding inside the bubble */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 1000; /* Ensure it appears above other elements */
    display: none; /* Initially hidden */
}
.player-name {
    display: block; /* Ensure each name is treated as a block element */
    margin: 5px 0; /* Optional: Adds vertical spacing */
    line-height: 1.5; /* Optional: Adjusts line height for readability */
}