/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Body and main container */
    body {
      font-family: 'Courier New', monospace;
      background-color: #fdfdfd;
      color: #222;
      margin: 0;
      padding: 0;
    }

    /* Classic wide margins for entire site */
    .page-container {
      max-width: 1000px;
      margin: 40px auto;
      padding: 0 30px;
    }

    /* Top rectangular header */
    .top-header {
      height: 180px;
      background: url('/header.jpg') center/cover no-repeat;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .top-header h1 {
      font-family: 'Comic Sans MS', cursive;
      font-size: 2.5em;
      background-color: rgba(255,255,255,0.7);
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin: 0;
    }

    /* Sidebar + main content layout */
    .content-wrapper {
      display: flex;
      align-items: flex-start;
    }

    /* Sidebar navigation */
    .sidebar {
      width: 180px;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding-top: 20px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%; /* full viewport height */
      position: sticky;
      top: 0;
    }

    .sidebar a {
      display: block;
      text-decoration: none;
      color: #222;
      padding: 12px 15px;
      margin: 5px 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
      transition: background-color 0.2s;
      background-color: #f5f5f5;
    }

    .sidebar a:hover {
      background-color: #e0e0e0;
    }

    /* Main content area */
    .main-content {
      margin-left: 30px;
      flex: 1;
    }

    /* Sections with top border heading */
    .section {
      border-top: 2px solid #333;
      padding: 25px 20px 20px 20px;
      margin-bottom: 30px;
      position: relative;
      border-radius: 4px;
      background-color: #fafafa;
    }

    .section h2 {
      position: absolute;
      top: -14px;
      left: 20px;
      background-color: #fafafa;
      padding: 0 10px;
      font-size: 1.5em;
      margin: 0;
    }

    /* Character grid inside section */
    .character-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 20px;
      margin-top: 20px;
    }
    
    .character-card {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .character-box {
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 10px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: 200px;
      box-sizing: border-box;
    }

    .character-box.empty {
      background-color: #f5f5f5;
      border: 1px dashed #ccc;
    }

    .character-box img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 10px;
    }

    .char-info {
      text-align: center;
    }

    .char-name {
      font-weight: bold;
      font-size: 1em;
      margin-bottom: 4px;
    }

    .char-age {
      font-size: 0.9em;
      color: #555;
    }
    
    

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .content-wrapper {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
      }

      .main-content {
        margin-left: 0;
      }

      .character-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .character-grid {
        grid-template-columns: 1fr;
      }
    }