body {
  background-color:#f9f9f9;
  font-family:'Afacad', sans-serif;
  font-size:20px;
  overflow:hidden;
  }
  
#cont {
  padding:30px;
  }
  
footer {
  font-size:15px;
  }
  
  @font-face {
  font-family: Afacad;
  src: url('https://kmjdk.neocities.org/Afacad-Regular.ttf') 
  format("truetype");
}


.character-profile {
  display: flex;            /* side-by-side layout */
  align-items: flex-start;  /* align top of columns */
  gap: 30px;                /* spacing between image+info and persona */
}

.left-column {
  flex: 0 0 300px;          /* fixed width for image+basic info */
  border: 1px solid black;
}

.profile-img {
  width: 300px;             /* image width */
  display: block;
  border-bottom:1px solid black;
  border-top:1px solid black;
}

.basic-info {
  padding: 15px;
  font-size: 17px;
}

.right-column {
  flex: 1;                  /* take remaining space */
}

.persona {
  text-align: justify;      /* optional, nicer text alignment */
}


.name-bar-container {
  text-align: center; /* center the inner name-bar */
}

.name-bar {
  display: inline-block;      /* shrink to text width */
  background-color: #121212;  /* dark highlight only */
  color: white;
  width: 100%; 
  padding: 10px 15px;          /* top/bottom and left/right padding */
  font-size: 25px;
  box-sizing: border-box;     /* padding included in width */
}