/* Define the default font family for the document */
body {
  font-family: Arial, sans-serif;
  
  /* Remove any margins from the document */
  margin: 0;
  
  /* Hide any content that overflows the container */
  overflow: hidden;
}

/* Define the container that will hold the webcam and canvas elements */
#container {
  /* Position the container relative to its normal position in the document flow */
  position: relative;
  
  /* Set the container to take up the full width and height of the viewport */
  width: 100vw;
  height: 100vh;
}

/* Define the webcam and canvas elements */
#webcam, #canvas {
  /* Position the webcam and canvas elements absolutely within the container */
  position: absolute;
  
  /* Set the top and left offsets of the elements to 0, so they start at the top-left corner of the container */
  top: 0;
  left: 0;
  
  /* Set the width and height of the elements to 100% of the container's dimensions */
  width: 100%;
  height: 100%;
  
  /* Set the object-fit property to cover, so that the video is scaled to fit within the element */
  object-fit: cover;
}

/* Define the Show Log button */
#showLog {
  /* Position the button absolutely in the bottom-right corner of the container */
  position: absolute;
  bottom: 10px;
  right: 10px;
  
  /* Set the font size and padding of the button */
  font-size: 18px;
  padding: 10px;
  
  /* Set the background color and text color of the button */
  background-color: #2196F3;
  color: white;
  
  /* Remove the border from the button */
  border: none;
  
  /* Set the border radius to 5px to round the corners of the button */
  border-radius: 5px;
  
  /* Set the cursor to a pointer when hovering over the button */
  cursor: pointer;
}

/* Define the log element */
#log {
  /* Position the log element absolutely in the bottom-right corner of the container */
  position: absolute;
  bottom: 10px;
  right: 10px;
  
  /* Set the width and height of the log element */
  width: 300px;
  height: 400px;
  
  /* Set the overflow-y property to scroll, so that the log can be scrolled vertically if necessary */
  overflow-y: scroll;
  
  /* Set the background color of the log element to white */
  background-color: white;
  
  /* Set the border of the log element to 1px solid gray */
  border: 1px solid #ccc;
  
  /* Set the border radius to 5px to round the corners of the log element */
  border-radius: 5px;
  
  /* Add padding to the log element */
  padding: 10px;
  
  /* Set the font size of the log element to 14px */
  font-size: 14px;
}

/* Define the hidden class */
.hidden {
  /* Hide any elements with the hidden class */
  display: none;
}