body {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*
    justify-content: center;
    */
    height: 100vh;
    margin: 0;
    /*background-color: rgb(202, 228, 219);*/
    background-color: rgb(168, 240, 217);
}

div {
    margin-top: 5px;
    margin-bottom: 5px;
}

table {
    border: 0px solid rgb(255, 255, 255);
    text-align: left;
    width: 60%;
}

.titleClass {
    text-align: center; /* Center the content within the table cells */
    font-size: 24px;
    font-weight: bold;
}

.middleTD {
    text-align: center; /* Center the content within the table cells */
}

#chitxtID {
    font-size: 36px;
    font-weight: bold;
    /*color: rgba(37, 37, 219, 0.866);*/
    color: #0055cc;
}

.leftTD {
    text-align: left; /* Center the content within the table cells */
    font-size: 20px;
}

td {
    padding: 8px;
}

#searchForm {
    text-align: center;
}

h1 {
    text-align: center;
}

/* CSS code to make the hidden input field invisible */
.invisibleClass {
    display: none;
}

/* Set the maximum height of the picture to 30px */
#picID img {
    /*max-height: 120px;*/
    max-width: 1000px;
}

/* Style for character rows */
.characterRow {
    display: flex;
    flex-wrap: wrap;
}

/* Add space between characters */
.charLinkWrapper {
    margin-right: 5px; /* Adjust the space as needed */
}

.searchForm {
    padding:15px 20px;
}
/* Add space between characters Adjust the space as needed */
/* 舊的資料
.charLinkWrapper {
    margin-right: 5px;
}
*/
/* Style the container div */
/*
.characterLinksContainer {
    margin-top: 10px;
}
*/

/* ===== 練習寫漢字（米字格） ===== */
/* ===== 練習寫漢字（米字格） - 更清晰的版本 ===== */
.practiceSection{
  width: 60%;
  text-align: center;
  margin-top: 10px;
}

.practiceGrid{
  width: 340px;
  height: 340px;
  margin: 10px auto;
  position: relative;
  border: 2px solid rgba(0,0,0,0.25);
  border-radius: 10px;
  
  /* 米字格背景 */
  background:
    /* 垂直線 */
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(0,0,0,0.25) calc(50% - 0.5px), rgba(0,0,0,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    /* 水平線 */
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(0,0,0,0.25) calc(50% - 0.5px), rgba(0,0,0,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    /* 左上到右下對角線 */
    linear-gradient(45deg, transparent calc(50% - 0.5px), rgba(0,0,0,0.25) calc(50% - 0.5px), rgba(0,0,0,0.12) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    /* 右上到左下對角線 */
    linear-gradient(-45deg, transparent calc(50% - 0.5px), rgba(0,0,0,0.25) calc(50% - 0.5px), rgba(0,0,0,0.12) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Hanzi Writer 會塞 SVG 進來，這裡讓它置中 */
#practiceTarget{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.strokeMsg{
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  min-height: 22px;
  font-size: 18px;
}

.strokeMsg.isError{
  color: #b00020;   /* 錯誤紅 */
  font-weight: bold;
}

.practiceButtons{
  margin-top: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.practiceButtons button{
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
}