.robot-beranda {
    position: relative;
    width: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vh;
    margin-top: 10px;
}

.avd-robot {
    position: relative;
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rbt-mata {
    position: relative;
    display: flex;
    animation: rbt-mata 5s ease infinite;
}

/* @keyframes rbt-mata {
    0%{
        transform: rotate(-360);
    }
    15% {
        transform: rotate(40deg);
    }
    35% {
        transform: rotate(0deg);
    }
    45% {
        transform: rotate(0);
    }
    70% {
        transform: rotate(0);
    }
    75% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(0);
    }
} */

.mata-one {
    justify-content: center;
    display: flex;
    background-color: blue;
    position: relative;
    margin: 0px 10px;
    animation: mata-one 5s ease infinite;
}

.mata-two {
    justify-content: center;
    display: flex;
    background-color: red;
    position: relative;
    margin: 0px 10px;
    animation: mata-two 5s ease infinite;
}

/* @keyframes mata-one {
    0% {
        border-radius: 90px;
        height: 10px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        margin: 0px 10px;
        top: -40px;
    }

    15% {
        height: 28px;
        width: 25px;
        border-radius: 100%;
        transform: rotate(0deg);
        background-color: transparent;
        box-shadow: none;
        margin: 0px 10px;
        top: 0;
    }

    35% {
        margin: 0px 10px;
        border-radius: 90px;
        height: 28px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
    }

    45% {
        background-color: transparent;
        box-shadow: none;
    }

    70% {
        border-radius: 0px;
        height: 15px;
        width: 30px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(20deg);
        background-color: transparent;
        box-shadow: 0 0 40px var(--avd-text-color-6);
    }

    74% {
        box-shadow: none;
    }


    75% {
        border-radius: 0px;
        height: 20px;
        width: 40px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(30deg);
        background-color: var(--avd-text-color-6);
        box-shadow: 0 0 20px var(--avd-text-color-6);
    }

    100% {
        border-radius: 90px;
        height: 10px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        box-shadow: none;
    }
}


@keyframes mata-two {
    0% {
        border-radius: 90px;
        height: 10px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        margin: 0px 10px;
        top: -40px;
    }

    15% {
        height: 28px;
        width: 25px;
        border-radius: 100%;
        transform: rotate(0deg);
        background-color: transparent;
        box-shadow: none;
        margin: 0px 10px;
        top: 0;
    }

    35% {
        border-radius: 90px;
        height: 28px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        margin: 0px 10px;
    }

    45% {
        background-color: transparent;
        box-shadow: none;
    }

    70% {
        border-radius: 0px;
        height: 15px;
        width: 30px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(-20deg);
        background-color: transparent;
        box-shadow: 0 0 40px var(--avd-text-color-6);
    }

    74% {
        box-shadow: none;
    }

    75% {
        border-radius: 0px;
        height: 20px;
        width: 40px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(-30deg);
        background-color: var(--avd-text-color-6);
        box-shadow: 0 0 20px var(--avd-text-color-6);
    }

    100% {
        border-radius: 90px;
        height: 10px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        box-shadow: none;
    }
} */
/* Bola mata versi awal */

@keyframes mata-one {
    0% {
        border-radius: 90px;
        height: 10px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        margin: 0px 10px;
        top: -40px;
    }

    15% {
        height: 28px;
        width: 25px;
        border-radius: 100%;
        transform: rotate(0deg);
        background-color: transparent;
        box-shadow: none;
        margin: 0px 10px;
        top: 0;
    }

    35% {
        margin: 0px 10px;
        border-radius: 90px;
        height: 28px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
    }

    45% {
        background-color: transparent;
        box-shadow: none;
    }

    70% {
        border-radius: 0px;
        height: 15px;
        width: 30px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(20deg);
        background-color: transparent;
        box-shadow: 0 0 40px red;
    }

    74% {
        box-shadow: none;
    }


    75% {
        border-radius: 0px;
        height: 25px;
        width: 50px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(30deg);
        background-color: red;
        box-shadow: 0 0 20px red;
        opacity: 1;
    }

    100% {
        opacity: 0;
        border-radius: 0px;
        height: 5px;
        width: 10px;
        transform: rotate(30deg);
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        background-color: transparent;
        box-shadow: none;
    }
}


@keyframes mata-two {
    0% {
        border-radius: 90px;
        height: 10px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        margin: 0px 10px;
        top: -40px;
    }

    15% {
        height: 28px;
        width: 25px;
        border-radius: 100%;
        transform: rotate(0deg);
        background-color: transparent;
        box-shadow: none;
        margin: 0px 10px;
        top: 0;
    }

    35% {
        border-radius: 90px;
        height: 28px;
        width: 30px;
        transform: rotate(0deg);
        background-color: transparent;
        margin: 0px 10px;
    }

    45% {
        background-color: transparent;
        box-shadow: none;
    }

    70% {
        border-radius: 0px;
        height: 15px;
        width: 30px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(-20deg);
        background-color: transparent;
        box-shadow: 0 0 40px red;
    }

    74% {
        box-shadow: none;
    }

    75% {
        border-radius: 0px;
        height: 25px;
        width: 50px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(-30deg);
        background-color: red;
        box-shadow: 0 0 20px red;
        opacity: 1;
    }

    100% {
        opacity: 0;
        border-radius: 0px;
        height: 5px;
        width: 10px;
        border-bottom-left-radius: 90px;
        border-bottom-right-radius: 90px;
        transform: rotate(-30deg);
        background-color: transparent;
        box-shadow: none;
    }
} 




.bola-mata-one {
    background-color: white;
    position: relative;
    border-radius: 100%;
    opacity: 0;
    width: 0%;
    height: 0%;
    top: 20px;
    animation: bola-mata-one 5s ease infinite;
}

.bola-mata-two {
    background-color: white;
    position: relative;
    padding: 10px;
    border-radius: 100%;
    opacity: 0;
    width: 0%;
    height: 0%;
    top: 80px;
    animation: bola-mata-two 5s ease infinite;
}

@keyframes bola-mata-one {
    0% {
        background-color: white;
        opacity: 0;
        width: 0%;
        height: 0%;
        padding: 5px;
        top: 10px;
    }

    25% {
        background-color: white;
        padding: 5px;
        opacity: 1;
        width: 0%;
        height: 0%;
        top: 10px;
        box-shadow: none;
    }

    35% {
        background-color: red;
        box-shadow: 0 0 10px red;
        opacity: 1;
        width: 0%;
        height: 0%;
        padding: 4px;
        top: 10px;
    }

    55% {
        top: 4px;
        padding: 4px 3px;
    }

    70% {
        padding: 3px;
        opacity: 1;
        width: 0%;
        height: 0%;
        top: 4px;
        left: 0px;
        background-color: red;
    }


    75% {
        padding: 4px;
        opacity: 1;
        width: 0%;
        height: 0%;
        top: 4px;
        left: 5px;
        display: flex;
        background-color: white;
    }

    100% {
        background-color: white;
        padding: 0px;
        opacity: 0;
        display: none;
        width: 0%;
        height: 0%;
        top: 4px;
        left: 0;
    }
}


@keyframes bola-mata-two {
    0% {
        background-color: white;
        opacity: 0;
        width: 0%;
        height: 0%;
        padding: 5px;
        top: 10px;
    }

    25% {
        background-color: white;
        padding: 5px;
        opacity: 1;
        width: 0%;
        height: 0%;
        top: 10px;
        box-shadow: none;
    }

    35% {
        background-color: red;
        box-shadow: 0 0 10px red;
        opacity: 1;
        width: 0%;
        height: 0%;
        padding: 4px;
        top: 10px;
    }

    55% {
        top: 4px;
        padding: 4px 3px;
    }

    70% {
        padding: 3px;
        opacity: 1;
        width: 0%;
        height: 0%;
        top: 4px;
        right: 0px;
        background-color: red;
    }


    75% {
        padding: 4px;
        opacity: 1;
        width: 0%;
        height: 0%;
        top: 4px;
        right: 5px;
        display: flex;
        background-color: white;
    }

    100% {
        background-color: white;
        padding: 0px;
        opacity: 0;
        display: none;
        width: 0%;
        height: 0%;
        top: 4px;
        right: 0;
    }
}

.alis-mata-one {
    position: absolute;
    right: 0px;
    animation: alis-mata-one 5s ease infinite;
}

.alis-mata-two {
    position: absolute;
    left: 0px;
    animation: alis-mata-one 5s ease infinite;
}

@keyframes alis-mata-one {
    0% {
        background-color: red;
        opacity: 0;
        top: -5px;
    }

    25% {
        background-color: red;
        opacity: 0;
        border-radius: 20px;
        top: -5px;
        right: 0;
        padding: 1px 0px;
    }


    70% {
        opacity: 1;
        width: 0%;
        border-radius: 20px;
        top: -5px;
        right: 0;
        padding: 1px 0px;
        background-color: red;
    }

    75% {
        opacity: 1;
        width: 80%;
        border-radius: 20px;
        top: -5px;
        right: 0;
        padding: 1px 0px;
        background-color: red;
        box-shadow: 0 0 10px red;
    }

    100% {
        background-color: red;
        opacity: 1;
        top: -5px;
        width: 0%;
    }
}

@keyframes alis-mata-two {
    0% {
        background-color: red;
        opacity: 0;
        top: -5px;
    }

    25% {
        background-color: red;
        opacity: 0;
        border-radius: 20px;
        top: -5px;
        right: 0;
        padding: 1px 0px;
    }


    70% {
        opacity: 1;
        width: 0%;
        border-radius: 20px;
        top: -5px;
        right: 0;
        padding: 1px 0px;
        background-color: red;
    }

    75% {
        opacity: 1;
        width: 80%;
        border-radius: 20px;
        top: -5px;
        right: 0;
        padding: 1px 0px;
        background-color: red;
        box-shadow: 0 0 10px red;
    }

    100% {
        background-color: red;
        opacity: 1;
        top: -5px;
        width: 0%;
    }
}