.h5p-hangman {
  /*width: 32em;*/
  margin: 0 auto;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 4px #ccc;
}

.h5p-hangman .hangman-text {
  width: auto;
  margin: 1em;
  font-family: fantasy;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1.5em;
  text-align: center;
}

.h5p-hangman-main {
  position:relative;
  display:flex;
  min-height:20em;
  max-width:32em;
  margin: 0px;
  padding: 0px;
  flex-flow: row;
}

.h5p-hangman-graf {
  width:20em;
  max-width: 20em;
  height: 20em;
  min-height:20em;
  flex:2;
  order:1;
}

.h5p-hangman-alphabeth {
  position:relative;
  min-height:8em;
  flex:1;
  order:2;
}

.h5p-hangman-hints {
  position:absolute;
  background: green;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  bottom: 2em;
  right:2em;
  text-align:center;
  padding-top:2px;
  color:white;
}

.h5p-hangman-htext {
  opacity: 0;
  position:absolute;
  background: rgba(30,30,200,0.6);
  width: 6em;
  border-radius: 0.3em;
  top: 1em;
  left:2em;
  text-align:center;
  padding-top:2px;
  color:white;
}

.fadeio {
  animation: fadeInOut 4s;
}

@keyframes fadeInOut {
  10% { opacity: 1; }
  90% { opacity: 1; }
}

.h5p-hangman-feedback div {
  background: darkslategrey;
  color: white;
  border-radius: 0.3em;
  margin: 3px;
  padding: 2px;
  box-shadow: 2px 2px 2px rgba(3,3,3,0.3)
}

.h5p-hangman-freechar {
  position: relative;
  display:block;
  color:green;
  width:1.2em;
  height:1.2em;
  margin: 3px;
  padding:2px;
  font-size:1.2em;
  float:left;
}

.h5p-hangman-letters {
  height:2em;
}

.h5p-hangman-correct {
  opacity:0;
  position:absolute;
  left:1.5em;
  top:1.5em;
  font-size:2.5em;
  color:green;
  animation: showme 5s;
  animation-fill-mode: forwards;
}

@keyframes showme {
  10% { opacity:1;}
  90% { opacity:1;}
}

.h5p-hangman-blowy {
  animation: blowme 1s;
  animation-fill-mode: forwards;
}

@keyframes blowme {
  100% {  opacity:0; font-size:4em; color:red; }
}

.h5p-hangman-droppy {
  animation: dropme 1s;
}

@keyframes dropme {
  100% { opacity:0; font-size:0; }
}

.h5p-hangman-letter {
  float:left;
  width: 1.2em;
  height:1.9em;
  margin-right:5px;
  border-bottom:solid 2px black;
}

.h5p-hangman-space {
  float:left;
  width: 1.2em;
  height:1.9em;
  margin-right:5px;
  border-bottom:solid 1px rgba(3,3,3,0.1);
}

@media all and (max-width: 32em) {
   .h5p-hangman-main {
            flex-direction: column;
   }

   .h5p-hangman-graf,.h5p-hangman-alphabeth {
            order: 0;
   }
}