/* Reset，避免不同瀏覽器有預設 margin/padding */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 背景設定 + Flex 置中 */
body {
  background-image: url('/bgcolor/BG24.jpg');
  background-size: fill;     /* cover; 等比縮放填滿背景 */
  background-position: center;
  display: flex;
  justify-content: center;    /* 水平置中 */
  align-items: center;        /* 垂直置中 */
}

/* 內容區塊 */
.content {
  max-width: 850px;   /* 控制最大寬度（可調整或移除） */
  width: auto;        /* 隨內容寬度自動調整 */
  height: inherit;
  text-align: center; /* 內容文字置中（可依需求保留/刪掉） */
}

/*///////////////////////////////////////////////////////////////////////////*/

input {
    width: 80%;
    padding: 5px;
    border: 1px solid brown;
    margin-top: 2px;
    margin-bottom: 2px;
    box-sizing: border-box;
/*    position: relative; 
    z-index: 1;  設定比球低的值 
*/
}


button {
    width: 100%;
    background-color: lightgreen;
    font-size: 30px;
    border: none;
    margin-top: 20px;
    position: relative; 
    z-index: 1;  設定比球低的值 

}


#dot0, #dot1, #dot2, #dot3, #dot4, #dot5, #dot6 {
  transition: left 0.1s linear, top 0.1s linear;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  visibility: visible;
  position: absolute; /* 或 relative/fixed */
  z-index: 10;  設定比按鈕高的值 

}

#rule {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(208, 207, 207);
    padding: 20px;
    font-size: 18px;
    margin-top: 5px;
    display: none;
}

#rule h2 {
    text-align: center;
}

.invalid {
    color: red;
}

.valid {
    color: rgb(0, 171, 0);
}

.invalid:before {
    position: relative;
    left: -5px;
    content: "!";
}

.valid:before {
    position: relative;
    left: -5px;
    content: "\2713";
}

/*///////////////////////////////////////////////////////////////////////////*/
/*  font-family: Arial Black;*/
/*停用***第一版***************

.highlight-text {
  font-family: 標楷體;
  font-size: 12px;
  color: lightgrey;
  cursor: default;
  display: inline-block;
  transition: color 0.3s ease, text-shadow 0.3s ease, font-size 0.3s ease;
}

.highlight-text:hover {
  font-size: 24px;
  color: blue;
  text-shadow: 2px 2px 5px gray;
}
*/

/*////使用版///////////////////////////////////////////////////////////////////////*/
.highlight-text {
  font-family: 標楷體;
  font-size: 14px;
  color: lightgrey;
  cursor: default;
  display: inline-block;
  transition: font-size 0.6s ease, color 0.6s ease, text-shadow 0.6s ease;
}

/* 滑鼠移到 → 立刻放大 */
.highlight-text:hover {
  font-size: 24px;
  color: blue;
  text-shadow: 2px 2px 5px gray;
  transition-delay: 0s; /* 進入時立即作用 */
}

/* 滑鼠移開 → 延遲 2 秒再縮回 */
.highlight-text:not(:hover) {
  transition-delay: 2s; /* 移開後延遲 2 秒才開始還原 */
}

/*///////////////////////////////////////////////////////////////////////////*/
/* 
  html, body {
    height: 100%;
    margin: 2px 38px;
  }
*/

/* 電腦用樣式 */
@media screen and (min-width: 1024px) {
  html, body {
    height: 100%;
    margin: 2px 120px;
  }
}

/* 手機用樣式 */
@media screen and (max-width: 767px) {
  html, body {
    height: 100%;
    margin: 2px 38px;
  }
}
/*///////////////////////////////////////////////////////////////////////////*/
.circle {
  width: 100px; /* 設置圖片框的寬度 */
  height: 100px; /* 設置圖片框的高度 */
  border-radius: 50%; /* 將邊框半徑設置為50%，使其呈現圓形 */
  overflow: hidden; /* 裁剪圖片以適應圓形邊框 */
  background-color:red; /* 指定圓形圖框的背景顏色 */
  }

.circle img {
  width: 99%; /* 圖片寬度填滿圓形邊框 */
  height: 99%; /* 圖片高度填滿圓形邊框 */
  object-fit: cover; /* 根據需要裁剪和縮放圖片 */
}