html, body {
  margin:0; height:100%; font-family:'Segoe UI',sans-serif;
  background:linear-gradient(to bottom,#dcdcdc,#000); color:#fff; display:flex; flex-direction:column;
}
table {
  width:80%; border-collapse:collapse; background:#111;
  border-radius:10px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.5);
}
th, td {padding:0.75rem; text-align:center; border-bottom:1px solid #333;}
th {background:#222; color:#00ffcc;}
td {color:#ccc;}
.points {color:#00ff90; font-weight:bold;}
header {background-color: #222; color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center;}
header h1 {margin: 0; font-size: 1.8rem;}
nav a {color: white; text-decoration: none; margin-left: 1.5rem; font-weight: bold;}
h2 {color: red;}
.dropdown {display: inline-block; position: relative;}
.dropdown-content {
  display: none; position: absolute; background-color: #1e1e1e;
  min-width: 160px; z-index: 1; border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.dropdown-content a {display: block; padding: 10px; color: white; text-decoration: none;}
.dropdown-content a:hover {background-color: #333;}
@media (max-width: 600px) {header h1 {font-size: 1.4rem;} nav a {margin-left: 1rem;}}
  .dropdown {
    display: inline-block;
    position: relative;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #1e1e1e;
    min-width: 160px;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }

  .dropdown-content a {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
  }

  .dropdown-content a:hover {
    background-color: #333;
  }