@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-duration :1s;
  animation-name: tada;
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation-duration :1s;
  animation-name: rubberBand;
}


input[type=range] {}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 2.5em;
    height: 3em;
}
* {box-sizing: border-box; }
body {font-family:arial;background:whitesmoke;}
container, hang, word, typeIn, letters,commands {display:inline-block;clear:both;}
commands {margin-top:1em;display:inline-block;}
#nolMin, #nolMax {vertical-align:middle;margin-bottom:1em;margin-right:1em;}
btn {font-size:1.5em;padding:0.2em;border:1px solid grey;border-radius:5px;text-align:center;display:inline-block;background:lightgrey;float:right;}
word {border: 2px solid transparent;}
container {background:whitesmoke;max-width:100%;text-align:center;width:100%;}
definitions {text-align:left;padding-left:2px;padding-right:2px;}
.wordLtF, .key {
	display: inline-block;
	margin : 1px;
	border : 1px solid grey;
	border-radius : 2px;
	font-size:1.6em;
	padding:1px 6px 1px 6px;
	background : ghostwhite;
	}
.wordLtF {
	padding:1px 1px 1px 1px;
	width : 1em;
}
#hangId{margin-top:-3em;}
@media only screen and (min-width: 768px) {
.wordLtF, .key {font-size:2.5em !important;}
#hangId{margin-top:-0em !important;}
}

.letterFound {color:#96ceb4;}
.letterNotFound {color:#ff6f69;}
from {font-size : 0.7em;font-style:italic;background:cornflowerblue;display:inline-block;margin-top:5px;padding:2px;}
dword {font-size : 1.5em;font-weight:bold;display:block;text-transform:capitalize;}
hr {
border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
performance {position: absolute;left:5;}
options {float:right;font-size:1.5em;cursor:pointer;position:relative;top:-8px;}
/*---- keyBoard style--------*/
#keyBoardDiv {clear:both;background:lightgrey;display:inline-block;padding:5px;padding-top:0;border-radius:5px;text-align:center;margin-top:5px;}
.key {margin-top:5px;padding-top:6;height:1.8em;}
.langKey {float:left;padding-left:2px;padding-right:2px;}
/*----- end keyBoard Style ------------*/
#storageDivId {position:absolute;top:4em;width:100%;text-align:center;}
#optionsDiv {top:3em;position:absolute;/*width:100%;*/text-align:right;right:10px;background:#444444;opacity:0.9;border-radius:3px;padding:3px;}
.menuItem {padding:2px;border-radius:2px;margin-bottom:2px;display:inline-block;cursor:pointer;}
.menuItemOff {padding:2px;border-radius:2px;margin-bottom:2px;display:inline-block;cursor:pointer;background:transparent;}
.menuItemOn {padding:2px;border-radius:2px;margin-bottom:2px;display:inline-block;cursor:pointer;background:#96ceb4;}
#buyDiv {position:absolute;background:lightgrey;opacity:0.9;border:1px solid grey;}
#buyHide {cursor:pointer;position:absolute;right:10px;top:10px;font-size:1.5em;}
#skinsDiv {position:absolute;top:0;left:0;background:whitesmoke;width:100%;min-height:100%;}
#skinsHide {cursor:pointer;position:absolute;right:10px;top:10px;font-size:1.5em;}
#infoDiv {position:absolute;top:0;left:0;background:whitesmoke;width:100%;min-height:100%;}
#infoHide {cursor:pointer;position:absolute;right:10px;top:10px;font-size:1.5em;}
.skin {margin:10px;border:3px solid transparent;transition:all 1s;cursor:pointer;max-width:90%;max-height:400px;}
.skin:hover {border:3px solid #96ceb4;}
#logoScreen {position:absolute;top:0;left:0;margin:0;width:100%;height:100%;text-align:center;background:black;transition:opacity 1s;}
audio {max-width:98%;margin:1%;}
#wordnikLnk {position:fixed;bottom:8;width:98%;}
.infoSpan {
	display:flex;
    width:450px;
    margin:auto;
    height:100%;
    flex-direction: column;
	padding: 10px;
	}
.infoSpanContent {flex:1;border:1px solid #ED1C24;}
infoLine {display:flex;padding:10px;padding:10;margin:10;border-radius:3px;text-align:justify;}