/* My layout terminology:

        # A page is broken up into panel groups and they flow from top to bottom.
        # Each panel group consists of one or more panels.  The panels flow from left to right.
        # Each panel consists of one or more sections and those sections from from top to bottom.

    */

    body {background-color:ghostwhite;}
    .characterNameSection > h1 {margin-bottom: 2px;}
    .characterNameSection > h4 {margin-top: 2px; font-weight: normal; font-style: italic;margin-bottom: 2px;} 

    @media screen and (max-width: 600px) {
        .panelGroup {display: flex; flex-direction: column;}    
    }
    @media screen and (min-width: 1380px) {
        .panelGroup {display: flex;}    
    }
    .panelGroup {display: flex;}
    .attributePanel {width: 100px; border-right: 1px solid lightgray; padding-right: 10px;}
    .centerPanel {flex-grow: 1; row-gap: 10px; column-gap: 10px;}
    .centerLeftPanel {display: flex; flex-direction: column; flex-grow: 2; row-gap: 10px; column-gap: 10px; align-items: center; border-right: 1px solid lightgray;}
    .centerRightPanel {display: flex; flex-direction: column;  flex-grow: 1; row-gap: 10px; column-gap: 10px; align-items: center;}
    .rightPanel {width: 120px; padding-left: 10px; border-left: 1px solid lightgray;}

    .sectionTitle {font-size:large; text-align: center; width: 90%; background-color: wheat; border-radius: 15px; margin-bottom: 3px;}

    .attributeSection {display: flex; flex-direction: column; justify-content: space-between;}
    .attributeSection > div {display : flex; flex-direction: column; align-items: center} /* attribute */
    .attributeSection > div > div {width: 4em; ;} /* attribute label and value */
    .attributeSection > div > div:first-child {font-weight: bold; font-size: smaller; width: 4em; text-align: center;} /* attribute label */
    .attributeSection > div > input {text-align: center; width: 4em; margin-bottom: 10px; background-color:floralwhite; border-radius: 10px; font-size: larger; aspect-ratio: 1/1;display: flex; align-items: center; justify-content: center; border: 2px solid purple;} /*attribute value */
    .attributeSection > div > div:nth-child(2) {margin-bottom: 10px; background-color:floralwhite; border-radius: 10px; font-size: larger; aspect-ratio: 1/1;display: flex; align-items: center; justify-content: center; border: 2px solid purple; } /*attribute value */
       
    hr {border-color: lightgrey;}

    .dynamicStatShort {display : flex; flex-direction: column; align-items: center;}
    .dynamicStatShort > div {margin:0px;text-align: center; font-weight: bold; font-size: smaller; width: 6em;}
    .dynamicStatShort > input {text-align: center; width: 4em; margin-bottom: 10px; background-color:floralwhite; border-radius: 10px; font-size: larger; aspect-ratio: 1/1;display: flex; align-items: center; justify-content: center; border: 2px solid purple;}

    .dynamicTinyStatShort {display : flex; flex-direction: column; align-items: center;}
    .dynamicTinyStatShort > div {margin:0px;text-align: center; font-weight: bold; font-size: smaller; width: 3em;}
    .dynamicTinyStatShort > input {text-align: center; width: 2em; margin-bottom: 10px; background-color:floralwhite; border-radius: 10px; font-size: larger; aspect-ratio: 1/1;display: flex; align-items: center; justify-content: center; border: 2px solid purple;}


    .statusBox  {height:80px;border-radius: 5px; width: 90%; }
    .statusBox > textarea {height:90%; margin-right: 15px; width: 100%; border-radius: 5px;}

    .featureBlock {background-color: floralwhite; border-radius: 5px; padding: 1px 10px 3px 10px; margin-bottom: 16px;}
    #features {display: flex; flex-wrap: wrap; align-items: stretch;}
    #features > div {width: 30%; margin-right: 2%;}

    .weaponSection {display: flex; flex-direction: row; row-gap: 12px; column-gap: 12px; flex-wrap: wrap; width: 90%;} 
    .weaponCard {display: flex; flex-direction: column; border: solid 1px purple; background-color: floralwhite; width: 300px;  border-radius: 5px; padding: 0px 0px;}
    .weaponCard > div {font-size: small;}
    .weaponCard > div:first-child {text-align: center; border-bottom: solid 1px purple; font-size:small; } /* title */
    .weaponCard > div:nth-child(2) {display: flex; flex-direction: row;}
    .weaponCard > div:nth-child(2) > div {border-bottom: solid 1px purple; flex-grow:  1;text-align: center; }
    .weaponCard > div:nth-child(2) > div:first-child {border-right: solid 1px purple;}
    .weaponCard > div:nth-child(2) > div:last-child {border-left: solid 1px}
    .weaponCard > div:nth-child(2) > div::not(:first-child):not(:last-child) {border-left: solid 1px purple; border-right: solid 1px purple;}
    .weaponCard > div:nth-child(3) {text-align: center;}

    .keyValueSection {display: flex; row-gap: 7px; column-gap: 8px;margin: 3px; width: 90%; margin-bottom: 10px;flex-wrap: wrap;}
    .keyValueSection > div {display: flex; flex-direction: column; border: solid 1px purple; background-color: floralwhite; width: 120px; border-radius: 5px;}
    .keyValueSection > div > div:first-child {text-align: center; border-bottom: solid 1px purple; font-size:small; }
    .keyValueSection > div > div:nth-child(2) {text-align: center;}
    .keyValueSection > div > input {text-align: center; background-color: floralwhite; border: none; border-radius: 5px;}

    .mutableKeyValueSection {display: flex; row-gap: 7px; column-gap: 8px;margin: 3px; width: 90%; margin-bottom: 10px;flex-wrap: wrap;}
    .mutableKeyValueSection > div {display: flex; flex-direction: column; border: solid 1px purple; background-color: floralwhite; width: 120px; border-radius: 5px;}
    .mutableKeyValueSection > div > input:first-child {text-align: center; border-bottom: solid 1px purple; font-size:small; border-top: none; border-left: none; border-right: none;border-bottom: solid 1px purple;background-color: floralwhite; border-radius: 5px;}
    .mutableKeyValueSection > div > input:nth-child(2) {text-align: center; background-color: floralwhite; border: none; border-radius: 5px;}


    .listValueSection {display: flex; row-gap: 8px; column-gap: 8px; width: 90%; margin: 3px; flex-wrap: wrap;}
    .listValueSection > input {background-color: floralwhite; border: solid 1px purple; border-radius: 5px; font-size: small; padding: 5px; text-align: center; font-size: small;}


    .tooltip {position: relative;display: inline-block; }
    .tooltip .tooltiptext {visibility: hidden;background-color: black; width: 60px; color: #fff;text-align: center;padding: 5px 0;border-radius: 5px;position: absolute;z-index: 1; top: 5px; left:105%;}
    .tooltip:hover .tooltiptext {visibility: visible;}