daphnis/app/globals.css

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer base {
    :root {
      --background: 0 0% 100%;
      --foreground: 222.2 84% 4.9%;

      --card: 0 0% 100%;
      --card-foreground: 222.2 84% 4.9%;

      --popover: 0 0% 100%;
      --popover-foreground: 222.2 84% 4.9%;

      --primary: 222.2 47.4% 11.2%;
      --primary-foreground: 210 40% 98%;

      --secondary: 210 40% 96.1%;
      --secondary-foreground: 222.2 47.4% 11.2%;

      --muted: 210 40% 96.1%;
      --muted-foreground: 215.4 16.3% 46.9%;

      --accent: 210 40% 96.1%;
      --accent-foreground: 222.2 47.4% 11.2%;

      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 210 40% 98%;

      --border: 214.3 31.8% 91.4%;
      --input: 214.3 31.8% 91.4%;
      --ring: 222.2 84% 4.9%;

      --radius: 0.5rem;
    }

    .dark {
      --background: 222.2 84% 4.9%;
      --foreground: 210 40% 98%;

      --card: 222.2 84% 4.9%;
      --card-foreground: 210 40% 98%;

      --popover: 222.2 84% 4.9%;
      --popover-foreground: 210 40% 98%;

      --primary: 210 40% 98%;
      --primary-foreground: 222.2 47.4% 11.2%;

      --secondary: 217.2 32.6% 17.5%;
      --secondary-foreground: 210 40% 98%;

      --muted: 217.2 32.6% 17.5%;
      --muted-foreground: 215 20.2% 65.1%;

      --accent: 217.2 32.6% 17.5%;
      --accent-foreground: 210 40% 98%;

      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 210 40% 98%;

      --border: 217.2 32.6% 17.5%;
      --input: 217.2 32.6% 17.5%;
      --ring: 212.7 26.8% 83.9%;
    }
  }

  @layer base {
    * {
      @apply border-border;
    }
    body {
      @apply bg-background text-foreground;
    }
  }


  g,
video {
  max-width: revert;
  height: revert;
}

.rainbow-text {
  background: linear-gradient(
    to left,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  color: transparent;
}

/*
* CHUSAN AVATAR
*/

.avatar_group {
  width: 420px;
  height: 330px;
  margin: 0px auto 0px auto;
  /* background-color: red; */
  position: relative;
}

/* Mobile Styles */
@media screen and (max-width: 480px) {
  .avatar_group {
    width: 100%; /* Adjust width for mobile */
    height: auto; /* Adjust height as needed */
    /* You can also adjust other properties as needed */
  }
}
/* アバター土台 */
.avatar_base {
  width: 272px;
  height: 330px;
  padding: 10px 0 0 0;
  position: relative;
  margin: 0px auto 0px auto;
  overflow: hidden;
}

/* 背景 */
.avatar_back {
  display: block;
  width: 272px;
  height: 330px;
  position: absolute;
  top: 25px;
  z-index: 100;
}

/* 右足 */
.avatar_skinfoot_r {
  display: block;
  width: 42px;
  height: 52px;
  position: absolute;
  overflow: hidden;
  z-index: 101;
  top: 280px;
  left: 84px;
}
.avatar_skinfoot_r img {
  transform: translate(0px, -204px);
}

/* 左足 */
.avatar_skinfoot_l {
  display: block;
  width: 42px;
  height: 52px;
  position: absolute;
  overflow: hidden;
  z-index: 102;
  top: 280px;
  left: 147px;
}
.avatar_skinfoot_l img {
  transform: translate(-42px, -204px);
}

/* デフォルト髪の毛 */
.avatar_hair {
  display: block;
  width: 46px;
  height: 78px;
  position: absolute;
  overflow: hidden;
  z-index: 103;
  top: 21px;
  left: 110px;
}
.avatar_hair img {
  transform: translate(0px, 0px);
}

/* 体色 */
.avatar_skin {
  display: block;
  width: 128px;
  height: 204px;
  position: absolute;
  overflow: hidden;
  z-index: 104;
  top: 93px;
  left: 72px;
}
.avatar_skin img {
  transform: translate(0px, 0px);
}

/* 衣装 */
.avatar_wear {
  display: block;
  width: 258px;
  height: 218px;
  position: absolute;
  overflow: hidden;
  z-index: 105;
  top: 106px;
  left: 7px;
}

.avatar_wear img {
  transform: translate(0px, 0px);
}

/* 表情 */
.avatar_face {
  display: block;
  width: 58px;
  height: 64px;
  position: absolute;
  overflow: hidden;
  z-index: 106;
  top: 100px;
  left: 107px;
}

.avatar_face img {
  transform: translate(0px, 0px);
}

/* 表情 */
.avatar_face_static {
  display: block;
  width: 58px;
  height: 64px;
  position: absolute;
  overflow: hidden;
  z-index: 106;
  top: 100px;
  left: 107px;
}

.avatar_face img {
  transform: translate(0px, 0px);
}
/* フェイスカバー */
.avatar_face {
  display: block;
  width: 116px;
  height: 104px;
  position: absolute;
  overflow: hidden;
  z-index: 107;
  top: 96px;
  left: 78px;
}

.avatar_faceCover img {
  transform: translate(0px, 0px);
}

/* 頭 */
.avatar_head {
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  z-index: 108;
  top: 28px;
  left: 37px;
}

.avatar_head img {
  transform: translate(0px, 0px);
}

/* 右手 */
.avatar_hand_r {
  display: block;
  width: 36px;
  height: 72px;
  position: absolute;
  overflow: hidden;
  z-index: 108;
  top: 178px;
  left: 52px;
}

.avatar_hand_r img {
  transform: translate(0px, 0px);
}

/* 左手 */
.avatar_hand_l {
  display: block;
  width: 36px;
  height: 72px;
  position: absolute;
  overflow: hidden;
  z-index: 109;
  top: 178px;
  left: 184px;
}

.avatar_hand_l img {
  transform: translate(0px, 0px);
}

/* 右アイテム */
.avatar_item_r {
  display: block;
  width: 100px;
  height: 272px;
  position: absolute;
  overflow: hidden;
  z-index: 109;
  transform: rotate(-5deg);
  top: 50px;
  left: 9px;
}

.avatar_item_r img {
  transform: translate(0px, 0px);
}

/* 左アイテム */
.avatar_item_l {
  display: block;
  width: 100px;
  height: 272px;
  position: absolute;
  overflow: hidden;
  z-index: 110;
  transform: rotate(5deg);
  top: 50px;
  left: 163px;
}

.avatar_item_l img {
  transform: translate(-100px, 0px);
}