@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Source+Code+Pro&display=swap);

* {
    box-sizing: border-box
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #333;
    color: #ddd;
    font: 11pt 'Noto Sans', Helvetica, Arial, sans-serif;
    font-weight: 400
}

html {
    overflow-y: scroll;
    overflow-x: hidden
}

app-root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: table
}

app-root>div.loading, app-root>div.loading.small-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 72pt;
    font-weight: 700
}

app-root>div.loading.small-screen {
    display: none
}

@media (max-width:480px) {
    app-root>div.loading {
        display: none
    }

    app-root>div.loading.small-screen {
        display: table-cell;
        animation: spin-hourglass 5s infinite
    }
}

@keyframes spin-hourglass {
    0% {
        transform: rotate(0)
    }

    20% {
        transform: rotate(0)
    }

    25% {
        transform: rotate(180deg)
    }

    70% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(360deg)
    }
}