:root{
    --logo-size: 300px;
}

.logo-wrapper{
    display: inline-block;
    position: relative;
    width: var(--logo-size);
    height: var(--logo-size);
    /*margin: 0 auto;*/
}

.logo-img{
    height: var(--logo-size);
    width: var(--logo-size);
    
    z-index: 1;
    filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));

    position: absolute;
    top: 0;
    left: 0;
}

.logo-shape-wrapper{
    filter: drop-shadow(0px 0px 5px #0044ff);
}

.logo-shape{
    box-sizing: border-box;
    height: var(--logo-size);
    width: var(--logo-size);
    border-radius: 50%;
    background-image: linear-gradient(in hsl 180deg, rgb(255, 100, 177) 25%, rgb(0, 255, 255) 90%);
    animation: risingSquare 20s infinite reverse linear;
}

@keyframes risingSquare {
    0%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%,
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 100%, 0 100%);
    }
    12.5%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%, 
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%);
    }
    25%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%, 
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 100%, 0 100%);
    }
    37.5%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%, 
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 100%, 0 100%);
    }
    50%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%, 
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 100%, 0 100%);
    }
    62.5%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%,
            100% 100%, 0 100%);
    }
    75%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 50%, 0 50%, 0 55%, 100% 55%,
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%,  
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 100%, 0 100%);
    }
    87%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%,
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 100%, 0 100%);
    }
    100%{
        clip-path: polygon(
            0 0, 100% 0, 
            100% 40%, 0 40%, 0 40%, 100% 40%, 
            100% 40%, 0 40%, 0 44%, 100% 44%, 
            100% 50%, 0 50%, 0 55%, 100% 55%,
            100% 60%, 0 60%, 0 66%, 100% 66%, 
            100% 70%, 0 70%, 0 77%, 100% 77%, 
            100% 80%, 0 80%, 0 88%, 100% 88%, 
            100% 90%, 0 90%, 0 99%, 100% 99%, 
            100% 100%, 0 100%, 0 100%, 100% 100%, 
            100% 100%, 0 100%);
    }
}