/* ==========================================================
   TypingTutor.Online
   Clean Functional Hands
   Version: 2.1
========================================================== */

#handsContainer {
    width: 100%;
    height: 265px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    user-select: none;
    background: #ffffff;
    border: 1px solid #edf1f6;
    border-radius: 24px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.06);
}

#typingHands {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================
   PALMS AND WRISTS
========================================================== */

.hand-palm {
    fill: #ffd4ae;
    stroke: #dca56f;
    stroke-width: 3;
}

.hand-wrist {
    fill: #f6c79d;
    stroke: #dca56f;
    stroke-width: 3;
}

/* ==========================================================
   FINGERS
========================================================== */

.finger {
    transition:
        filter 0.17s ease,
        opacity 0.17s ease;
}

.finger-segment {
    fill: #ffd4ae;
    stroke: #dca56f;
    stroke-width: 2.2;
    transition:
        fill 0.15s ease,
        stroke 0.15s ease;
}

.finger-tip {
    fill: #f8c89e;
    stroke: #dca56f;
    stroke-width: 2.2;
    transition:
        fill 0.15s ease,
        stroke 0.15s ease;
}

/* ==========================================================
   EXPECTED FINGER
========================================================== */

.finger.finger-active {
    filter:
        drop-shadow(0 5px 6px rgba(37, 99, 235, 0.42));
}

.finger.finger-active .finger-segment,
.finger.finger-active .finger-tip {
    fill: #8fc4ff;
    stroke: #2563eb;
    stroke-width: 3;
}

/* ==========================================================
   CORRECT PRESS
========================================================== */

.finger.finger-correct {
    filter:
        drop-shadow(0 5px 6px rgba(22, 163, 74, 0.4));
}

.finger.finger-correct .finger-segment,
.finger.finger-correct .finger-tip {
    fill: #86efac;
    stroke: #16a34a;
    stroke-width: 3;
}

/* ==========================================================
   WRONG PRESS
========================================================== */

.finger.finger-wrong {
    filter:
        drop-shadow(0 5px 6px rgba(239, 68, 68, 0.42));
}

.finger.finger-wrong .finger-segment,
.finger.finger-wrong .finger-tip {
    fill: #fca5a5;
    stroke: #ef4444;
    stroke-width: 3;
}

/* ==========================================================
   PRESS FEEDBACK
========================================================== */

.finger.finger-press {
    animation: fingerPress 0.22s ease;
}

@keyframes fingerPress {

    0% {
        opacity: 1;
    }

    45% {
        opacity: 0.55;
    }

    100% {
        opacity: 1;
    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    #handsContainer {
        height: 220px;
        border-radius: 18px;
    }

}

@media (max-width: 480px) {

    #handsContainer {
        height: 190px;
    }

}