@font-face {
      font-family: 'Datatype'; 
      src: url('Datatype_ExtraExpanded-Regular.ttf') format('truetype');
    }
    
         @font-face {
      font-family: 'Futura'; 
      src: url('Futura Bold.otf') format('opentype');
    }
    
    html {
     margin: 0px;
     padding: 0 50px;
     height: 95vh;
     font-family: Datatype;
     background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(43, 43, 43, 1) 31%, rgba(79, 79, 79, 1) 40%, rgba(158, 158, 158, 1) 50%, rgba(79, 79, 79, 1) 60%, rgba(43, 43, 43, 1) 70%, rgba(0, 0, 0, 1) 100%);
    }
    
body {
   margin: 30px;
 display: flex;
  justify-content: center;
  align-items: center;
flex-wrap: nowrap;
background: #121212;
background: linear-gradient(0deg, rgba(18, 18, 18, 1) 35%, rgba(230, 84, 16, 1) 40%, rgba(230, 84, 16, 1) 46%, rgba(255, 168, 128, 1) 50%, rgba(230, 84, 16, 1) 55%, rgba(230, 84, 16, 1) 60%, rgba(18, 18, 18, 1) 65%);
background-repeat: none;
background-size: cover;
height: 90%;
flex-direction: column;

}

    .home-page {
  
    }
    
    .characters-page {
  max-height: 100%;
  overflow-y: auto;    
  box-shadow: 0 0 10px inset #e1aa20;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
    
    
    }
    
   .card-outer:has(.title-card) {
     width: 90%; 
     .card {
      padding: 10px 120px; 
     }
     a {
      color: orange; 
     }
     
    }
    .container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
   justify-content: center;
     width: 40%;
    }
    
   a:has(.section) {
      border-radius: 2px;
      width: 49%;
      height: 90px;
       box-sizing: border-box;
      background-color: orange;
      border: 1px solid black;
      box-shadow: 0 0 20px darkorange;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 10px;
      background: #e65410;
background: linear-gradient(0deg, rgba(230, 84, 16, 1) 0%, rgba(230, 84, 16, 1) 25%, rgba(255, 168, 128, 1) 50%, rgba(230, 84, 16, 1) 75%, rgba(230, 84, 16, 1) 100%);
text-decoration: none;
      transition: 0.5s ease;
      color: black;
           font-size: 1.4em;

     }
     
     
   a:has(.section):hover {
      color: black;
      background: rgba(255,255,255,0.4);
      transition: 0.5s ease;
     }
    
    h1  {
           background-image: linear-gradient(180deg,rgba(133, 165, 214, 1) 0%, rgba(222, 246, 255, 1) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
 font-family: Futura;
     position: absolute; 
     margin-bottom: 200px;
          font-size: 1.4em;

    }
    
        .card {
     border: 1px solid white;
     border-radius: 10px;
     font-family: Datatype;
     background-color: black;
     color: white;
     width: 100%;
     padding: 10px 25px;
     max-height: 30vh;
     overflow-y: scroll;
     box-shadow: 0 0 10px orange;
     display: flex;
     flex-direction: row;
     margin: 5px;
    }
    
    .cards-body {
      display: flex;
     flex-direction: row;  
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: center;    
}

    
  .card-outer {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 45%;
   max-height: 70%;
  }

  
    .card-column:nth-child(odd) {
   width: 70%; 
  }
  
  
  .card-column:nth-child(even) {
   width: 30%; 
  }
  
  
    h2 {
     font-family: Datatype; 
     font-weight: bold;
    }
    img {
     box-shadow:0 0 10px white; 
  
    }