html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
  scrollbar-width: none;
}

/* 游標 */
.custom-cursor {
  position: absolute;
  width: 64px;
  height: 64px;
  background: url('cursor.png') no-repeat center;
  background-size: contain;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.container0 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-image: linear-gradient(to bottom, rgba(73, 171, 251, 0.295), rgba(255, 220, 248, 0.6));
  cursor: none; /* 隱藏系統游標 */
  position: relative; /* 為了讓 .bottom-section 靠下 */

  perspective: 1920px;
}



.logo {
  width: 160px;
  height: 160px;
  background-color: transparent;
  border-radius: 50%;
  margin-bottom: 5px;

  background-image: url('logo.png');
  background-size: 70%; /* 調整圖片大小（可根據需要更改） */
  background-repeat: no-repeat; /* 防止圖片重複 */
  background-position: center; /* 圖片置中 */

  transform-style: preserve-3d; 
  
  animation: logo-rotate 3s ease-in infinite forwards;
}


@keyframes logo-click {
  0%{
    transform: scale(1,1) rotateZ(0deg);
    opacity: 1;
  }
  10%{
    transform: scale(0.5,0.5) rotateZ(0deg);
    opacity: 1;
  }
  50%{
    transform: scale(20,20) rotateZ(360deg);
    opacity: 0;
  }
  90%{
    transform: scale(0.5,0.5) rotateZ(0deg);
    opacity: 1;
  }
  100%{
    transform: scale(1,1) rotateZ(0deg);
    opacity: 1;
  }
}


@keyframes logo-rotate {
  0%{transform: rotateY(0deg);}
  50%{transform: rotateY(180deg);}
  100%{transform: rotateY(360deg);}
}


h1 {
  font-size: 36px;
  color: #333;
  text-align: center;
  width: 100%;
  margin-bottom: 30px; /* 下方空間 */
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

.Wave {
  position: relative;
  transform: translateY(0px);
  animation: wave-animation 7s ease-in infinite forwards;
}

.Wave:nth-child(1)  {animation-delay: 3.00s;}
.Wave:nth-child(2)  {animation-delay: 3.25s;}
.Wave:nth-child(3)  {animation-delay: 3.50s;}
.Wave:nth-child(4)  {animation-delay: 3.75s;}
.Wave:nth-child(5)  {animation-delay: 4.00s;}
.Wave:nth-child(6)  {animation-delay: 4.25s;}
.Wave:nth-child(7)  {animation-delay: 4.50s;}
.Wave:nth-child(8)  {animation-delay: 4.75s;}
.Wave:nth-child(9)  {animation-delay: 5.00s;}
.Wave:nth-child(10) {animation-delay: 5.25s;}
.Wave:nth-child(11) {animation-delay: 5.50s;}
.Wave:nth-child(12) {animation-delay: 5.75s;}
.Wave:nth-child(13) {animation-delay: 6.00s;}
.Wave:nth-child(14) {animation-delay: 6.25s;}

@keyframes wave-animation {
  0%{
    transform: translateY(0px);
    opacity: 1;
  }
  2.5%{transform: translateY(-5px);}
  7%{
    transform: translateY(-25px);
    opacity: 0.75;
  }
  14%{transform: translateY(-5px);}
  17.5%{
    transform: translateY(0px);
    opacity: 1;
  }
  25%{transform: translateY(3px);}
  27.5%{transform: translateY(0px);}
  100%{transform: translateY(0px);}
}


/* START 按鈕 */
.button0 {
  display: inline-block;
  padding: 20px 30px;
  font-size: 18px;
  color: white;
  background-color: #007BFF;
  text-decoration: none;
  border-radius: 20px;
  transition: background-color 0.3s ease;
  margin-bottom: 150px;

  cursor: none; /* 隱藏系統游標 */
}

.button0:hover {
  background-color: #0056b3;
}



.bottom-section {
  display: flex;
  position: absolute;
  bottom: 50px; /* 靠底部 50px */
  left: 50%;
  transform: translateX(-50%); /* 水平置中 */
  align-items: center;
  gap: 10px;
  flex-direction: column; /* 確保內容垂直排列 */
}

.option-group {
  display: flex;
  align-items: center;
  gap: 20px;
  width: auto;
}

/* START 按鈕 */
.button1 {
  display: inline-block;
  padding: 10px 15px;
  font-size: 18px;
  color: white;
  background-color: #007BFF;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;

  cursor: none; /* 隱藏系統游標 */
}

.button1:hover {
  background-color: #0056b3;
}




h2 {
  font-size: 12px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}


@media (max-width: 600px) {
  .container {
      padding: 10px;
  }

  .option-group {
      width: 100%;
  }
}