html.loading {
    height: 100%;
}

body.loading {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 0;
    line-height: 1.4;
}

.cat {
    position: relative;
    width: 100%;
    max-width: 20em;
    overflow: hidden;
    background-color: #e6dcdc;
}

.cat::before {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.cat:hover > * {
    animation-play-state: paused;
}

.cat:active > * {
    animation-play-state: running;
}

.cat__head,
.cat__tail,
.cat__body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
}

.cat__head::before,
.cat__tail::before,
.cat__body::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url('https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il');
}

.cat__head::before {
    top: 0;
    right: 0;
    background-position: 100% 0%;
    transform-origin: 0% 100%;
    transform: rotate(90deg);
}

.cat__tail {
    animation-delay: 0.2s;
}

.cat__tail::before {
    left: 0;
    bottom: 0;
    background-position: 0% 100%;
    transform-origin: 100% 0%;
    transform: rotate(-30deg);
}

.cat__body {
    animation-delay: 0.1s;
}

.cat__body:nth-of-type(2) {
    animation-delay: 0.2s;
}

.cat__body::before {
    right: 0;
    bottom: 0;
    background-position: 100% 100%;
    transform-origin: 0% 0%;
}

@keyframes rotating {
    from {
        transform: rotate(720deg);
    }
    to {
        transform: none;
    }
}

.loading-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #e6dcdc;
}