:root {
    --blue-cover: rgb(70, 189, 211);
    /* font-size: 2em; */
}

/*davids font*/
@font-face {
    font-family: 'Davids3x3';
    src: url('/davidpages/font/Vols3x3.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevents the body itself from ever scrolling */

    background-color: lightsteelblue;

}

/* notebook-specific styling. */
/*.blue {
    background-color: magenta;
}

.spiral {
    background-color: magenta;
}*/

#book-container {
    display: flex;
    flex-direction: column;
    height: 100dvh; /* Fill the whole screen */
    overflow: hidden;  /*Prevent the body from scrolling */
}

/* NAVBAR */

#navbar {
    display:flex;
    /* flex-flow: row wrap; */
    justify-content: space-between;
}

.nav-item {
    /* flex: 0 0 auto; Don't shrink, don't grow beyond content */
    padding: 10px;
}

.nav-item#left {
    flex: 1;

    display: flex;
    justify-content: flex-start;
}

.nav-item#center {
    min-width: max-content;
}

.nav-item#right {
    flex: 1;
    
    text-align: right;

    /* Don't shrink */
    min-width: max-content;
}

#back-holder {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CONTROLS */

.btn {
    width: 2.5em;
    height: 2.5em;
    /* justify-content: center; */
    /* align-items: center; */

    border: 2px outset var(--blue-cover);
    border-radius: 5px;

    background-color: lightblue;
}

.btn:active {
    background-color: skyblue;
    border: 2px inset var(--blue-cover);
    border-radius: 5px;
}

.btn:disabled {
    background-color: silver;
    border: 2px inset lightgray;
    border-radius: 5px;
}

#page-label-container {
    display: inline-block;
    /* width: 80px; */
    width: 5em;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    /* Keep the numbers centered */
    text-align: center;

    font-family: 'Courier New', monospace;
}

/* TILTS */

/* NOTEBOOK IMAGE AREA */

#stage {
    flex: 1 1 auto; /* Take up ALL remaining space */
    display: flex;
    align-items: start;  /* page image immediately below controls */
    justify-content: center; /* Center image horizontally */
    overflow: hidden;
}

#page-image {
    /* Undo default img style */
    all: revert;
    
    display: block;
    max-width: 100%;
    max-height: 100%; /* Now 100% of the REMAINING stage space */
    object-fit: contain;
}