body {            
  background-color: #8385a2;
 }
.headpicture::before {
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-color: rgb(27 22 22 / 41%); 
  pointer-events: none;
  z-index:1;
}
.headpicture::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25%; 
  background: linear-gradient(to top, 
    rgb(42 49 65 / 90%),
    rgba(15, 23, 42, 0.6), 
    transparent
  );
  pointer-events: none; 
  z-index:2;
}
.headpicture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: relative;
  margin-bottom: 3rem;
}

.headpicture {    
  display: block; 
  margin: 0 auto;
  overflow: hidden;
}

.character {  
    
  display: grid;  
 
  grid-template-columns: repeat(auto-fill, minmax(240px, 4fr));  
  row-gap: 2rem; 
  max-width: 1600px;   
  margin: 0 auto; 
  padding: 2rem 1rem;
}
.custom-card {
 
  width: 100%;  
  max-width: 300px;   
  background-color: rgb(187 183 198);
  border: 1px solid rgb(69 58 79 / 30%);   
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(126, 34, 206, 0.15);
  overflow: hidden; 
  transition: all 0.3s 
  ease;   
  margin-left: rem;
}


.title {
  color:#2b333b;
  margin-left:2rem;
  font-weight: 1000;
  font-size: 2rem;
}



.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 2.5rem; 
  max-width: 1400px; 
  margin: 2rem auto; 
  padding: 0 1rem; 
}


.character-card {
  display: flex; 
  align-items: flex-start; 
  background-color: rgb(221 231 244 / 80%); 
  backdrop-filter: blur(8px);
  border: 1px solid rgb(26 46 55 / 30%);
  border-radius: 1.25rem; 
  overflow: hidden;
  padding: 1.5rem;
  transition: all 0.3s ease; 
}


.character-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgb(38 72 92 / 30%);
  border-color: rgb(24 38 48 / 60%);
}


.character-img {
  width: 150px; 
  height: 150px;
  border-radius: 1rem; 
  object-fit: cover;
  margin-right: 1.25rem; 
  flex-shrink: 0;
  border: 2px solid rgb(39 56 74 / 76%); 
}


.character-info {
  flex: 1;
}


.character-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #39526b; 
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}


.character-card:hover .character-name {
  color: #496b8a;
}


.character-role {
  font-size: 0.9rem;
  color: rgb(87 112 141);
  margin-bottom: 1rem;
  font-weight: 500;
}


.character-desc {
  font-size: 0.95rem;
  color: #65748a; 
  line-height: 1.6;
}


@media (max-width: 767px) {
  .character-card {
    flex-direction: column;
    align-items: center; 
    text-align: center;
  }

  .character-img {
    margin-right: 0; 
    margin-bottom: 1rem;
    width: 150px;
    height: 150px;
  }
}



.IP-grid {   

  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));  
  gap: 2.5rem; 
  max-width: 1400px; 
  margin: 2rem auto; 
  padding: 0 1rem; 
}

.IP-card {  
  display: flex; 
  align-items: flex-start; 
  background-color: rgb(220 229 241 / 80%); 
  backdrop-filter: blur(8px);  
  border: 1px solid rgb(26 46 55 / 30%); 
  border-radius: 1rem;
  overflow: hidden;  
  padding: 1.5rem;  
  transition: all 0.3s 
  ease; 
}

.IP-card:hover {  
  transform: translateY(-6px);  
  box-shadow: 0 12px 28px rgb(63 108 134 / 30%);  
  border-color: rgb(93 66 120 / 60%);
}

.IP-img {  
  width: 150px;  
  height: 150px; 
  border-radius: 1rem; 
  object-fit: cover;   
  margin-right: 1.25rem; 
  flex-shrink: 0; 
  border: 2px solid rgb(27 41 54 / 64%); 
}

.IP-info {  
  flex: 1; 
}

.IP-name {  
  font-size: 2rem;  
  font-weight: 700;  
  color:  #1d3144; 
  margin-bottom: 0.5rem;  IP
  transition: color 0.3s ease;
}

.IP-card:hover .IP-name {  
  color: #425c73; 
}

.IP-role {  
  font-size: 0.9rem;  
  color: rgb(117 152 193);
  margin-bottom: 1rem;  
  font-weight: 500;
}

.IP-desc {  
  font-size: 0.95rem;  
  color: #535f70; 
  line-height: 1.6;
}

@media (max-width: 767px) {
  .IP-card {    
    flex-direction: column;    
    align-items: center;  
    text-align: center; 
  }
  .IP-img {    
    margin-right: 0; /   
    margin-bottom: 1rem;    
    width: 150px;    
    height: 150px;
  }
}