1  body {
 2    background: pink;
 3    /* font-family: "Inter UI"; */
 4    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 5    font-size: 16px;
 6  }
 7  
 8  button {
 9    border: 0;
10    border-radius: 2px;
11    /* box-shadow: 3px 2px 0px #eaa4b0; */
12    color: #fff;
13    height: 1.9rem;
14    opacity: 0.85;
15    outline: 0;
16    padding: 0.5rem 0.55rem 0.3rem 0.5rem;
17    cursor: pointer;
18    user-select: none;
19  }
20  
21  button:hover { opacity: 1; }
22  button:active { color: #ddd; }
23  
24  input[type=text] {
25    background: #fff;
26    border: 0;
27    border-radius: 2px;
28    color: #222;
29    outline: 0;
30    padding: 0.4rem 0.55rem 0.3rem 0.5rem;
31  }
32  
33  canvas {
34    z-index: 10;
35    position: absolute;
36    top:0;
37    left:0;
38    pointer-events: none;
39  }
40  
41  #actions { display: flex; }
42  #actions button:first-child { margin-right: 0.5rem; }
43  
44  #container {
45    height: 100vh;
46    width: 100vw;
47  }
48  
49  #interface {
50    box-sizing: border-box;
51    display: flex;
52    flex-direction: column;
53    height: 100%;
54    justify-content: space-between;
55    padding: 1.2rem;
56    width: 100%;
57  }
58  
59  #label {
60    border-radius: 2px;
61    color: #fff;
62    cursor: default;
63    padding: 0.4rem 0.55rem 0.3rem 0.5rem;
64    user-select: none;
65  }
66  
67  #nav {
68    display: flex;
69    flex-direction: row;
70    justify-content: space-between;
71    width: 100%;
72    z-index: 3;
73  }
74  
75  #share input { width: 12rem; }
76  
77  video {
78    left: 50%;
79    min-height: 100%;
80    min-width: 100%;
81    position: absolute;
82    top: 50%;
83    transform: translate(-50%, -50%);
84    z-index: 1;
85  }