/* Body and general settings */
body {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    background-color: #f8f9fa;
    padding-top: 70px; /* Space for the fixed navbar */
    margin: 0;
    min-height: 100vh;
    align-items: center;
    align-content: center;
}

.scrollable-container {
    max-height: 700px; /* Adjust max-height as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 20px; /* Adds space for scrollbar */
}

/* Custom Scrollbar for Small Look */
.scrollable-container::-webkit-scrollbar {
    width: 1px;  /* Set the width of the scrollbar */
    height: 6px; /* If you also want a small horizontal scrollbar */
}

.scrollable-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Light gray color for the thumb */
    border-radius: 10px;     /* Rounded corners for the thumb */
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color on hover */
}

.scrollable-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light background for the track */
    border-radius: 10px;  /* Rounded corners for the track */
}



/* Navbar */
.navbar {
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Headings */
h1 {
    font-size: 2.5rem; /* Fallback for older browsers */
    font-size: calc(1.5rem + 1.5vw); /* Responsive size */
    color: #333;
    /* margin-bottom: 30px; */
    text-align: center;
}

h2 {
    font-size: 2rem; /* Fallback for older browsers */
    font-size: calc(1.3rem + 1.2vw); /* Responsive size */
    color: #333;
    /* margin-bottom: 20px; */
    text-align: center;
}

h5 {
    font-size: 1.5rem; /* Fallback for older browsers */
    font-size: calc(1rem + 0.5vw); /* Responsive size */
    color: #333;
    /* margin-bottom: 20px; */
    text-align: center;
}

.interuni-logo {
    width: 30%;
    height: 30%;
}

.wayoscope-logo {
    width: 25%;
  }

/* Match Summary */
.match-summary {
    background-color: #d6eaff;
    border-radius: 90px;
    padding: 10px;
    margin: 20px 0;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.team-logo {
    width: 150px;
}

.team-names {
    font-size: 1.5rem; /* Fallback */
    font-size: calc(.7rem + 0.5vw); /* Responsive */
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
}

.match-id{
    font-size: 1.5rem; /* Fallback */
    font-size: calc(.5rem + 0.4vw); /* Responsive */
    color: #2c3e50;
    text-align: center;
}

.score {
    font-size: 1.9rem; /* Fallback */
    font-weight: bold;
    color: #0b346e;
    font-family: 'Oxanium', sans-serif; /* Ensure quotes are correct */
    font-size: calc(0.9rem + 1.vw);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 1000;
}

.winner-text {
    font-size: 1.5rem; /* Fallback */
    font-size: calc(.7rem + 0.5vw); /* Responsive */
    font-weight: bold;
    color: #4caf50;
}

/* Footer */
.footer {
    background-color: #343a40;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: auto;
    width: 100%;
}

/* Style for LIVE text */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  .live-text {
    color: red;
    font-weight: bold;
    animation: blink 3s infinite;
    
  }