body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    position: absolute;
}


    #cam, #captured-image {
      max-width: 100%;
      max-height: 50vh; /* 50% da altura da tela */
      object-fit: contain; /* Evita distorção */
    }
    #capture, #capture-again, #switch-camera, #upload-image {
      display: none;
    }
    #cam.active, #videoBar.active, #capture.active, #captured-image.active, #capture-again.active, #switch-camera.active, {
      display: block;
    }
    #cam.hidden, #videoBar.hidden, #captured-image.hidden {
      display: none;
    }
    .video-container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .material-icons {
      position: absolute;
      font-size: 36px;
      color: #FFFFFF;
      text-shadow: 1px 1px 1px #000000;
      cursor: pointer;
      bottom: 10px;
    }
    #capture-icon {
      bottom: 10px;
    }
    #switch-camera-icon {
      bottom: 10px;
    }