/* Base Styles */  
body {  
    font-family: 'Arial', sans-serif;  
    margin: 0;  
    padding: 0;  
    background-color: darkgray;  
    color: #333;  
    overflow-x: hidden; /* Fix overflow issue */  
}  
  
/* Floating effect */  
@keyframes floatUp {  
    0% { transform: translateY(100vh); opacity: 0; }  
    50% { opacity: 0.7; }  
    100% { transform: translateY(-10vh); opacity: 0; }  
}  
  
/* Side-to-side swaying effect */  
@keyframes sway {  
    0% { transform: translateX(-30px); }  
    100% { transform: translateX(30px); }  
}  
  
/* Existing styles */  
header {  
    background-color: gray;  
    color: #fff;  
    text-align: center;  
    padding: 30px 20px;  
    position: relative;  
    z-index: 2;  
    margin-top: 58px;  
}  
  
header h1 {  
    font-size: 2.5em;  
    margin: 0;  
    animation: simpleFade 0.8s ease-in-out;  
}  
  
header p {  
    font-size: 1.2em;  
    color: darkgray;  
    margin: 10px 0 0;  
    animation: simpleFade 1.4s ease-in-out;  
}  
  
/* Navbar */  
nav {  
    background-color: blue;  
    display: flex;  
    overflow-x: auto;  
    justify-content: space-around;  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    z-index: 1000;  
    padding: 10px 0;  
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);  
}  
  
nav a {  
    color: lightgray;  
    padding: 10px 15px;  
    text-decoration: none;  
    text-transform: uppercase;  
    font-weight: bold;  
    transition: color 0.3s ease, background-color 0.3s ease;  
}  
  
nav a:hover {  
    background-color: #fff;  
    color: blue;  
}  
  
/* Timer Display */  
#timer {  
    background-color: gray;  
    display: block;  
    color: black;  
    font-size: 18px;  
    padding: 10px;  
    text-align: center;  
    font-weight: bold;  
    position: sticky;  
    top: 50px;  
    z-index: 10;  
}  
  
/* Content Sections */  
.content {  
    display: flex;  
    flex-direction: column;  
    padding-top: 80px;  
}  
  
.section {  
    flex: 0 0 auto;  
    padding: 40px 20px;  
    box-sizing: border-box;  
    opacity: 0;  
    animation: fadeInContent 0.6s ease-in-out forwards;  
}  
  
.section h2 {  
    color: #00509e;  
    margin-bottom: 20px;  
    text-align: center;  
}  
  
/* Player Box Styles */  
.player {  
    background: rgba(64, 64, 64, 0.3);  
    backdrop-filter: (10px);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    border-radius: 16px;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    padding: 20px;  
    text-align: center;  
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;  
    cursor: pointer;  
    position: relative;  
    overflow: hidden;  
    margin-bottom: 20px;  
    color: #fff;  
}  
  
/* Hover Effect for Player Box */  
.player:hover {  
    transform: scale(1.02);  
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);  
    background: rgba(64, 60, 64, 0.8);  
}  
  
/* Toggle Button Styles */  
.toggle-stats {  
    background-color: #4CAF50; /* Green background */  
    color: white; /* White text */  
    border: none;  
    padding: 5px 10px;  
    cursor: pointer;  
    margin-top: 10px;  
    border-radius: 4px;  
    transition: background-color 0.3s ease;  
}  
  
.toggle-stats:hover {  
    background-color: #45a049; /* Darker green on hover */  
}  
  
/* Stats Box Styles */  
.stats {  
    max-height: 0;  
    opacity: 0;  
    overflow: hidden;  
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;  
    background-color: rgba(0, 0, 0, 0.3);  
    border-radius: 8px;  
    margin-top: 10px;  
    padding: 0 10px;  
    color: #fff;  
}  
  
/* Stats Visible State */  
.stats-visible {  
    max-height: 200px; /* Adjust based on content */  
    opacity: 1;  
    padding: 10px; /* Add padding when visible */  
}  
  
/* Scoreboard */  
.scoreboard {  
    background: rgba(255, 245, 250, 0.3);  
    padding: 20px;  
    width:100%;
    border-radius: 8px;  
    border: 1px solid #ddd;  
    margin-bottom: 20px;  
    opacity: 0;  
    animation: fadeInScoreboard 1s ease-in-out forwards;  
}  
  
@keyframes fadeInScoreboard {  
    from {  
        opacity: 0;  
        transform: translateY(20px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
  
.scoreboard table {  
    width: 100%;  
    border-collapse: collapse;  
    color: red;  
}  
  
.scoreboard th, .scoreboard td {  
    padding: 3px;  
    border: 1px solid black;  
}  
  
.scoreboard th {  
    background-color: lightblue;  
    color: black;  
}  
  
footer {  
    text-align: center;  
    background-color: #00509e;  
    color: white;  
    padding: 20px;  
}  
  
/* Subtle Animations */  
@keyframes simpleFade {  
    from { opacity: 0; }  
    to { opacity: 1; }  
}  
  
@keyframes fadeInContent {  
    from { opacity: 0; }  
    to { opacity: 1; }  
}