html {
  font-size: 25px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}

@keyframes breeth {
  0% {
    width: 10rem;
    height: 10rem;
    background-color: #AAAAFF;
  }
  60% {
    width: 11rem;
    height: 11rem;
    background-color: #EEEEFF;
  }
  100% {
    width: 10rem;
    height: 10rem;
    background-color: #AAAAFF;
  }
}

@-webkit-keyframes breeth {
  0% {
    width: 10rem;
    height: 10rem;
    background-color: #AAAAFF;
  }
  60% {
    width: 11rem;
    height: 11rem;
    background-color: #EEEEFF;
  }
  100% {
    width: 10rem;
    height: 10rem;
    background-color: #AAAAFF;
  }
}

/* *** *** *** record-button *** *** *** */
#record-button {
  width: 10rem;
  height: 10rem;
  display: none;
  border-radius: 50%;
  border-width: 0;
  cursor: pointer;
  -webkit-animation: breeth 5s infinite;
  animation: breeth 5s infinite;
}

body[flow="waiting"] #record-button,
body[flow="recording"] #record-button,
body[flow="recording-canstop"] #record-button,
body[flow="uploading"] #record-button,
body[flow="result"] #record-button {
  display: block;
}

body[flow="waiting"] #record-button:hover {
  background-color: #FFAAAA !important;
  -webkit-animation: none;
  animation: none;
}

body[flow="recording"] #record-button,
body[flow="recording-canstop"] #record-button {
  width: 11rem;
  height: 11rem;
  background-color: #FF0000 !important;
  -webkit-animation: none;
  animation: none;
}

/* *** *** *** must-accept *** *** *** */
#must-accept {
  display: none;
}

body[flow="blocked"] #must-accept {
  display: block;
  border: solid black;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
}


/* *** *** *** face *** *** *** */
#face {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: yellow;
  border-radius:50%;
}

body[flow="uploading"] #face,
body[flow="result"] #face {
  display: block;
}

#left-eye,
#right-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  width: 12%;
  height: 12%;
  margin-top: -15%;
  transform: translate(-50%, -50%);
  border-radius: 50%;

  transition: all 0.4s ease;
}

#left-eye {
  margin-left: -15%;
}

#right-eye {
  margin-left: 15%;
}

#mouth {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0%;
  width: 40%;
  transform: translate(-50%, -50%);
  margin-top: 15%;
  border: solid 0.3rem transparent;
  border-radius: 50%;
  border-bottom-color: black;

  transition: all 0.4s ease;
}

/* mood amusement */
#face[mood="amusement"] #mouth {
  border-bottom-color: black;
  height: 25%;
}

/* mood sadness */
#face[mood="sadness"] #mouth {
  border-bottom-color: black;
  height: 15%;
  transform: translate(-50%, 15%) rotate(180deg);
}

#face[mood="sadness"] #left-eye,
#face[mood="sadness"] #right-eye {
  border-bottom: 0.5rem solid lightblue;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* mood hot_anger */
#face[mood="hot_anger"] {
  background-color: #FF6600;
}

#face[mood="hot_anger"] #mouth {
  border-bottom-color: black;
  height: 10%;
  transform: translate(-50%, -40%) rotate(180deg);
}

#face[mood="hot_anger"] #left-eye,
#face[mood="hot_anger"] #right-eye {
  height: 5%;
  width: 15%;
}

#face[mood="hot_anger"] #left-eye {
  transform: translate(-50%, -50%) rotate(10deg);
}

#face[mood="hot_anger"] #right-eye {
  transform: translate(-50%, -50%) rotate(-10deg);
}

/* mood panic_fear */
#face[mood="panic_fear"] #mouth {
  background-color: black;
  height: 15%;
  width: 15%;
  margin-top: 30%;
}

#face[mood="panic_fear"] #left-eye,
#face[mood="panic_fear"] #right-eye {
  width: 15%;
  height: 25%;
}

#face[mood="panic_fear"] #left-eye {
  transform: translate(-50%, -50%) rotate(10deg);
}

#face[mood="panic_fear"] #right-eye {
  transform: translate(-50%, -50%) rotate(-10deg);
}

/* machometer *//*
  male color: #00b1cf;
  female color: #f063a5;
*/

.machometer {
  position: absolute;
  top: -3rem;
  left: 10%;
  right: 10%;
}

body[flow="result"] .machometer {
  top: 1.5rem;
  transition: top 0.3s ease;
}

.machometer .border {
  position: absolute;
  left: 2rem;
  right: 2rem;
  border-radius: 0.3rem;
  height: 1.2rem;
  margin-top: 0.4rem;
  overflow: hidden;
  
  background: -moz-linear-gradient(left,  #f063a5 0%, #00b1cf 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f063a5), color-stop(100%,#00b1cf)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #f063a5 0%,#00b1cf 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #f063a5 0%,#00b1cf 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #f063a5 0%,#00b1cf 100%); /* IE10+ */
  background: linear-gradient(to right,  #f063a5 0%,#00b1cf 100%); /* W3C */
}

.machometer .indicator {
  position: absolute;
  margin-left: 50%;
  top: 0;
  bottom: 0;
  transition: margin-left 2.4s ease-in-out;
}

.machometer .indicator-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  /*margin-left: -1rem;*/
  /*width: 2rem;*/
  margin-left: -1px;
  width: 2px;
  background: black;
}

.machometer .male,
.machometer .female {
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.machometer .male {
  float: right;
  background-image: url('img/male.jpg');
}

.machometer .female {
  float: left;
  background-image: url('img/female.jpg');
}

/* feedback */
.feedback {
  position: absolute;
  bottom: -5rem;
  left: 10%;
  right: 10%;
}

body[flow="result"] .feedback {
  bottom: 0.5rem;
  transition: bottom 0.5s ease;
}

.feedback .success,
.feedback .error {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: silver;
}

.feedback .success {
  background: #79a429;
  float: left;
}

.feedback .error {
  background: #dc503d;
  float: right;
}