.eyes-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ava-interactive-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eye-L-sleepy{
    transition: transform 8s;
    /* animation: eyesSleepy;
    animation-duration: 10s;
    animation-iteration-count: 1; */
}

.eye-L-blink{
    animation: eyesBlink;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    /* transition: transform 0.2s; */
}

.eye-L-bored-1{
    animation: eyesBored1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.6,1.12,.84,.96);
}

.eye-R-bored-1{
    animation: eyesBored1inverse;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.6,1.12,.84,.96);
}

.eye-L-bored-2{
    animation: eyesBored2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.6,1.12,.84,.96);
}

.eye-R-bored-2{
    animation: eyesBored2inverse;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.6,1.12,.84,.96);
}

.eye-L,.eye-L-sleepy,.eye-L-blink,.eye-L-bored-1,.eye-L-bored-2,.eye-R-bored-1,.eye-R-bored-2,.eye-R{
    object-fit: contain;
}

.mouth{
    height: auto;
    object-fit: contain;
}


@media screen and (max-width:500px) {
    
}
  
@media screen and (min-width:501px) and (max-width:1023px) {
  

}
  
@media screen and (min-width:1024px) and (max-width:1920px) {

    /* .ava-interactive-wrapper{
        gap: 100px;
    }

    .eyes-wrapper{
        gap: 100px;
    }

    .eye-L,.eye-L-sleepy,.eye-L-blink,.eye-L-bored-1,.eye-L-bored-2,.eye-R-bored-1,.eye-R-bored-2,.eye-R{
        width: 50px;
        height: 50px;
        object-fit: contain;
    }

    .mouth{
        width: 225px;
        height: auto;
        object-fit: contain;
    } */
}
  
@media screen and (min-width:1921px){

    /* .ava-interactive-wrapper{
        gap: 150px;
    }

    .eyes-wrapper{
        gap: 150px;
    }

    .eye-L,.eye-L-sleepy,.eye-L-blink,.eye-L-bored-1,.eye-L-bored-2,.eye-R-bored-1,.eye-R-bored-2,.eye-R{
        width: 75px;
        height: 75px;
        object-fit: contain;
    }

    .mouth{
        width: 337.5px;
        height: auto;
        object-fit: contain;
    } */

}

@keyframes eyesSleepy {
    0%{
        transform: scaleY(1);
    }
    30%{
        transform: scaleY(0.025);
    }
}

@keyframes eyesBlink {
    0%{
        transform: scaleY(1);
    }
    2%{
        transform: scaleY(0.075);
    }
    4%{
        transform: scaleY(1);
    }
}

@keyframes eyesBored1{
    0%{
        transform: translateX(0px);
    }
    20%{
        transform: translateX(5px);
    }
    40%{
        transform: translateX(0px);
    }
    60%{
        transform: translateX(-5px);
    }
    80%{
        transform: translateX(0px);
    }
}

@keyframes eyesBored1inverse{
    0%{
        transform: translateX(0px);
    }
    20%{
        transform: translateX(-5px);
    }
    40%{
        transform: translateX(0px);
    }
    60%{
        transform: translateX(5px);
    }
    80%{
        transform: translateX(0px);
    }
}

@keyframes eyesBored2{
    0%{
        transform: translateY(0px);
    }
    20%{
        transform: translateY(5px);
    }
    40%{
        transform: translateY(0px);
    }
    60%{
        transform: translateY(-5px);
    }
    80%{
        transform: translateY(0px);
    }
}

@keyframes eyesBored2inverse{
    0%{
        transform: translateY(0px);
    }
    20%{
        transform: translateY(-5px);
    }
    40%{
        transform: translateY(0px);
    }
    60%{
        transform: translateY(5px);
    }
    80%{
        transform: translateY(0px);
    }
}