*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#f4f4f4;
  color:#111;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:0.4s;
}

.container{
  width:500px;
  background:white;
  padding:35px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 0 20px rgba(0,0,0,0.1);
}

h1{
  margin-bottom:25px;
  font-size:34px;
}

.counter-box{
  margin:20px 0;
}

#count{
  font-size:70px;
  color:#00aa66;
}

.buttons{
  margin-top:20px;
}

button{
  padding:12px 18px;
  margin:8px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
  transition:0.3s;
}

button:hover{
  transform:scale(1.05);
}

.history-box{
  margin-top:30px;
  text-align:left;
}

.history-box h3{
  margin-bottom:15px;
}

#history{
  list-style:none;
  max-height:200px;
  overflow-y:auto;
  padding:10px;
  border:1px solid #ddd;
  border-radius:10px;
}

#history li{
  padding:8px;
  border-bottom:1px solid #eee;
}

/* Dark Mode */

.dark{
  background:#111;
  color:white;
}

.dark .container{
  background:#222;
  color:white;
}

.dark #history{
  border:1px solid #444;
}

.dark #history li{
  border-bottom:1px solid #333;
}