html, body {
  margin: 0;
  height: 100%;
  color: white;
  font-size: 20pt;
}

#video {
  margin: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 10;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  position: absolute;
  /* pointer-events: none;  마우스 컨트롤 삭제 */
}
#overlay{
  position: absolute;
  left: 1em;
  top: 1em;
  z-index: 10;
}
#info {
  position: absolute;
  left: 1em;
  top: 1em;
  background: rgba(0,0,0,.8);
  padding: .5em;
  color: white;
  z-index: 0;
  font-family: monospace;
}

#screen_ctl_set{
  position: absolute;
  left: 0.5em;
  top: 4em;
  z-index: 10;
  color : black;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: sans-serif;
}

#background { 
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  /* pointer-events: none; */ /*캔버스 마우스 포인트 이벤트 삭ㅈ*/
  border: none; /* ifrmae 삽입 투명한캔버스 */
}
#content {
  color:#ff0000;
  padding: 1em;
  z-index: 0;
}
#content>* {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
a {
  color: lightblue;
}
a:visited {
  color: lightcoral;
}
a:hover {
  color: magenta;
}

#content2 {
  color : #000000;
  font-size: 7vw;
  font-family: sans-serif;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: -1;
  justify-content: center;
  align-items: center;
  position: absolute;
  border: none; 
}


#screenshot {
  z-index: 0;
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 10px;
  background: rgba(0,0,0,0.9);
  color: white;
  border: 1px solid gray;
  cursor: pointer;
}
#screenshot:hover {
  background: #444;
}
#screenshot:focus {
  outline: none;
}

#container {
  position: absolute;  /* 자식이 이 요소를 기준 삼도록 합니다. */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#labels {
  position: absolute;  /* 캔버스 위에 자리잡도록 합니다. */
  left: 0;             /* id=container 위 왼쪽에 기준하도록 합니다. */
  top: 0;
  color: white;
}

/* 라벨 텍스트 모양 잡기 */
#labels > div {
  position: absolute;  /* 캔버스 위에 자리잡도록 합니다.  */
  left: 0;             /* 부모의 위 왼쪽에 기준하도록 합니다. */
  top: 0;
  cursor: pointer;     /* 포인터가 위에 올라갔을 때 포인터 스타일을 바꿉니다. */
  font-size: large;
  user-select: none;   /* 텍스트를 선택할 수 없도록 합니다. */
  text-shadow:         /* 글자에 검은 테두리를 두릅니다. */
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;
}
#labels > div:hover {
  color: red;
}

/* mobile */
@media ( max-width: 768px ) {
  #screen_ctl_set{
    position: absolute;
    left: 0.5em;
    top: 2em;
    z-index: 10;
    color : black;
    font-family: Arial, Helvetica, sans-serif;
  }
}