@font-face {
  font-family: "Poppins-Light";
  src: url(../assets/fonts/Poppins-Light-msdf/Poppins-Light.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Poppins-Bold";
  src: url(../assets/fonts/Poppins-Bold-msdf/Poppins-Bold.ttf);
  font-style: normal;
}

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

#scan-frame-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#scan-frame {
  position: relative;
  z-index: 1;
  border-radius: 40px;
  border: solid 3px white;
  width: 270px;
  height: 270px;
}

@media (min-width: 600px) {
  #scan-frame {
    width: 400px;
    height: 400px;
  }
}

#reader {
  width: 100vw;
  height: 100vh;
  position: absolute !important;
  top: 0px;
  left: 0px;
  z-index: 0;
}

#reader>video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#reader__scan_region>video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

#progress-bar-container {
  position: absolute;
  z-index: 2;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100vh;
}

.hidden {
  display: none !important;
}

.progress-bar-container-shown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#progress-bar-text {
  font-size: 30px;
  color: white;
  text-shadow: 2px 2px 5px #000000;
  font-family: 'Poppins-Bold';
}

#progress-bar {
  width: 80%;
  border-radius: 10px;
  background-color: lightgray;
  height: 20px;
}

#progress {
  border-radius: 10px;
  width: 0%;
  height: 100%;
  background: linear-gradient(30deg, #01c38d 0%, #132d46 82%);
}

.a-canvas-avatar {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  position: fixed !important;
}

.a-canvas-200 {
  width: 200vw;
  height: 200vw;
}

.a-canvas-180 {
  width: 180vw;
  height: 180vw;
}

.a-canvas-150 {
  width: 150vw;
  height: 150vw;
}

.a-canvas-120 {
  width: 120vw;
  height: 120vw;
}

.a-canvas-90 {
  width: 90vw;
  height: 90vw;
}

.a-canvas-70 {
  width: 70vw;
  height: 70vw;
}

.a-canvas-60 {
  width: 60vw;
  height: 60vw;
}

.a-canvas-50 {
  width: 50vw;
  height: 50vw;
}

.a-canvas-40 {
  width: 40vw;
  height: 40vw;
}

.a-canvas-35 {
  width: 35vw;
  height: 35vw;
}