*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 5em;
    font-family: 'Arial',sans-serif;
    background-color: #111;
    color: white;
    text-align: center;
    padding:3em;
    font-size: 1em;
    background: radial-gradient(circle at top, #1a1a1a , #000) ;
}

p{
    text-shadow: 0 0 10px #a8fffc;
    font-size: 300;
    margin: 2em 0 ;

}

button{
    background: linear-gradient(90deg, #ff0080 , #7928ca);
    background-color: #ff0080;
    border: none;
    padding: 1em 2em;
    margin: 0.7em;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 0.7em;
    transition: 0.3s ease;
    box-shadow: 0 0 10px #ff0080;
}
button:hover{
    background-color: #f937a8;
    transform: scale(1.1);
    box-shadow: 0 0 20px #ff0080, 0 0 40px #7928ca;
}

.scene{
    animation:fadeln 0.5s ease-in-out;
}
@keyframes fadeln {
    from{opacity: 0;}
    to{opacity: 1;}
}

h1{
    font-size:  2.5em;
    margin-bottom:  1em;
    text-shadow: 0 0 10px #ff0080, 0 0 20px #7928ca;
}

#progress-container{
    width: 100%;
    height: 1em;
    background-color: #222;
    border-radius: 2em;
    overflow: hidden;
    margin-bottom: 3em;
}

#progress-bar{
    background: linear-gradient(90deg,#ff0080,#00ffff);
    height: 100%;
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px #00ffff
}

#statsContainer {
  margin: 2em;
  padding: 1.5em;
}

.stats-display {
  font-size: 1.1em;
  text-shadow: 0 0 2px #00ffff;
}