.btn-fetch {
    cursor: pointer;
}
.spinner-circle-material-svg {
    animation: spinner-svg-spinner 1.5s linear infinite;
    height: 54px;
    width: 54px;
}

.spinner-circle-material-svg .circle {
    animation: spinner-svg-progress 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite, spinner-svg-colors 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    fill: none;
    stroke: #db3236;
    stroke-linecap: round;
    stroke-width: 2;
}

.logo {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    fill: navy;
}

    .logo.shrink {
        height: 100px;
    }

@keyframes spinner-svg-spinner {
    0% {transform: rotate(-110deg);}

    20% {transform: rotate(-70deg);}

    60% {transform: rotate(90deg);}

    100% {transform: rotate(250deg);}
}

@keyframes spinner-svg-progress {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    20% {
        stroke-dasharray: 1, 150;
        stroke-dash-offset: 0;
    }

    60% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes spinner-svg-colors {
    0% {
        stroke: #db3236;
    }

    23% {
        stroke: #db3236;
    }

    27% {
        stroke: #4885ed;
    }

    48% {
        stroke: #4885ed;
    }

    52% {
        stroke: #3cba54;
    }

    73% {
        stroke: #3cba54;
    }

    77% {
        stroke: #f4c20d;
    }

    98% {
        stroke: #f4c20d;
    }
}