:root {
  --navbar-height: 50px;
  --divider-color: #e5e5e5;
}

/**********************************************************************/

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

vbox, hbox, .vbox, .hbox {display:flex;}
vbox, .vbox {flex-direction:column;}
hbox, .hbox {flex-direction:row;}

.page { display:none; flex:1; flex-direction:column; }
body[x-page="scan"]         #pg-scan          {display:flex;}
body[x-page="result-ok"]    #pg-result-ok     {display:flex;}
body[x-page="result-err"]   #pg-result-err    {display:flex;}
body[x-page="dbg"]          #pg-dbg           {display:flex;}

/**********************************************************************/

body {
  display: flex;
  flex-direction: column;
}

#menu {
  flex: 0;
  flex-basis: var(--navbar-height);
  background: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 5px 10px;
  border-bottom: 1px solid var(--divider-color);
}

#logo {
  flex: 1;
  display: block;
}

#menu-links a {
  display: block;
  margin-right: 10px;
  padding: 5px;
  color: #333;
}


#cam {
  flex: 1;
  justify-self: stretch;
  align-self: stretch;
}

video {
  max-width: 100%;
}


#btns {
  flex: 0;
  display: flex;
  align-items: center;
  padding: 1em 0;
  border-top: 1px solid var(--divider-color);
}

.btn {
  padding: 10px 30px;
  background: blue;
  color: white;
  border: none;
  border-radius: 100px;
  font-size: 1.5rem;
  cursor: pointer;
}

.btn-alt {
  padding: 5px 15px;
  background: #eee;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  margin-top: 1em;
}

#scan.hide {
  display: none;
}


#pg-result-err {
  padding: 20vh 20vw;
}

#err-msg {
  color: red;
}


#book-meta {
  display: flex;
}

#book-cover {
  width: 40%;
}


#pg-dbg {
  justify-content: stretch;
  align-items: stretch;
}

#dbg {
  font-family: monospace;
  font-size: 0.825rem;
  background: #f2f2f2;
  overflow-y: scroll;
  overflow-x: none;
}