body {
  font-family: Arial;
  background: #0f172a;
  color: white;

  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  height: 100vh;             /* full screen height */
  margin: 0;
}


.container {
  width: 420px;
  padding: 25px;
  background: #020617;
  border-radius: 20px;
  transform: rotate(-1deg); /* slight tilt */
}

li {
  transition: 0.2s;
}

li:hover {
  transform: translateX(5px);
  background: #334155;
}
/* .container:hover {
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
  transition: 0.3s;
} */

h1 {
  color: #38bdf8;
}

.stats p {
  margin: 5px;
}

.xp-bar {
  width: 100%;
  height: 20px;
  background: #1e293b;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0;
}

#xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #22c55e, #4ade80);
  transition: 0.5s;
}

.input-section {
  margin: 15px 0;
}

input {
  padding: 8px;
  width: 70%;
}

button {
  padding: 8px;
  background: #22c55e;
  border: none;
  cursor: pointer;
}

li {
  background: #1e293b;
  margin: 5px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
}