.splash-screeen {
    display: flex;
    flex: 1;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    justify-content: center;
    align-items: center;
}

    .splash-screeen .sc-container {
        background-color: var(--system-white);
        display: flex;
        flex: 1;
        width: 100vw;
        height: 100vh;
        align-items: center;
        justify-content: center;
        font-size: 7rem;
        color: #0046e6;
    }

        .splash-screeen .sc-container .box {
            height: 200px;
            width: 100vw;
            background: rgb(0,0,0);
            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--system-white) 44%, var(--system-white) 100%);
            position: absolute;
            margin-top: 210px;
            animation-name: movingOpacity;
            animation-duration: 2.5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
        }

@keyframes movingOpacity {
    from {
        margin-top: 210px
    }

    to {
        margin-top: 40px
    }
}