@font-face {
    font-family: 'Geist Mono';
    src: url('./fonts/GeistMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('./fonts/GeistMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --background: rgb(247, 247, 247); /* slate-100-like */
    --foreground: rgb(13, 13, 13);    /* near-black */
    --accent: rgb(50, 178, 255);
    --desktop-background: rgba(127, 127, 127, 0.1);
    --stave-background: rgb(241, 241, 241);
    --stave-foreground: rgb(55, 55, 55);    /* dark gray */
    --font-mono: monospace;
    --app-padding: 1.75rem; /* 7 * 0.25rem */
    --bbox-width: 844px;
    --bbox-height: 390px;
    --icon-button-size: 2.5rem;
    --icon-button-size-alt: 2rem;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: 'Geist Mono', monospace;

}

.main {
    /* DOUBLE-CHECK THIS */
    min-height: 100dvh; /* to make mobile browser's address bar disappear */
}

/* Small viewport: full screen with padding */
#app-bounds {
    padding: var(--app-padding);
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

/* Large viewport: centered card */
@media (min-width: 1001px) and (min-height: 501px) {
    body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        background-color: var(--desktop-background);
    }                                                                          
                                                                            
    #app-bounds {
        width: var(--bbox-width);
        height: var(--bbox-height);
        background-color: var(--background);
        border: 1px solid rgba(13, 13, 13, 0.3);
        border-radius: 0.5rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

button {
    all: unset;
    cursor: default;
}