@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0;}
body {font-family: "Ubuntu", sans-serif; }
      .start body:before {content: "Please draw in this area."; display: block; width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); color: #aaa; text-align: center; font-size: 18px;}
    canvas {
      width: 100%;height: 100svh; position: fixed; top:0; left: 0;
    }
      footer { width: 100%; position: fixed; bottom: 0; left: 0; z-index: 2; height: 60px; display: flex;justify-content: space-around;align-items: center; border-top:1px solid #ddd; background-color: rgba(255,255,255,.7); backdrop-filter: blur(3px);}
      footer div input,footer div select { margin-left: .5em;vertical-align: middle; height: 27px;}
footer div:after { content: ""; display: block; height: 27px; width: 1px; background-color: #eee; position: absolute; top:50%; right: 0; transform: translateY(-50%);}
footer div { position: relative; padding: 0 1em; box-sizing: border-box;}
footer div:last-child:after { display: none;}
      
      #shot { height: 60px; width: 60px; background-image: url("../img/face.svg"); background-repeat: no-repeat; background-position: center; cursor: pointer; background-size: 27px;}

header { width: 100%; height: 60px; background-color: rgba(255,255,255,.7); backdrop-filter: blur(3px); position: fixed; top:0; left: 0;}
      #download { height: 60px; width: 60px; background-image: url("../img/download.svg"); background-repeat: no-repeat; background-position: center; position: absolute; top:0; right: 0; cursor: pointer;}

#return {height: 60px; width: 60px; background-image: url("../img/arrow.svg"); background-repeat: no-repeat; background-position: center; position: absolute; top:0; left: 0; cursor: pointer;}
      video { width: 100%; height: 100%; object-fit: cover; object-position: center;}

#wrap { width: 100%; height: 100%; position: fixed; top:0; left: 0; background-color: rgba(255,255,255,.7); backdrop-filter: blur(3px); display: flex;justify-content: center;align-items: center; z-index: 99; display: none; text-align: center;}
.first #wrap { display: flex;}
#wrap h1 { font-size: 320%; text-align: center;}

#start { height: 50px; padding: 0 2em; line-height: 50px; border: 2px solid #000; border-radius: 25px; text-align: center; color: #000; font-weight: bold; box-sizing: border-box; cursor: pointer; display: inline-block;}

select { height: 27px; background: none; background-color: #FFF; border-radius: .3em; width: 50px;border: 1px solid #ccc; font-size: 80%;  }
input,select { }