/*----------- fonts START --------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
/*----------- fonts END ---------------------*/

/*----------- Var START ---------------------*/
:root {
  --Max-Width: 500px;
  /* --hue: 200;
  --saturation: 60%;
  --lightness: 55%; */

  /* https://www.w3schools.com/colors/colors_hsl.asp */

  --hue: 200;
  --saturation: 20%;
  --lightness: 40%;
  --main-color: hsl(var(--hue), var(--saturation), var(--lightness));

  --white: hsl(0, 0%, 100%);

  /* text colors */
  --text-white: hsl(0, 0%, 100%);
  --text-light-gray: hsl(0, 0%, 96%);
  --text-x-dark-gray: hsl(0, 0%, 10%);
  --text-dark-gray: hsl(0, 0%, 20%);

  /* input bg color */
  --input-bg-color: hsl(var(--hue), 48%, 92%);

  /* bg colors */
  --body-bg-color: hsl(var(--hue), 60%, 98%);
  /*主體背景色*/
  /* --body-bg-color: hsl(var(--hue), 60%, 94%); */
  --bg-color: hsl(var(--hue), 60%, 97%);
  /*橫福背景色*/
  --bg-color-2: hsl(var(--hue), 60%, 96%);
  /*橫福背景色*/
  /* --bg-color: hsl(var(--hue), 60%, 96%); */
  --bg-white: hsl(0, 0%, 100%);

  /* border color */
  --border-color: hsl(var(--hue), 48%, 80%);
  --border-color-1: hsl(0, 0%, 90%);

  /* shadow */
  /* --shadow: 0 0 5px hsla(var(--hue), 57%, 63%, 0.3); */
  /* --shadow: 0 0 5px hsla(var(--hue), 57%, 20%, 0.3); */
  --shadow: 0 0 2px hsla(var(--hue), 57%, 10%, 0.3);
  --focus-shadow: 0 0 10px hsla(var(--hue), 57%, 63%, 0.6);

  /* font size */
  --fs-4xl: 50px;
  --fs-3xl: 35px;
  --fs-2xl: 26px;
  --fs-xl: 22px;
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;
}

body.t-dark {
  /* --white: hsl(var(--hue), 8%, 21%); */
  --white: hsl(240, 8%, 21%);
  /* text colors */
  --text-x-dark-gray: hsl(0, 0%, 94%);
  --text-dark-gray: hsl(0, 0%, 84%);

  /* bg colors */
  --body-bg-color: hsl(var(--hue), 20%, 10%);
  --bg-color: hsl(var(--hue), 13%, 17%);
  --bg-color-2: hsl(var(--hue), 13%, 17%);

  /* input bg color */
  --input-bg-color: hsl(var(--hue), 15%, 20%);

  /* border color */
  --border-color: hsl(var(--hue), 15%, 30%);
  --border-color-1: hsl(240, 9%, 30%);
  /* shadow */
  --shadow: 0 0 10px hsla(var(--hue), 19%, 7%, 0.9);
}
/*----------- Var END -----------------------*/

/*----------- Base START --------------------*/
html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::before,
::after {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-dark-gray);
  background-color: var(--body-bg-color);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--main-color);
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-x-dark-gray);
  line-height: 1.3;
}

p {
  margin-bottom: 15px;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

::selection {
  color: var(--text-white);
  background-color: var(--main-color);
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: var(--body-bg-color);
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}

.wrap {
  overflow: hidden;
}

.container {
  max-width: var(--Max-Width);
  margin: auto;
  padding: 0 20px;
}

.row {
  width: 100%;
}

.element-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: 6px;
  background-color: var(--bg-color);
  padding: 30px;
  margin-bottom: 20px;
}
/*----------- Base END ----------------------*/

/*----------- Section START -----------------*/
.section-padding {
  padding: 40px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
}

.section-title .title {
  display: inline-block;
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--main-color); /* 字型顏色 */
  margin: 40px 0 10px;
  padding: 0 40px;
  position: relative;
}

.section-title .title::before,
.section-title .title::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 34px;
  background-color: var(--main-color); /* 兩邊槓線顏色 */
  top: 50%;
  transform: translateY(-50%);
}

.section-title .title::before {
  left: 0;
}

.section-title .title::after {
  right: 0;
}

.section-title .sub-title {
  font-size: var(--fs-xl);
}
/*----------- Section END -------------------*/

/*----------- luban START -------------------*/
button {
  cursor: pointer;
}

.unit-item h3 {
  display: inline-block;
  font-weight: 400;
  font-size: 17px;
  padding-left: 5px;
  margin-bottom: 5px;
}

.unit-item i {
  font-size: 18px;
  color: var(--main-color);
}

.action-group,
.user-input-group,
.luban-text {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.action-group input,
.action-group button,
.user-input-group input {
  flex: 1 1 auto;
  width: 1%;
  /* min-width: 0; */
}

.action-group button {
  width: 12%;
}

.action-group button i {
  margin: 0 2px;
  color: var(--main-color);
  font-size: var(--fs-md);
}

.action-group input,
.action-group button,
.user-input-group input,
.user-input-enter,
.luban-text-item {
  display: block;
  border: 2px solid var(--border-color);
  padding: 6px 12px;
  line-height: 1.5;
  font-size: var(--fs-md);
}

.luban-text-item {
  flex: 3;
  background-color: #f5c520;
  border: 2px solid #404040;
  margin: 0px -2px 0px -2px;
  color: var(--text-dark-gray);
  line-height: 1.5;
  text-align: center;
  font-size: var(--fs-2xl);
}

.luban-middle-text-red {
  flex: 1;
  color: white;
  background-color: #9a1f24;
}

.luban-mainBody-text-red {
  color: #9a1f24;
}

.luban-middle-text-black {
  flex: 1;
  color: white;
  background-color: #404040;
}

/* 只要讓第一欄和最後一欄有圓角 */
.luban-text-item:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.luban-text-item:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.action-group button {
  background-color: var(--input-bg-color);
  margin: 0px -2px 0px -2px;
  color: var(--text-dark-gray);
}

.text-start,
.user-input-enter {
  border-top-left-radius: 6px; /* 左上圓角 */
  border-bottom-left-radius: 6px; /* 左下圓角 */
  border-top-right-radius: 0; /* 右上圓角 */
  border-bottom-right-radius: 0; /* 右下圓角 */
}

.text-end {
  border-top-left-radius: 0; /* 左上圓角 */
  border-bottom-left-radius: 0; /* 左下圓角 */
  border-top-right-radius: 6px; /* 右上圓角 */
  border-bottom-right-radius: 6px; /* 右下圓角 */
}

.unit-form-ctrl-text {
  display: block;
  width: 100px;
  margin-left: -1px; /* 左邊緣 */
  border-top-right-radius: 6px; /* 右上圓角 */
  border-bottom-right-radius: 6px; /* 右下圓角 */
  background-color: var(--border-color);
  color: var(--text-dark-gray);
  padding: 6px 12px; /* 內距 上下 左右 */
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  border: 2px solid var(--border-color);
}
/*----------- luban END ---------------------*/

/*----------- Form START --------------------*/
/* 覆寫各家瀏覽器預設 placeholder 設定 */
::placeholder {
  color: var(--text-dark-gray);
  opacity: 1;
}

input:focus,
select:focus,
textarea {
  outline: 0px solid var(--border-color); /* 取消點擊焦點顏色 */
}
/*----------- Form END ----------------------*/

/*---------- footer START -------------------*/
.footer {
  width: fit-content;
  margin: 0 auto;
  margin-top: 30px;
  /* background-color: var(--main-color); */
  text-align: center;
}

.footer h3 {
  /* color: var(--text-white); */
  color: var(--main-color);
  font-size: var(--fs-xl);
  margin: 0 0 15px;
  font-weight: 400;
}

.footer h4 {
  /* color: var(--text-white); */
  color: var(--main-color);
  font-size: var(--fs-l);
  font-weight: 400;
}

.footer .projects h4,
.footer .contact h4 {
  margin: 3px 0 3px;
}

.footer .copyright,
.footer .social-links,
.footer .projects,
.footer .contact {
  margin-top: 15px;
}

.footer .social-links i {
  font-size: 18px;
}

.footer .social-links a {
  height: 40px;
  width: 40px;
  display: inline-flex;
  background-color: var(--main-color);
  color: var(--text-white);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  border: 1px solid transparent;
  transition: all 0.5s ease;
}

.footer .social-links a:hover {
  background-color: transparent;
  color: var(--main-color);
  border-color: initial;
}

/*---------- footer END ---------------------*/

/*----------- Responsive START --------------*/
@media (max-width: 767px) {
  .element-group {
    padding: 20px;
  }

  .action-group button {
    padding: 6px 6px;
  }

  .luban-text-item {
    font-size: var(--fs-xl);
    padding: 6px 6px;
  }
}
/*----------- Responsive END ----------------*/