@import "normalize.css";
@import "vars.css";
@import "components/aside.css";
@import "components/editor.css";
@import "components/header.css";
@import "components/notes.css";
@import "components/folder-header.css";
@import "components/folder-settings.css";
@import "components/status-bar.css";

body {
    height: 100vh;
    margin: 0;
    display: flex;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fff;
}

.drag-bar {
    position: absolute;
    width: 100%;
    height: 35px;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-app-region: drag;
}

/**
* SVG icons styles
*/
svg {
    fill: currentColor;
    vertical-align: middle;
    max-height: 100%;
}

.clearfix::after {
    content: '';
    display: table;
    clear: 'both';
}

.hide {
    display: none !important;
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }

    15% {
        transform: translateX(-1%) rotate(-5deg);
    }

    30% {
        transform: translateX(3%) rotate(3deg);
    }

    45% {
        transform: translateX(-1%) rotate(-3deg);
    }

    60% {
        transform: translateX(3%) rotate(2deg);
    }

    75% {
        transform: translateX(-1%) rotate(-1deg);
    }

    100% {
        transform: translateX(0%);
    }
}

.wobble {
    animation-name: wobble;
    animation-duration: 400ms;
    animation-iteration-count: 1;
}
