@font-face {
    font-family: 'Roboto Regular';
    src: url('../font/Roboto-Regular.ttf') format('truetype');
    font-display: fallback;
}

@font-face {
    font-family: 'Roboto Medium';
    src: url('../font/Roboto-Medium.ttf') format('truetype');
    font-display: fallback;
}

body {
    overflow: hidden;
}

.app {
    background-color: white;
    margin: auto;
    font-weight: 300;
    text-align: center;
}

.d-none {
    display: none !important;
}

.cursor-pointer {
    cursor: pointer;
}

#player-image {
    position: relative;
    display: flex;
}

#image {
    transition: opacity 1s;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

#spectrum {
    transition: opacity 1s;
    position: absolute;
    pointer-events: none;
}

.fadeIn {
    opacity: 1 !important;
}

.fadeOut {
    opacity: 0 !important;
}