html {
    scrollbar-width: none;
}

body {
    margin: 0;

    :root[data-crystal-color-scheme='light'] & {
        background: var(--stark-color-body, #ffffff);
    }

    :root[data-crystal-color-scheme='dark'] & {
        background: var(--stark-color-body, #292929ff);
    }

    input:-webkit-autofill {
        box-shadow: 0 0 0 1000px white inset;
    }

    .hidden {
        display: none;
    }

    .background {
        :root[data-crystal-color-scheme='light'] & {
            background: var(
                --stark-background-gradient,
                linear-gradient(300deg, rgba(242, 247, 255, 0.18) 0%, rgba(242, 247, 255, 0) 100%),
                linear-gradient(160deg, rgba(232, 241, 255, 0.2) 0%, rgba(232, 241, 255, 0) 50%),
                linear-gradient(45deg, rgba(238, 233, 255, 0.9) 0%, rgba(238, 233, 255, 0.4) 100%),
                #fff
            );
        }

        :root[data-crystal-color-scheme='dark'] & {
            background: var(--stark-background-gradient, transparent);
        }
    }

    .splash-screen {
        min-height: 100dvh;

        :root[data-crystal-color-scheme='light'] & {
            .just-logo {
                background-image: url(//static.crystal.ai/assets/stark/animations/crystal/looping-glyph.gif);
            }
        }

        :root[data-crystal-color-scheme='dark'] & {
            .just-logo {
                background-image: url(//static.crystal.ai/assets/stark/animations/crystal/looping-glyph-white.gif);
            }
        }

        .just-logo {
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            background-size: cover;
        }
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scale-logo {
    0% {
        transform: scale(65%);
    }

    100% {
        transform: scale(100%);
    }
}