/**
 * @license
 * Copyright 2018 Google LLC. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================================
 */

/******************************************************
 * Stylesheet by Jason Mayes 2021.
 *
 * Got questions? Reach out to me on social:
 * Twitter: @jason_mayes
 * LinkedIn: https://www.linkedin.com/in/creativetech
 *****************************************************/

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
     display: block;
 }
 
 body {
     line-height: 1;
 }
 
 ol, ul {
     list-style: none;
 }
 
 blockquote, q {
     quotes: none;
 }
 
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: '';
     content: none;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 
 body {
   font-family: 'Roboto', helvetica, arial, sans-serif;
   font-weight: 100;
   color: #f8f7fa;
   background-color: #000;
   width: 100%;
   height: 100%;
   text-align: center;
 }
 
 h1 {
   color: #f8f8f8;
   font-weight: 100;
   font-size: 22pt;
 }
 
 header {
   background: rgba(0, 0, 0, 0.8);
   height: 100px;
   padding: 50px 0 0 100px;
 }
 
 header, footer {
   clear: both;
   text-align: left;
 }
 
 label, select, p {
   font-size: 120%;
 }
 
 label, select {
   display: block;
   margin: 15px auto;
   min-width: 150px;
 }
 
 header p {
   color: #717171;
   font-style: italic;
   padding: 5px 0 0 0;
   font-weight: 600;
   font-size: 115%;
 }
 
 video {
   clear: both;
   display: block;
   z-index: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   background-color: transparent;
 }
 
 section {
   opacity: 1;
   transition: opacity 500ms ease-in-out;
 }
 
 section {
   position: fixed;
   top: 150px;
   left: 0;
   bottom: 0;
   right: 0;
 }
 
 .circularButton {
   border-radius: 50%;
   background-color: #372e31;
   border: 2px solid #fff;
   display: inline-block;
   cursor: pointer;
   margin: 0px auto;
   text-indent: -1000px;
   overflow: hidden;
 }
 
 .removed {
   display: none;
 }
 
 .disabled {
   opacity: 0.25;
 }
 
 .invisible {
   opacity: 0;
 }
 
 .videoView {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 .videoView p {
   position: absolute;
   padding: 5px;
   background-color: rgba(255, 0, 0, 0.85);
   color: #FFF;
   border: 1px solid rgba(255, 0, 0, 0.7);
   z-index: 2;
   font-size: 12px;
   margin: 0;
 }
 
 .highlighter {
   background: transparent;
   border: 3px solid #ff0000;
   z-index: 1;
   position: absolute;
 }
 
 .prompt {
   top: 30%;
   width: calc(100% - 120px);
   margin: 0 60px;
   text-align: center;
   position: fixed;
 }
 
 #webcamButton {
   width: 180px;
   height: 180px;
   top: calc(50% - 90px);
   left: calc(50% - 90px);
   position: absolute;
   z-index: 10;
   background-image: url('https://cdn.glitch.com/2f967c1e-2fd2-416a-a512-afb9fe40d1b1%2Fcam.png?v=1614817566978');
   background-position: center;
   background-repeat: no-repeat;
 }
 
 #step3 p {
   color: #cdcdcd;
   position: fixed;
   bottom: 50px;
   text-align: center;
   margin: 40px;
 }
 
 #step3 p span {
   font-weight: bold;
 }
 
 #monitoring {
   color: #e92264;
   font-size: 200%;
   font-weight: bold;
   font-style: normal;
   text-transform: lowercase;
   position: absolute;
   right: 20px;
   top: 60px;
   transition: opacity 500ms ease-in-out;
 }