:root {
    --col-100: 100%;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    justify-content: center;
}

.col-100 {
    --col: 100%;
    width: var(--col);
}

.posa {
    position: absolute;
}

.posr {
    position: relative;
}

img {
    width: 100%;
    display: block;
    height: auto;
}

[class*='col-'] {
    width: calc(var(--col));
}

.img-container {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.cat {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

.eye {
    position: absolute;
    width: 19%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
}

.eye img {
    width: 100%;
    height: auto;
}


.eye_left {
    left: 34%;
    top: 38%;
    animation: spin_left 1.2s ease-in-out infinite;
    ;
}

.eye_right {
    left: 66%;
    top: 38%;
    animation: spin_right 1.2s linear infinite;
}

@keyframes spin_right {
    100% {
        transform: translate(-50%, -50%) rotate(-360deg) skew(10deg);
    }
}

@keyframes spin_left {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0) rotate(0deg) scale(99%);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-2%) rotate(100deg) scale(120%);
    }
}

.cat_click:hover {
    cursor: crosshair
}

.img-container {
    position: relative;
}

.speech-bubble {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.213);
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: bold;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.img-container:hover .speech-bubble {
    opacity: 1;
}

.speech-bubble.active {
    opacity: 1;
    z-index: 1000;
}

.headline {
    display: flex;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    perspective: 1000px;
}

.headline span {
    display: inline-block;
    transform: rotateY(90deg);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    background-color: black;
    padding: 0.115em;
    color: white;
}

.headline.animate span {
    transform: rotateY(0deg);
    opacity: 1;
}

.headline:hover span {
    animation: wave 0.5s ease forwards;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.headline span:nth-child(2n+1) {
    animation: colorwheel 2s infinite;
}

@keyframes colorwheel {
    100% {
        color: red;
    }

    70% {
        color: orange;
    }

    50% {
        color: yellow;
    }

    30% {
        color: green;
    }

    10% {
        color: blue;
    }

}

.blog_header {
    position: relative;
    opacity: 1;
    width: 100%;
    animation: blog 1s infinite;
}

.blog_header h4 {
    font-size: 0.75em;
    margin: 0 auto;
    text-align: center;
}

.blog_header h4:before {
    content: "↓";
    display: table;
    width: 3px;
    height: 3px;
    font-size: 2em;
    font-weight: bold;
    color: var(--bg-red);

}

.blog_header h4:after {
    content: "↓";
    display: table;
    width: 3px;
    height: 3px;
    font-size: 2em;
    font-weight: bold;
    color: rgb(197, 32, 32);

}

.blog_header:hover {
    transition: opacity 10s ease;
}

@keyframes blog {
    100% {
        bottom: 1%;
    }

    50% {
        bottom: 0%;
    }

    0% {
        bottom: -1%;
    }
}