/* (A) VARS */
:root {
  --color-black: #333;
  --color-grey: #767676;
  --color-white: #fff;
  --color-red: #c51212;
  --color-green: #04836b;
  --color-blue: #063cb7;
  --color-bg-page: #000;
  --color-bg-head: #1671e1;
}

/* (B) GOOGLE MATERIAL ICONS - https://fonts.google.com/icons */
@font-face{font-family:"Material Icons";src:url(maticon.woff2) format("woff2")}
.mi{font-family:"Material Icons";font-weight:400;font-style:normal;text-decoration:none;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}

/* (C) GLOBAL */
html, body {
  max-width: 1000px;
  margin: 0 auto; padding: 0;
  background: var(--color-bg-page);
}
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
div.error {
  margin: 5px; padding: 5px;
  color: var(--color-white);
  background: var(--color-red);
}
.ninja { display: none; }

/* (D) FORM */
/* (D1) BUTTONS */
.btn-ico, .btn-ico-grey, .btn-red, .btn-green, .btn-blue {
  border: 0; padding: 10px;
  cursor: pointer;
  color: var(--color-white);
}
.btn-red, .btn-green, .btn-blue { font-size: 1.1em; }
.btn-ico, .btn-ico-grey { background: 0; font-size: 2em; }
.btn-ico-grey { color: var(--color-grey); }
.btn-red { background: var(--color-red); }
.btn-green { background: var(--color-green); }
.btn-blue { background: var(--color-blue); }

/* (D2) FORM FIELDS */
.form-field {
  font-size: 1.1em;
  display: block;
  width: 100%;
  padding: 10px;
}

/* (E) DIALOG */
#cb-info {
  position: fixed; top: 50%; left: 50%; z-index: 999;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  color: var(--color-white);
  transition: opacity 0.4s;
  visibility: hidden; opacity: 0
}
#cb-info.ok, #cb-info.no {
  visibility: visible; opacity: 1;
}
#cb-info.ok { background: var(--color-blue); }
#cb-info.no { background: var(--color-red); }
#cb-info-ico { font-size: 3em; }

/* (F) THIS APP */
/* (F1) CAMERA LIVE FEED */
#cam-feed {
  flex: 2;
  width: 100%;
  object-fit: cover; /* cover contain fill scale-down; */
}

/* (F2) CAMERA CONTROLS */
#cam-btn {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 150px;
}
#cam-btn button {
  background: 0;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
}
#cam-btn button:disabled { color: var(--color-grey); }
#cam-pics { font-size: 34px; }
#cam-snap { font-size: 64px; }

/* (F3) LANDSCAPE MODE CAMERA */
@media (orientation: landscape) {
  #cam-wrap {
    display: flex;
    max-width: 100vw;
  }
  #cam-feed {
    flex: none;
    flex-shrink: 1;
  }
  #cam-btn {
    height: auto;
    padding: 20px;
    grid-template-columns: auto;
  }
}

/* (F4) FLASH! */
#cam-flash {
  position: fixed; z-index: 999;
  width: 100vw; height: 100vh;
  top: 0; left: 0;
  background: var(--color-white);
  transition: opacity 0.1s;
  visibility: hidden;
  opacity: 0;
}
#cam-flash.show {
  visibility: visible;
  opacity: 1;
}

/* (F5) GALLERY */
.cb-head {
  position: sticky;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background: var(--color-bg-head);
  padding: 10px 20px;
}
.cb-head-title {
  flex-grow: 1;
  margin: 0;
  font-size: 1.7em;
}

/* (F6) GALLERY ITEMS */
#gallery-pics {
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(2, auto);
}
#gallery-pics img {
  width: 100%;
  object-fit: cover;
}
#gallery-pics .pic {
  position: relative;
}
#gallery-pics .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
}
#gallery-pics .btn button {
  color: var(--color-white);
  border: 0;
  background: 0;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;
}