/* classes.css */
html {
    font-size: 22px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h2 {
    color: brown;
}

h3 {
    color: rgb(204, 99, 18);
}

body {
    background-color: rgba(40, 40, 40, 0.9);
    color: black;
    /* The large body margins mean the viewport for .content-body-wrapper is already reduced. */
    /* If you want the scrollbar to appear for the whole body when it's too narrow for these margins + fixed content, */
    /* you might need to adjust where the fixed width is applied. */
    /* For now, let's assume the scrollbar appears for the .content-body-wrapper if the window gets too small for it. */
    margin-left: 200px;
    margin-right: 200px;
    padding: 20px; /* Unified padding for the body */
    text-align: justify;
    text-justify: inter-word;
    font-family: Roboto, tahoma, verdana, arial, sans-serif;
    /* Add overflow-x: auto; to the body if you want the entire body to scroll
       when the fixed-width content is too wide for the viewport minus body margins.
       However, it's usually better to have the scrollbar on the specific fixed-width container. */
}
p {
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
}

.content-body-wrapper {
    /* --- MODIFICATION FOR FIXED WIDTH --- */
    width: 90%; /* Example fixed width. Adjust this to your desired content width. */
                   /* This was previously width: 100%; */
   margin: 0 auto;

    /* Optional: if you want it to not shrink below this, but still be able to be wider
       if content pushes it (though with a fixed width this is less common)
    min-width: 1200px;
    width: auto; /* or a percentage if you want it to try and fill up to a max-width */

    background-color: #f0f0f0;
    padding: 15px;
    box-sizing: border-box;

    /* If the content-body-wrapper itself should get scrollbars when the viewport
       (within the body's margins) is narrower than 1200px: */
    overflow-x: auto; /* This will make this specific div scrollable if its content overflows */
                      /* Or, if you want the browser's main scrollbar (for the body/html)
                         to handle it, you might not need this here, depending on parent overflow settings. */
}

header {
    margin-bottom: 20px;
}

header table {
    font-size: medium;
    width: 100%; /* Table will be 100% of the fixed-width .content-body-wrapper */
}

/* .container is the flex parent inside .content-body-wrapper */
.container {
    /* This was already width: 100% in popup.css, which is correct.
       It means it will be 100% of the fixed-width .content-body-wrapper. */
    padding: 0 20px; /* Inner spacing for the flex container */
    box-sizing: border-box;
}

a {
    color: black;
}

a:visited {
    color: gray;
}

a:hover,
a:active {
    color: black;
}

b,
strong,
p span {
    font-weight: bold;
}

em {
    color: #ffae00 !important;
}

table,
tr,
th,
td,
caption {
    border: 1px solid black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    border-collapse: collapse;
    padding: 0.5rem;
    text-align: center;
    
}

.page-footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
    border-top: 1px solid #ccc;
}

.ability-detail.hidden-detail,
.ability-detail.sub-detail.hidden-detail {
    display: none;
}

.sr-only-detail { /* "sr" for screen-reader or "source-reference" only */
    display: none;
}