*{
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
            .container{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100vh;
                flex-wrap: wrap;
            }

            .container > div{
                opacity: 0;
                animation-name: FADEIN;
                animation-delay: 200ms;
                animation-duration: 600ms;
                animation-iteration-count: 1;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;
            }

            .logo{
                width: 146px;
                height: 109px;
                margin-bottom: 16px;
            }

            .blocks{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
            }

            span{
                display: inline-block;
                height: 24px;
                width: 24px;
                border-radius: 24px;
                background-color: #E1D9F5;
                animation-duration: 2400ms;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            span.animate{
                animation-name: MORPH;
            }

            @keyframes MORPH {
                0%   { border-radius: 20px;}
                10%   { border-radius: 4px;}
                25%  { rotate: -200deg; background-color: #CCBFE9; }
                40%  { border-radius: 20px; background-color: #E1D9F5;}
                60%  { rotate: -200deg; }
                65%  { rotate: -180deg; }
            }

            @keyframes FADEIN {
                0%   { opacity: 0; transform: translateY(30px);}
                100%   { opacity: 1; transform: translateY(0);}
            }