:root {
    /* various grey colors */
    --a-lighter: hsl(0,0%,75%);
    --a-light: hsl(0,0%,60%);
    --a-normal: hsl(0,0%,24%);
    --a-dark: hsl(0, 0%, 20%);

    /* creamy colors mostly for background */
    --b-lighter: hsl(36,13%,90%);
    --b-light: hsl(36,13%,80%);
    --b-normal: hsl(36,13%,77%);
    
    /* purplish color mostly for buttons */
    --c-lighter: hsl(339, 38%, 75%);
    --c-light: hsl(339, 38%, 54%);
    --c-normal: hsl(339, 38%, 44%);

    /* bluish green for buttons */
    --d-light:hsl(197, 36%, 90%); /* rgba(43, 68, 80, 0.3); */
    --d-normal: hsl(197, 36%, 25%); /* rgba(43, 68, 80, 1); */
    
    /* used as label background color of input groups */
    --bs-tertiary-bg: hsl(36,13%,77%);
}

html {
    overflow-y: scroll;  /* always show vertical scrollbar to prevent resize and thus flicker when loading a new ajax content */
}

body {
    color: var(--a-normal); 
    background-color: var(--b-lighter) !important;
    touch-action: pan-x pan-y; /* to prevent apple to reload the page on pull down gesture */  
}

html, body {
  overscroll-behavior-y: contain; /* to prevent apple to reload the page on pull down gesture */  
}

#content , footer {
    background-color: var(--b-lighter) !important;
}

.sticky-top {
    background-color: var(--b-lighter); 
    border-bottom: 2px solid var(--a-light); 
    z-index: 1000;
}

#header {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.c-button-group {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}


#content {
    padding: 20px;
    max-width: 700px;
    margin: 0 auto;
}
footer {
    text-align: center;
    padding: 20px;
    color: var(--a-lighter);
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--d-normal) !important;
}

/* BOOTSTRAP BUTTONS */
.btn-primary { 
background-color: var(--c-normal); 
border-color: var(--c-normal);
border-radius: 3px;
}
.btn-primary:visited { 
background-color: var(--c-normal); 
border-color: var(--c-normal);
}
.btn-primary:focus { 
background-color: var(--c-normal); 
border-color: var(--c-normal);
}
.btn-primary:hover { 
background-color: var(--c-normal); 
border-color: var(--c-normal);
}
.btn-primary:active {
background-color: var(--a-normal) !important; 
border-color: var(--a-normal) !important;    
color: #fff !important;            
}
.btn-secondary:hover { 
background-color: var(--a-light); 
border-color: var(--a-light); 
color: var(--b-lighter);
}

.btn-outline-primary {
border-radius: 3px !important;
border-color: var(--a-normal) !important;
color: var(--a-normal) !important;
}

.btn-check:checked + .btn {
    background-color: var(--c-normal) !important;
    border-color: var(--c-normal) !important;
    color: white !important;
}

/* toggle password button */
.btn-outline-secondary { 
color: var(--a-normal); 
border-color: var(--a-lighter);
background-color: var(--b-lighter);
border-left: none;
}
.btn.disabled , .btn:disabled {
background-color: var(--c-lighter) !important;
border-color: var(--c-lighter) !important;
opacity: 1 !important;
}
.btn-group {
    border-radius: 0px !important;
}

/* BOOTSTRAP CARD */
.card {
    margin-top:20px !important;
    margin-bottom: 10px !important;
}
.card-body {
    background-color: var(--d-light) !important;
}

img {
    max-width: 100%;
}

h2 {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* used in the Glossary */
h3 {
    font-size: 19px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 7px;
    color: var(--d-normal);
}

h4 {
    font-weight: 600;
    border-bottom: 2px dotted var(--c-normal);
    padding-bottom: 5px;;
}

h5 {
    font-size: inherit;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--d-normal);
}

h6 {
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 0px;
    color: var(--d-normal);
}
p {
    margin: 0px;
}
a {
  text-decoration:none;
  color: var(--c-normal);
  font-weight: 600;;
}
/* Override all link states to maintain the same color */
a:link,
a:visited,
a:active {
  color: var(--c-normal); /* same color for all states */
}
a:hover {
    opacity:0.8;
}
.c-back {

}

.c-a{
    background-color: var(--c-normal);
    padding: 2px 4px;;
    color: white;
}

.c-b{
    background-color: var(--d-normal);
    padding: 2px 4px;;
    color: white;
}

table {
    width: 100%;
    table-layout: fixed;
    
}
th {

    text-align: left;;
}

td {

    text-align: left;;
}

td .fa-regular{
    text-align: left;;
}

td .fa-solid{
    text-align: left;;
}

ul {
    padding-left: 18px;
    list-style-type: square;
    margin-top: 10px;
    margin-bottom: 10px;
}

ol {
    padding-left: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}

ol li::marker {
  font-weight: bold;
  color: var(--c-normal);
}


/* hints buttons */
.c-hints {
    background-color: #b58863;
    border-radius: 0px;
    border-color: #b58863
}

.c-hints:visited {
    background-color: #b58863;
    border-radius: 0px;
    border-color: #b58863
}

.c-hints:hover {
    background-color: #b58863;
    border-radius: 0px;
    border-color: #b58863
}
.c-hints:focus {
    background-color: #b58863;
    border-radius: 0px;
    border-color: #b58863
}
.c-hints:active {
    background-color: #b58863;
    border-radius: 0px;
    border-color: #b58863
}

.c-move-navigation {
    border-radius: 0px !important;
}

/* QUOTE CARDS START */
/* Chinese quote */
.c-quote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-left: 4px solid #ddd;
  background-color: #f9f9f9;
  margin-bottom: 5px;
  color: var(--d-normal);
}

/* English quote, chess player's English name, Chinese name, birtdate, death */
.c-quote > :nth-child(1) {
  font-size: 12px;
  color: #666;
  font-style: italic;
  line-height: 1.5;
}
/* QUOTE CARDS END */

.c-emp {
    color:  var(--c-normal);
}