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

body{
    background:#0f172a;
    color:white;
}

header{
    background:#111827;
    padding:20px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.4);
}

header h1{
    color:#38bdf8;
}

.container{
    width:95%;
    max-width:1200px;
    margin:auto;
    padding:20px;
}

.serie {
  background: #111827;
  border-radius: 20px;
  padding: 10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);
}

.botoesSerie1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 10px;
}

.botoesSerie2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 10px;
}

.botoesSerie3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 10px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #38bdf8;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

button:hover {
    background: #38bdf8;
    transform: scale(1.03);
  }
  
@keyframs fadeIn {
  from { opacity: 0; transform: translatY(10px); }
  to { opacity: 1; transform: translatY(0); }
}

@media (max-width: 500px) {
  .botoes { grid-template-columns: 1fx; }
}