body {
  margin: 0;
  background: white;
  font-family: Arial, sans-serif;
  overflow: hidden;
  font-size: calc(0.6rem + 1*0.6vw);
}

#bg {
  display: none;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
}

/* Wrapper centers rotated hand-container */
.hand-wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  justify-content: center; /* horizontal center */
  align-items: center;     /* align fingers from bottom */
}

/* Fingers container */
.hand-container {
  display: flex;
  flex-direction: column;
  gap: 2vw;
  transform: rotate(90deg);       /* rotate hand */
  transform-origin: center center; /* rotate around center */
  justify-content: center;
  height: 100vw;
}

/* Base finger styles */
.finger {
  display: flex;
  flex-direction: row;
  align-items: center;   /* vertically center children */
  gap: 2vw;             /* space between image and text */
  width: 60vh;           /* adjust as needed */
  padding: 10px;
}

.finger img {
  height: 8rem;
  width: auto;
  transform: rotate(-90deg); /* counterclockwise */
  object-fit: cover;
}

.finger p {
  margin: 0;
  flex: 1;
}

.finger-1 {
  width: 50vh;
}

.finger-5 {
  width: 55vh;
}

/* Specific rotations for each finger to fan out */
.finger-1 { left: 20%; transform: translate(50%, -1vw) rotate(+60deg); }
.finger-2 { left: 35%; transform: translate(-15%) rotate(+10deg); }
.finger-3 { left: 50%; transform: translate(-20%) rotate(0deg); }
.finger-4 { left: 65%; transform: translate(-15%) rotate(-10deg); }
.finger-5 { left: 80%; transform: translate(20%, -40%) rotate(-20deg); }

/* Palm text at bottom center */
.palm {
  position: fixed;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: blue;
  line-height: 1.4;
}

.palm h1, .palm p {
  margin: 0;
  font-size: calc(0.6rem + 1*0.6vw);
  font-weight: normal;
}

@media only screen and (max-width: 900px) {
  body {
    font-size: calc(0.6rem + 1*0.6vw);
  }


  /* Specific rotations for each finger to fan out */
  .finger-1 { left: 20%; transform: translate(30%, 60%) rotate(+20deg); }
  .finger-2 { left: 35%; transform: translate(-20%, 20%) rotate(+10deg); }
  .finger-3 { left: 50%; transform: translate(-30%, 17.5%) rotate(0deg); }
  .finger-4 { left: 65%; transform: translate(-20%, 15%) rotate(-5deg); }
  .finger-5 { left: 80%; transform: translate(10%, -30%) rotate(-10deg); }


  /* Base finger styles */
  .finger {
    padding: 0px;
    gap: 20px;             /* space between image and text */
    width: 55vh;
  }

  .finger img {
    height: 5rem;
    width: auto;
    transform: rotate(-90deg); /* counterclockwise */
    object-fit: cover;
  }

  /* Fingers container */
  .hand-container {
    height: 80vw;
    gap: 0px;
  }

  .palm h1, .palm p {
    font-size: calc(0.6rem + 1*0.6vw);
  }

  .finger-1 {
    width: 40vh;
  }

  .finger-5 {
    width: 45vh;
  }

}