/* small page-level reset and use the font as a fallback for non-Tailwind areas */
html,body, #app { height: 100%; }
body { font-family: 'Encode Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

svg{
    max-width: 100%;
    max-height: 100%;
}



svg [class^="color-"] {
  transition: fill 0.3s;
}

/* Default values (can be changed later in JS or Vue) */
:root {
  --color-skin: #FFD1A0;
  --color-eyes: #9D4B0E;
  --color-nose: #FF8000;
  --color-hair: #4D4946;
  --color-frame: #BB00FF;
  --color-glass: #95FF00;
  --color-clothes: #00A1FF;
  --color-clothes2: #7FD0FF;
  --color-bg1: #D000FF;
  --color-bg2: #00FFDD;
}

/* Use CSS variables inside the SVG */
.color-skin     { fill: var(--color-skin); }
.color-eyes     { fill: var(--color-eyes); }
.color-nose     { fill: var(--color-nose); }
.color-hair     { fill: var(--color-hair); }
.color-frame    { fill: var(--color-frame); }
.color-glass    { fill: var(--color-glass); fill-opacity: 1 !important; }
.color-clothes  { fill: var(--color-clothes); }
.color-clothes2 { fill: var(--color-clothes2); }
.color-bg1 { stop-color: var(--color-bg1); }
.color-bg2 { stop-color: var(--color-bg2); }


button .w-16 svg { width: 64px; height: 64px; display:block; }


.colorPartBox{
    display: flex;
    border-radius: 2rem;
    padding-left: 6px;
    background: white;
    border: 2px solid #000;
}

input[type='color'] {
  padding: 0;
  width: 150%;
  height: 150%;
  margin: -25%;
}

.pcr-app { z-index: 9999 !important; }
.pickr .pcr-button{ 
    width:2.8rem !important;
    height:2.8rem !important;
    overflow: hidden;
    border:2px solid #000;
    border-radius:3rem !important;

}



@media(max-height: 680px) {
    .avatarpreview{
        max-width: 260px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .partsContainer{
        max-height: 180px !important;
    }
    .btnCategory{
        max-width: 40px !important;
        max-height: 40px !important;
    }
}



@media(max-height: 480px) {
    .avatarpreview{
        max-width: 200px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .partsContainer{
        max-height: 140px !important;
    }
    .btnCategory{
        max-width: 40px !important;
        max-height: 40px !important;
    }
}



@keyframes blinking {
    49%{ opacity:1; }
    50%{ opacity:0 }
    51%{ opacity:1 }
}

@keyframes headRotation {

    0%{ transform: translateY(0); }
    10%{ transform: translateY(0); }
    15%{ transform: translateY(-10px); }
    20%{ transform: translateY(-10px); }
    25%{ transform: translateY(0); }

    70%{ transform: translateX(0); }
    75%{ transform: translateX(-10px); }
    80%{ transform: translateX(-10px); }
    85%{ transform: translateX(0); }
    90%{ transform: translateX(10px); }
    95%{ transform: translateX(10px); }
    100%{ transform: translateX(0); }

}
@keyframes headRotationFace {
    0%{ transform: translateY(0); }
    10%{ transform: translateY(0); }
    15%{ transform: translateY(-5px); }
    20%{ transform: translateY(-5px); }
    25%{ transform: translateY(0); }
    
    70%{ transform: translateX(0); }
    75%{ transform: translateX(-5px); }
    80%{ transform: translateX(-5px); }
    90%{ transform: translateX(5px); }
    95%{ transform: translateX(5px); }
    100%{ transform: translateX(0); }

}



g[id*='av/eyes/']{
    animation: 5s blinking infinite;
}

g[id*='av/eyes/'],
g[id*='av/mouth/'],
g[id*='av/nose/'],
g[id*='av/glasses/'],
g[id*='av/brows/']
{
    animation: 10s headRotation infinite;
}

g[id*='av/hair/'],
g[id*='av/face/']
{
    animation: 10s headRotationFace infinite;
}






@keyframes btnAppear {
    0%{transform:scale(0.5); opacity:0;}
    100%{transform:scale(1); opacity:1;}
}




.btnCategory {
  --i: 0; /* default index */
  transform:scale(0.5);
  opacity: 0;
  animation: btnAppear 0.5s ease-out forwards;
  animation-delay: calc(var(--i) * 0.1s);
}
.btnPart {
  --i: 0; /* default index */
  transform:scale(0.5);
  opacity: 0;
  animation: btnAppear 0.5s ease-in-out forwards;
  animation-delay: calc(var(--i) * 0.01s);
}