html,
body {
  height: 100%;
  margin: 0;
  cursor: url("../assets/cursor.png"),
    
}
/* hover 到可點擊元件時換 cursor */
.frame-3:hover,
.stop_button:hover,
.play_button:hover,
.pause_button:hover,
.mode-change-button:hover,
.fast-forward-media:hover,
.back-forward-media:hover,
.text-wrapper-12:hover {
  cursor: url("../assets/click.png"),
    pointer;
}


.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  position: relative;
  background-image: url("../assets/pixel_sky_resized_1920x1330.png");
  background-size: cover;
  background-position: 50% 50%;
}

.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.main .rectangle {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(217, 217, 217, 0) 0%,
    rgba(232, 104, 40, 1) 100%
  );
}

.main .frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  position: relative;
}

.main .div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 51px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  
}
.div-wrapper {
    position: absolute; /* 這樣才可以自由移動 */
    top: 40%;
    left: 50%;
   width: 100%;
    transform: translate(-50%, -50%);
  transition: filter 0.3s ease;
}




.main .welcome-to-sherry-s-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.main .welcome-to-sherry-s {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  font-size: 5vw; /* 根據螢幕寬度縮放 */
}

.main .chatgpt-image-may {
  width: 50%; /* 讓它隨視窗縮放 */
  max-width: 1032px;
  height: auto;
}

.main .frame-2 {
  display: inline-flex;
  width: auto;
  align-items: center;
  flex: 0 0 auto;
  margin-bottom: -57.5px;
  margin-top: -150px;
  margin-left: 100px;
  padding: 20px;
  position: absolute;
  top: 100%; /* 放在 frame 底下 */
  left: 0;
  transition: top 0.3s ease;
  
}
.main .frame-2 > * {
  margin-right: -100px; /* 負距離效果 */
  background: lightblue;
  border: 1px solid #000;
}



.main .rectangle-2 {
  position: relative;
  width: 42.5px;
  height: 327.5px;
  background-color: #070101;
}

.main .image {
  width: 327.5px;
  height: 327.5px;
  position: relative;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.main .CD-2 {
  display: flex;
  width: 100%;
  height: 335.5px;
  align-items: center;
  gap: 3px;
  padding: 3.5px 0px;
  position: relative;

  background-color: #ffffff4c;
  border-radius: 2.5px;
  border: 0.5px solid;
  border-color: #ffffff1a;
  box-shadow: 4px 4px 4px #00000040;

  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  cursor: pointer;

  /* 👇 這是 pixel 效果 */
  image-rendering: pixelated;
  filter: contrast(200%) saturate(50%) blur(3px);
}

.CD-2:hover {
  transform: translateY(-200px);
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);

  /* 👇 變正常 */
  filter: none;
}