@charset "utf-8";

html,
body,
#root,
#__next {
    width: 100vw;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html,
body,
#root,
#__next {
    height: 100%;
}

/* PWA changes to look&feel to make page behave more like an App than a webpage */
body {
    /* hide scroll bars */
    overflow: -moz-scrollbars-none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    /* enable smooth scrolling */
    -webkit-overflow-scrolling: touch;

    /* disable tap highlight */
    -webkit-tap-highlight-color: transparent;

    /* disable callout */
    -webkit-touch-callout: none;

    /* disable user select */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

/* Set reasonable defaults */
/* Overriding default margin, as these are replacing many <div> elements which do not have a margin */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

/* Remove default stylings from a tags: text color + underline */
a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    outline: none;
    border-width: 0px;
}

#root,
#__next {
    background-color: #222;
}

/* Global vars */
:root {
    --window-bottom-offset: 0px;
    --player-controls-bottom-offset: 0px;
    --player-controls-window-height: 0px;
}