/* importing sugar toolkit */
@import './sugar.css';

body {
    background: sugar.color(main, background);

    &.initial-loading .content {
        display: none;
    }
}

/* s-appear hide by default */
[s-appear] {
    opacity: 0;
}
[s-appear][appear] {
    opacity: 1;
}

/* welcome page styling */
.content {
    position: absolute;
    width: 90vw;
    max-width: 55ch;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    &:before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 100vh;
        transform: translate(-50%, -50%);
        background-image: url('https://picsum.photos/1600/900');
        background-size: cover;
        filter: saturate(0%);
        opacity: 0.04;
    }
}

/* logo */
.logo {
    width: 150px;

    svg [fill='white'] {
        fill: sugar.color(main, --darken 10);
    }
    svg [fill='#FEBD0F'] {
        fill: sugar.color(accent);
    }

    @sugar.theme (dark) {
        svg [fill='white'] {
            fill: sugar.color(main, text);
        }
        svg [fill='#FEBD0F'] {
            fill: sugar.color(accent);
        }
    }
}