body{
  margin:0;
  background:black;
  color:white;
  font-family:Arial,sans-serif;
  text-align:center;
}

#logo-placeholder{
  margin:20px 0;

  font-size:28px;
  font-weight:600;

  letter-spacing:2px;
}
#status{
  font-size:18px;
  font-weight:400;

  margin:12px 0 20px 0;

  color:white;
}
#countdown{
  font-size:80px;
  font-weight:700;

  margin:20px 0;

  color:white;

  text-align:center;
}

#camera-container{
  position:relative;
  width:90vw;
  max-width:600px;
  margin:auto;
}

#camera{
  width:100%;
  display:block;
}
#overlay-desktop{
  position:absolute;

  top:6%;
  left:28%;

  width:44%;
  height:88%;

  border:4px solid white;
  box-sizing:border-box;
}

/* HEAD */

#head-marker{
  position:absolute;
  top:8%;
  left:50%;
  width:55px;
  height:70px;
  transform:translateX(-50%);
  border:3px solid white;
  border-radius:50%;
}

/* HANDS */

#left-hand-marker{
  position:absolute;

top:50%;
  left:4%;

  width:36px;
  height:36px;

  border:3px solid white;
  border-radius:50%;
}

#right-hand-marker{
  position:absolute;

top:50%;
  right:4%;

  width:36px;
  height:36px;

  border:3px solid white;
  border-radius:50%;
}

/* FEET */

#left-foot-marker{
  position:absolute;

  bottom:3%;
  left:28%;

  width:20px;
  height:40px;

  border:3px solid white;
}

#right-foot-marker{
  position:absolute;

  bottom:3%;
  right:28%;

  width:20px;
  height:40px;

  border:3px solid white;
}
#center-line{
  position:absolute;

  top:0;
  bottom:0;

  left:50%;

  width:4px;

  transform:translateX(-50%);

pointer-events:none;

  background:
  repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0px,
    rgba(255,255,255,0.95) 12px,
    transparent 12px,
    transparent 24px
  );
  }
#overlay-phone{
  display:none;
}

@media (max-width:768px) and (pointer:coarse){

  #overlay-desktop{
    display:none !important;
  }

  #overlay-phone{
    display:block !important;

    position:absolute !important;

    top:1% !important;
    left:50% !important;

    width:82vw !important;
    height:118vw !important;

    transform:translateX(-50%) !important;

 border:6px solid white;
    box-sizing:border-box !important;
  }

}
#center-line-phone{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  transform:translateX(-50%);

  background:
  repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0px,
    rgba(255,255,255,0.95) 12px,
    transparent 12px,
    transparent 24px
  );
}
#head-marker-phone{
  position:absolute;

  top:22%;
  left:50%;

  width:65px;
  height:110px;

  transform:translateX(-50%);

  border:3px solid white;
  border-radius:8px;
}
#left-hand-marker-phone{
  position:absolute;

  top:53%;
  left:8%;

  width:36px;
  height:36px;

  border:3px solid white;
  border-radius:50%;
}

#right-hand-marker-phone{
  position:absolute;

  top:53%;
  right:8%;

  width:36px;
  height:36px;

  border:3px solid white;
  border-radius:50%;
}
#left-foot-marker-phone{
  position:absolute;

  bottom:3%;
  left:32%;

  width:20px;
  height:40px;

  border:3px solid white;
}

#right-foot-marker-phone{
  position:absolute;

  bottom:3%;
  right:32%;

  width:20px;
  height:40px;

  border:3px solid white;
}
#ready-button{

  display:block;

  margin:20px auto;

  padding:14px 28px;

  border:none;

  border-radius:12px;

  font-size:18px;

  background:white;

  color:black;

  cursor:pointer;
}