: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: lightblue;
    background-image: url("/davidpages/img/texture/black-linen.png");
}
#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:not(:disabled) {
    cursor: pointer;
}

.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;
    cursor: not-allowed;
}

#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 {
    /* height: 100%; */

    flex: 1 1 auto; /* Take up ALL remaining space */
    display: flex;
    
    /* align-items: start; */
    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;
}

#page-canvas {
    /* Undo default img style */
    /* all: revert; */
    
    display: block;
    /* max-width: 100%; */
    /* max-height: 100%; */
}

#navbar img {
    /* Prevents default browser image ghost-dragging */
    -webkit-user-drag: none;
    user-select: none;
    /* Makes mouse clicks pass right through the image to the parent button */
    /* pointer-events: none; */
}