body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #0e5c79, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.container {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    /* transform: rotate(45deg); */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

@font-face {
    font-family: trial;
    src: url('/static/fonts/Cheetah-Kick.otf');
    font-weight: normal;
}

h1 {
    font-family: trial;
    font-size: 70px;
}

@keyframes text-gradient {
    0% {
        background-position: 47% 0%
    }

    50% {
        background-position: 54% 100%
    }

    100% {
        background-position: 47% 0%
    }
}

.text-transition {
    background: linear-gradient(180deg, #9ac99a, #3bacd6);
    background-size: 400% 400%;

    -webkit-animation: text-gradient 6s ease infinite;
    -moz-animation: text-gradient 6s ease infinite;
    animation: text-gradient 6s ease infinite;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}