/* google font
font-family:'Noto Serif TC';
font-family:'Noto Sans TC';
font-family:'Zen Maru Gothic';
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&Noto+Sans+TC:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');


/* 何某手寫
Light
DemiLight
Regular (原作者的字重)
Medium
SemiBold
*/

@font-face {
  font-family: nanifont;
  src:
    url(https://cdn.jsdelivr.net/gh/max32002/nanifont@1.036/webfont/NaniFont-Light.woff2) format("woff2"),
    url(https://cdn.jsdelivr.net/gh/max32002/nanifont@1.036/webfont/NaniFont-Light.woff) format("woff");
}

/* 內海字體
ExtraLight
Light
Regular
SemiBold
Bold
*/
@font-face {
  font-family: naikaifont;
  src: url(https://cdn.jsdelivr.net/gh/max32002/naikaifont@1.0/webfont/NaikaiFont-Regular-Lite.woff2) format("woff2");
}


:root {
  --color01: #fffdf9;
  --color02: #2bb1a6;
  --color03: #61c0bc;
  --color04: #abe9e4;
  --color05: #beebe9;
  --color06: #8ac6d1;
  --color07: #8acfed;
  --color08: #ffe3ed;
  --color09: #edd78a;
}

body {
  font-family: "naikaifont", "nanifont", "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* background-color: #fffdf9; */
}

.color-rice {
  color: var(--color01);
  text-decoration: none;
}

.color-g1 {
  color: var(--color02);
  text-decoration: none;
}

.color-g2 {
  color: var(--color03);
  text-decoration: none;
}

.color-g3 {
  color: var(--color04);
  text-decoration: none;
}

.color-g4 {
  color: var(--color05);
  text-decoration: none;
}

.color-b1 {
  color: var(--color06);
  text-decoration: none;
}

.color-b2 {
  color: var(--color07);
  text-decoration: none;
}

.color-pink {
  color: var(--color08);
  text-decoration: none;
}

.color-yellow {
  color: var(--color09);
  text-decoration: none;
}

.bg-w {
  background-color: var(--color01);
}

.bg-g1 {
  background-color: var(--color02);
}

.bg-g2 {
  background-color: var(--color03);
}

.bg-g3 {
  background-color: var(--color04);
}

.bg-g4 {
  background-color: var(--color05);
}

.bg-b1 {
  background-color: var(--color06);
}

.bg-b2 {
  background-color: var(--color07);
}

.bg-pink {
  background-color: var(--color08);
}

.bg-yellow {
  background-color: var(--color09);
}

.bg-cover {
  background-size: cover;
}

.home {
  background-image: linear-gradient(to bottom,
      #ABE9E4 0%,
      #FBF6DC 75%,
      #ffffff00 100%);
  height: 90vh;
}




/* 卷軸特效 外 .r-box, 內 .roller*/
.r-box {
  position: relative;
  overflow: hidden;
}

.roller {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 100%;
  transform: translate(0, -100%);
  transition: transform 900ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.r-box:hover .roller {
  transform: translate(0, 0);
}


/*老師的旋轉卡片效果
外層: flip-card
內層: flip-card-inner
  正面:flip-card-front
  背面:flip-card-back
圓形圖片: .circle
下在inner、front、back
*/

.flip-card {
  background-color: transparent;
  /* width: 300px;
  height: 300px; */
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1.5s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

.circle {
  aspect-ratio: 1 / 1; /* 確保寬高比例為 1:1，保持圓形 */
  width: 100%; /* 寬度填滿父容器 */
  border-radius: 50%; /* 將元素變成圓形 */
  display: flex; /* 使用 Flexbox 將內容置中 */
  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直置中 */
  margin: auto; /* 讓圓形居中 */
}




