* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: Arial, sans-serif;
        background-color: #1e1e2f;
        color: #f0f0f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
      }
      
      /* Header */
      header {
        margin-top: 30px;
        width: 100%;
        padding: 10px 0;
        text-align: center;
      }
      
      header h1 {
        color: #f0e6fa;
        font-size: 2em;
      }
      
      /* Main layout */
      main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      
      /* Each section (page) styled for 11in x 17in */
      .page {
        width: 11in;
        height: auto;
        padding: 20px;
        background-color: #2b2b3d;
        border-radius: 10px;
        margin: 20px 0;
        color: #f0e6fa;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      
      .page h2 {
        font-size: 1.5em;
        text-align: center;
        margin-bottom: 10px;
      }
      
      /* Health stats circles */
    /* Health stats circles */
    .health-stats {
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-bottom: 10px;
      }
      
      .health-stats .circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1e1e2f;
      }
      
      /* Filled circles with rainbow pastel colors */
      #health1 { background-color: #ffd1d1; } /* Light Pink */
      #health2 { background-color: #ffe5d1; } /* Light Peach */
      #health3 { background-color: #fff8d1; } /* Light Yellow */
      #health4 { background-color: #d1ffd8; } /* Light Green */
      #health5 { background-color: #d1ffff; } /* Light Cyan */
      #health6 { background-color: #d1e8ff; } /* Light Blue */
      #health7 { background-color: #d1d1ff; } /* Light Lavender */
      #health8 { background-color: #eed1ff; } /* Light Purple */
      #health9 { background-color: #ffd1e8; } /* Light Pinkish-Red */
      #health10 { background-color: #ffccd1; } /* Light Coral */
      #health11 { background-color: #d1ffd8; } /* Light Coral */
      #health12 { background-color: #d1e8ff; } /* Light Coral */
      #health13 { background-color: #ffe5d1; } /* Light Coral */
      #health14 { background-color: #eed1ff; } /* Light Coral */
      
      .health-stats .circle.empty {
        background-color: #1e1e2f; /* Dark background for empty circles */
      }
      
      .health-note {
        text-align: center;
        font-size: 0.9em;
        color: #f0e6fa;
        margin-bottom: 20px;
      }
      
      /* Content row */
      .content-row {
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
      }
      
      .face-claim-wrapper {
        width: 380px;
        height: 380px; /* height of the cropped visible area */
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
        position: relative;
      }
      
      .face-claim {
        width: 380px;
        height: 380px; /* now it’s a perfect square */
        object-fit: cover;
        object-position: center top; /* or adjust like center 20% or center 30% */
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
        transition: transform 0.4s ease-in-out; /* smooth zoom transition */
      }
      
      /* Hover zoom effect */
      .face-claim-wrapper:hover .face-claim {
        transform: scale(1.1); /* zoom in slightly */
      }
      
      
      /* Stats card layout */
      .stats-card {
        background-color: #1e1e2f;
        border-radius: 10px;
        padding: 15px;
        color: #f0e6fa;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
      }
      
      /* Stats list */
      .stats-card ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
      }
      
      /* Stat items */
      .stats-card .stat {
        flex: 0 0 auto;
        padding: 10px 15px;
        font-weight: bold;
        color: #f0e6fa; /* Light text color */
        background-color: #33334d; /* Consistent dark background */
        border-radius: 5px;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
      }
      
      /* Specific pastel text colors for each stat */
      .stats-card .endurance { color: #ffd1d1; }
      .stats-card .agility { color: #d1ffd8; }
      .stats-card .perception { color: #d1e8ff; }
      .stats-card .first-aid { color: #ffe5d1; }
      .stats-card .charisma { color: #eed1ff; }
      .stats-card .marksmanship { color: #d1bfff; }
      .stats-card .stealth { color: #d1ffff; }
      .stats-card .speed { color: #d1ffec; }
      .stats-card .intelligence { color: #ffd1ff; }
      .stats-card .strength { color: #ffd1d1; }
      .stats-card .luck{ color: #d1ffd8; }
      
      /* Perk card */
      .perkcard {
        background-color: #1e1e2f;
        border-radius: 10px;
        padding: 15px;
        color: #f0e6fa;
      }
      
      .perkcard h2 {
        font-size: 1.2em;
        color: #ffd1d1;
        margin-bottom: 10px;
      }
      
      .perkcard p {
        line-height: 1.5em;
        font-size: 1.2em;
      }
      
      
      /* Infographic Card */
      .infographic-card {
        width: 100%;
        background-color: #2b2b3d;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: space-around;
      }
    
      .infographic-explaination {
        width: 100%;
        background-color: #1e1e2f;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
      }
    
      .infographic-explaination p {
        font-size: 1.3em;
        line-height: 1.7em;
      }
    
      .infographic-explaination h2 {
        color: #ffd1d1;
      }
      
      .info-section {
        flex: 1;
        background-color: #1e1e2f;
        border-radius: 10px;
        padding: 15px;
        color: #f0e6fa;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
      }
      
      .info-section h3 {
        font-size: 2.5em;
        color: #ffd1d1;
        margin-bottom: 20px;
      }
      
      .info-section h4 {
        font-size: 1.2em;
        color: #d1e8ff;
        margin-bottom: 10px;
      }
      
      .info-section p {
        font-size: 1em;
        color: #f0e6fa;
        line-height: 1.5;
      }