/* handy */

.smartphone {position: relative; display: flex; justify-content: center; align-items: center; width: 400px; height: 700px; margin: 100px auto;}
.smartphone-content {width: 400px; height: 700px; border: solid 18px black; border-top-width: 60px; border-bottom-width: 80px; border-radius: 40px;}
.webcam {display: block; width: 50px; height: 5px; position: absolute; top: 30px; left: 50%; transform: translate(-50%, -50%); border-radius: 6px; background: #333;}
#bottom-ctrl {position: absolute; bottom: 30px; width: 100%;}
#bottom-ctrl > div {display: flex; flex-direction: row; justify-content: space-around; height: 20px;}

.v-line {display: block; width: 2px; height: 18px; margin: 0 3px; background: #fff;}
iframe {width: 100%; height: 100%;}

#wrapper {padding: 0;}
iframe #wrapper {padding: 0;}


.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}