<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#App {
  max-width: 100%;
  magin: 0 auto;
  align-items: center;
  justify-content: center;
  display: flex;
}

#ctrl {
  width: 100%;
  max-width: 600px;
  position: absolute;
  top: 0;
  display: flex;
}
#ctrl .group {
  min-width: 25%;
  padding: 8px;
}
#ctrl .group input, #ctrl .group select {
  width: 100%;
  margin-top: 2px;
  max-width: 140px;
}
  </style>
 </head>
 <body translate="no">
  <div id="App">
   <div id="ctrl">
    <div class="group">
     <select v-model="skull.id">
      <option value="skull_1">
       Skull 1
      </option>
      <option value="skull_2">
       Skull 2
      </option>
      <option value="skull_3">
       Skull 3
      </option>
     </select>
     <input max="100" min="-100" step="1" type="range" v-model="skull.x"/>
     <input max="100" min="-100" step="1" type="range" v-model="skull.y"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="skull.sx"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="skull.sy"/>
     <input type="color" v-model="skull.color"/>
    </div>
    <div class="group">
     <select v-model="eyes.id">
      <option value="eyes_1">
       eyes 1
      </option>
      <option value="eyes_2">
       eyes 2
      </option>
      <option value="eyes_3">
       eyes 3
      </option>
     </select>
     <input max="100" min="-100" step="1" type="range" v-model="eyes.x"/>
     <input max="100" min="-100" step="1" type="range" v-model="eyes.y"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="eyes.sx"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="eyes.sy"/>
     <input type="color" v-model="eyes.color"/>
    </div>
    <div class="group">
     <select v-model="mouth.id">
      <option value="mouth_1">
       mouth 1
      </option>
      <option value="mouth_2">
       mouth 2
      </option>
     </select>
     <input max="100" min="-100" step="1" type="range" v-model="mouth.x"/>
     <input max="100" min="-100" step="1" type="range" v-model="mouth.y"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="mouth.sx"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="mouth.sy"/>
     <input type="color" v-model="mouth.color"/>
    </div>
    <div class="group">
     <select v-model="nose.id">
      <option value="nose_1">
       nose 1
      </option>
      <option value="nose_2">
       nose 2
      </option>
     </select>
     <input max="100" min="-100" step="1" type="range" v-model="nose.x"/>
     <input max="100" min="-100" step="1" type="range" v-model="nose.y"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="nose.sx"/>
     <input max="1.5" min="0.5" step="0.01" type="range" v-model="nose.sy"/>
     <input type="color" v-model="nose.color"/>
    </div>
   </div>
   <v-style id="style">
    #u_skull{
      --color: {{ skull.color }};
    }
    #u_eyes{
      --color: {{ eyes.color }};
    }
    #u_mouth{
      --color: {{ mouth.color }};
    }
    #u_nose{
      --color: {{ nose.color }};
    }
   </v-style>
  </div>
 </body>
</html>
