body{
  font-family: Arial;
  margin:0;background:#0e1117;color:white;
}

header{
  text-align:center;
  padding:25px;
  background:#111827;
  box-shadow:0 2px 10px black;
}

nav{
  display:flex;
  gap:5px;
  padding:10px;
  background:#1f2937;
}
nav button{
  flex:1;
  padding:10px;
  background:#374151;
  border:none;
  color:white;
  cursor:pointer;
}
nav button:hover{
  background:#4b5563;
}

main{
  padding:20px;
}

.hidden{
  display:none;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:10px;
}

.card{
  background:#1f2937;
  padding:20px;
  border-radius:10px;
  text-align:center;
}

input, button{
  padding:10px;
  margin:5px 0;
  border:none;
  border-radius:5px;
}

ul{
  list-style:none;
  padding:0;
}
li{
  background:#1f2937;
  padding:10px;
  margin-top:5px;
  border-radius:8px;
  display:flex;
  justify-content:space-between;
}

footer{
  text-align:center;
  padding:10px;
  background:#111827;
  margin-top:20px;
}