html, body{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #4e0081;
}


a{
    text-decoration: none;
}

p{
    font-size: 25px;
}

.gato{
    position: relative;
    height: 170px;
    width: 192px;
    cursor: pointer;
}

.cara{
    position: relative;
    height: 100%;
    width: 100%;
    background: #161616;

    border-radius: 50%;
}

.olho{
    position: absolute;

    top: 35%;
    height: 30%;
    width: 31%;

    background-color: #fff;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}

.olho::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    height: 0;
    width: 100%;
    border-radius: 0 0 50% 50%/0 0 40% 40%;
    background-color: #161616;
    animation: blink 4s infinite ease-in;
}

@keyframes blink{
    0%{
        height: 0;
    }
    90%{
        height: 0;
    }
    92.5%{
        height: 100%;
    }
    95%{
        height: 0;
    }
    97.5%{
        height: 100%;
    }
    100%{
        height: 0;
    }
}

.olho::before{
    content: "";
    position: absolute;
    top: 10%;
    width: 15%;

    background: #fff;
    border-radius: 50%;
}

.olho-esquerdo{
    left: 0;
}
.olho-esquerdo::before{
    left: -5%;
}

.olho-direito {
    right: 0;
}
.olho-direito::before {
    right: -5%;
}

.pupila{
    position: absolute;
    top: 25%;
    height: 50%;
    width: 20%;
    background: #161616;
    border-radius: 50%;
    animation: mexerOsZOIO 4s infinite;
}

@keyframes mexerOsZOIO{
    0%{
        transform: translate(0);
    }
    5%{
        transform: translate(50%, -25%);
    }
    10%{
        transform: translate(50%, -25%);
    }
    15%{
        transform: translate(-100%, -25%);
    }
    20%{
        transform: translate(-100%, -25%);
    }
    25%{
        transform: translate(0,0);
    }
    100%{
        transform: translate(0,0);
    }
}

.pupila::after{
    content: "";
    position: absolute;
    top: 30%;
    right: -5%;
    height: 20%;
    width: 35%;

    border-radius: 50%;
    background: #fff;
}

.olho-esquerdo .pupila{
    right: 30%;
}

.olho-direito .pupila {
    left: 30%;
}

.nariz{
    position: absolute;
    top: 60%;
    left: 50%;
    right: -5%;
    height: 10%;
    width: 15%;

    background: #fff;
    transform: translateX(-50%);
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
}

.orelha{
    position: absolute;
    top: -30%;
    height: 60%;
    width: 25%;

    background: #fff;
}

.orelha::after, .orelha::before{
    content: "";
    position: absolute;

    bottom: 24%;
    height: 10%;
    width: 5%;

    border-radius: 50%;
    background: #161616;
}

.orelha::after{
    transform-origin: 50% 100%;
}

.orelhaesquerda{
    left: -7%;
    border-radius: 70% 30% 15% 15%/100% 100% 15% 15%;
    transform: rotate(-15deg);
}

.orelhaesquerda::before, .orelha::after{
    right: 10%;
}
.orelhaesquerda::after{
    transform: rotate(-45deg);
}

.orelhadireita{
    right: -7%;
    border-radius: 30% 70% 15% 15%/100% 100% 15% 15%;
    transform: rotate(15deg);
}

.orelhadireita::after, .orelhadireita::before{
    left: 10%;
}

.orelhadireita::after{
    transform: rotate(45deg);
}

.boca{
    color: white;
    position: relative;
    top: 188px;
    left: 15px;
    font-size: 70px;

    transform: rotate(90deg);
}