@import "./resert.css";

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;500&display=swap');

.block-animation {
    background: url(/img/flex/frog1.png);
    display: block;
    width: 250px;
    height: 250px;
    overflow: visible;
}

.frog3 {
    background: url(/img/flex/frog3.png);
    display: block;
    width: 250px;
    height: 250px;
    position: absolute;
    opacity: 0%;
}

.frog2 {
    display: block;
    width: 250px;
    height: 250px;
    opacity: 0%;
}

.block-animation:hover {
    background: url(/img/flex/frog1.png);
    overflow: visible;
}

.block-animation:hover .frog3 {
    opacity: 100%;
    overflow: visible;
    animation: frog 2s reverse;
}

@keyframes frog {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 50px;
    }
}

.text {
    position: absolute;
    display: block;
    margin-left: 120px;
    margin-top: 30px;
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 20px;
    color: green;
    text-shadow: 1px 1px 2px green;
    opacity: 0%;
}

.block-animation:hover .text {
    opacity: 100%;
}

.block-animation:active {
    background: url(/img/flex/frog1.png);
    overflow: visible;
}

.block-animation:active .frog3 {
    opacity: 0%;
}

.block-animation:active .frog2 {
    opacity: 100%;
    margin-left: auto;
    animation: princess 8s forwards;
}

@keyframes princess {
    0% {
        transform: scaleX(1);
        margin-top: 160px;
        width: 50px;
        height: 50px;
    }

    15% {
        transform: scaleX(1);
        margin-top: 60px;
        width: 100px;
        height: 100px;
    }

    25% {
        transform: scaleX(1);
        margin-top: 0px;
        width: 150px;
        height: 150px;
    }

    35% {
        transform: scaleX(1);
        width: 200px;
        height: 200px;
    }

    45% {
        transform: scaleX(1);
        width: 250px;
        height: 250px;
    }

    65% {
        transform: scaleX(-1);
        width: 200px;
        height: 200px;
    }

    75% {
        transform: scaleX(-1);
        width: 150px;
        height: 150px;
    }

    85% {
        transform: scaleX(-1);
        width: 100px;
        height: 100px;
    }

    95% {
        transform: scaleX(-1);
        width: 50px;
        height: 50px;
    }

    100% {
        transform: scaleX(-1);
        width: 0px;
        height: 0px;
    }
}

.text1 {
    position: absolute;
    margin-left: 230px;
    margin-top: 160px;
    top: 90px;
    left: 10px;
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 15px;
    color: green;
    text-shadow: 1px 1px 2px green;
    opacity: 0%;
}

.block-animation:active .text {
    opacity: 0%;
}

.block-animation:active .text1 {
    opacity: 100%;
    animation: princessText 8s forwards;
}

@keyframes princessText {
    0% {
        opacity: 0%;
    }

    50% {
        opacity: 100%;
    }

    65% {
        opacity: 100%;
    }

    75% {
        opacity: 0%;
    }

    100% {
        opacity: 0%;
    }
}