:root {
    --bg: #ffffff;
    --fg: #343a40;
    --accent-left: #ff9899;
    --accent-right: #fde5b4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #343a40;
        --fg: #ffffff;
        --accent-left: #743ad5;
        --accent-right: #d53a9d;
    }
}

html,
body,
#app {
    width: 100%;
    height: 100%;
}

svg {
    width: 100%;
    height: auto;
    fill: currentColor;
}

@media (prefers-reduced-motion) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

body {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--bg);
}

#stage {
    position: relative;
    width: 80%;
    height: 80%;
    /* padding: 10px; */

    /* background: linear-gradient(to left, var(--accent-right), var(--accent-left)); */
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

#playback .icon {
    position: absolute;
    max-width: min(10vw, 10vh);
    min-width: 2rem;
    width: 5rem;
    height: auto;

    left: 50%;
    transform: translateX(-50%);
    bottom: 3%;

    background: var(--bg);
    color: var(--fg);
    /* border: 10px solid var(--bg); */
    border-radius: 15%;

    opacity: .2;
    transition: opacity .5s;
}

#playback[data-playing] #play {
    display: none;
}

/* Needs repetiton for a bug in Safari */
#playback:not([data-playing]) #pause {
    display: none;
}

@starting-style {
    #playback .icon {
        opacity: .2;
    }
}

@media (hover: hover) {
    #playback .icon:hover {
        opacity: 1;
    }
}