body {
  background-image: url('../img/abertura.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

}


.containerAL {

  width: 80%;

  margin: 40px auto;

  min-height: 400px;


  display: flex;
  justify-content: center;

  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}


.al {
  display: flex;
 
  position: relative;
  height: auto;
  min-height: 400px;
  width: 200px;
  border: 8px solid #ccc;
  background: rgba(255, 255, 255, 0.85);

  gap: 15px;
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
  gap: 20px;
  color: #1a1a1a;
  padding: 15px;
}

.al-topo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.al-img {
  height: 50%;
  width: 50%;
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  flex-shrink: 0;
  border: 5px solid #b82626;
  background-color: #143377;


}

.nome-al {
  font-size: 17px;
  font-family: sans-serif;
  font-weight: bold;
  line-height: 1.2;
  word-break: break-word;
}

.al-conteudo {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

}

.al-conteudo p {

  font-size: 15px;
  line-height: 1.3;
}

.al-conteudo p span {
  font-weight: bold;
  color: #143377;

}
.desc-al{
  margin-top: 4px;
  font-size: 13px;
  font-style: italic;
  color: #555;
  line-height: 1.3;
  word-break: break-word;
}




/* --- Cores Personalizadas para a Classe 1-A --- */

#iida {
  border-color: #0b2545;
  /* Azul marinho fechado do seu traje blindado */
  box-shadow: 0 0 10px rgba(11, 37, 69, 0.3);
}

#asui {
  border-color: #2a7b4c;
  /* Verde sapo característico */
  box-shadow: 0 0 10px rgba(42, 123, 76, 0.3);
}

#ochako {
  border-color: #ffb3c6;
  /* Rosa pastel das bochechas e detalhes do traje de gravidade */
  box-shadow: 0 0 10px rgba(255, 179, 198, 0.5);
}

#todotoki {
  /* Um degradê meio a meio: Meio Fogo, Meio Gelo! */
  border-image: linear-gradient(to right, #e63946 50%, #a8dadc 50%) 1;
  border-radius: 0;

}

#kaminare {
  border-color: #ffd166;
  /* Amarelo elétrico vibrante */
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);
}

#jirou {
  border-color: #7209b7;
  /* Roxo escuro/Fúcsia puxado para o estilo Rocker dela */
  box-shadow: 0 0 10px rgba(114, 9, 183, 0.3);
}

#mina {
  border-color: #f72585;
  /* Rosa choque alienígena e vibrante */
  box-shadow: 0 0 10px rgba(247, 37, 133, 0.4);
}

#kirishima {
  border-color: #b7094c;
  /* Vermelho Red Riot, forte e endurecido */
  box-shadow: 0 0 10px rgba(183, 9, 76, 0.3);
}

#momo {
  border-color: #a30000;
  /* Vermelho carmim elegante do traje dela */
  box-shadow: 0 0 10px rgba(163, 0, 0, 0.3);
}

#toko {
  border-color: #1c1a27;
  /* Quase preto, a cor das trevas do Dark Shadow */
  box-shadow: 0 0 10px rgba(28, 26, 39, 0.5);
}

#hagakure {
  border-color: #e0f2fe;
  /* Azul ciano clarinho e semi-transparente para a invisibilidade */
  box-shadow: 0 0 10px rgba(224, 242, 254, 0.5);
}

#sato {
  border-color: #fb8500;
  /* Laranja/Amarelo do Sugar Rush */
  box-shadow: 0 0 10px rgba(251, 133, 0, 0.3);
}

#aoyama {
  border-color: #ffea00;
  /* Ouro brilhante e cintilante (Navel Laser!) */
  box-shadow: 0 0 15px rgba(255, 234, 0, 0.6);
}

#shouji {
  border-color: #64dfdf;
  /* Azul piscina/turquesa dos detalhes da máscara dele */
  box-shadow: 0 0 10px rgba(100, 223, 223, 0.3);
}

#sero {
  border-color: #8d99ae;
  /* Cinza claro fosco, lembrando a cor das fitas dele */
  box-shadow: 0 0 10px rgba(141, 153, 174, 0.3);
}

#koda {
  border-color: #e9c46a;
  /* Bege/Amarelo pastel suave que combina com a natureza */
  box-shadow: 0 0 10px rgba(233, 196, 106, 0.3);
}

#ojiro {
  border-color: #ccd5ae;
  /* Verde oliva bem claro, combinando com o uniforme de artes marciais */
  box-shadow: 0 0 10px rgba(204, 213, 174, 0.3);
}

#shinso {
  border-color: #480ca8;
  /* Roxo índigo profundo, misterioso como a lavagem cerebral */
  box-shadow: 0 0 10px rgba(72, 12, 168, 0.4);
}

@media screen and (max-width: 728px) {


  .containerAL {
    width: 95%;
    margin: 20px auto;
    justify-content: center;
    gap: 15px;
  }

  .al {
    width: 100%;
    max-width: 280px;
    height: auto;
    min-height: 250px;
  }

  .al-img {
    width: 150px;
    height: 150px;
    border-width: 4px;
  }
}



@media screen and (max-width: 600px) {

  .containerAL {
    width: 95%;
    gap: 10px;
    justify-content: center;
  }

  .al {


    width: 100%;
    max-width: 200px;
    height: auto;
    min-height: 300px;
    border-width: 4px;
    padding: 10px;
    border-radius: 12px;
  }

  .al-img {
    width: 100px;
    height: 100px;
    border-width: 2px;
  }

  .nome-al {
    font-size: 12px;
  }

  .al-conteudo p {
    font-size: 11px;
  }
  .desc-al{
    font-size: 10px;
    margin-top: 2px;
    line-height: 1.2;

  }

}