* {
    margin: 0;
}

html,
body {
    background-color: black;
    height: 100%;
}

.container {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.vol {
    position: absolute;
    display: grid;
    bottom: 0;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    z-index: 1;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
}

#button {
    z-index: 1;
	-webkit-tap-highlight-color: transparent;
}

#button:hover { 
    cursor: pointer;    
}

#button > g {
    fill: white;
    transition: opacity 250ms, fill 1s;
}

#button:hover > g {
    opacity: 0.85 !important;
}

#button:not(.loading) > g.loading {
    visibility: collapse;
}

#button.loading > g:not(.loading) {
    visibility: collapse;
}

#button:not(.playing) > g.pause {
    visibility: collapse;
}

#button.playing > g.play {
    visibility: collapse;
}

#button.error > g {
    fill: rgb(255, 55, 55);
    transition: fill 0s;
}

g.play:not(:hover) {
    animation: pulse 1s ease-in-out alternate infinite;
}

g.pause {
    opacity: 0.1;
}

@keyframes pulse {
    0% { opacity: 0.8; }
    100% { opacity: 0.4; }
}