.logo_lia {
    /* background-color: rgba(255, 255, 255, 0.3);  */
    width: 9%; 
    height: 9%;
    /* padding: 1%; */
}

.border_grow_shrink {
    /* border-radius: 10px;
    border-right: 2px solid #ffbb05;
    border-left: 2px solid #ffbb05;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333; */
}

.border_grow_shrink::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid transparent;
    animation: animate_border_grow_top_right_leave 1000ms linear forwards;

}

.border_grow_shrink:hover::before {
    animation: animate_border_grow_top_right_hover 1000ms linear forwards;
}

@keyframes animate_border_grow_top_right_hover {
    0% {
        width: 0;
        height: 0;
        border-top-color: #2196F3;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    50% {
        width: 100%;
        height: 0;
        border-top-color: #2196F3;
        border-right-color: #2196F3;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    100% {
        width: 100%;
        height: 100%;
        border-top-color: #2196F3;
        border-right-color: #2196F3;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}

@keyframes animate_border_grow_top_right_leave {
    0% {
        width: 100%;
        height: 100%;
        border-top-color: #2196F3;
        border-right-color: #2196F3;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    50% {
        width: 100%;
        height: 0;
        border-top-color: #2196F3;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    100% {
        width: 0%;
        height: 0%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}

.border_grow_shrink::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    background: transparent;
    border: 2px solid transparent;
    animation: animate_border_grow_bottom_left_leave 1000ms linear forwards;
}

.border_grow_shrink:hover::after {
    animation: animate_border_grow_bottom_left_hover 1000ms linear forwards;
}

@keyframes animate_border_grow_bottom_left_hover {
    0% {
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #2196F3;
    }

    50% {
        width: 0;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #2196F3;
        border-left-color: #2196F3;
    }

    100% {
        width: 100%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #2196F3;
        border-left-color: #2196F3;
    }
}

@keyframes animate_border_grow_bottom_left_leave {
    0% {
        width: 100%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #2196F3;
        border-left-color: #2196F3;
    }

    50% {
        width: 0%;
        height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #2196F3;
    }

    100% {
        width: 0;
        height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}

.lia_text {
    color: #ffbb05;
    background-color: #bbbbbb88;
}

.sang_text {
    color: #333;
    background-color: #ffbb0588;
}