body {
  font: 100%/1.2 'Roboto Black', sans-serif;
  color: rgba(255,255,255,.9);
  font-weight: bold;
}

main {
  width: 100vw;
  height: 100vh;
  background-color: lightgrey;
  display: flex;
  flex-flow: column nowrap;
}

#computer,
#user {
  width: 100%;
  height: 50vh;
  transition: height .5s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h2 {
  font-size: 2em;
}

#computer {
  background: #1a2c56;
  flex-flow: column nowrap;
  cursor: no-drop;
}

#user {
  background: #d1a683;
  flex-flow: column-reverse nowrap;
}

.score {
  font-size: 3em;
}

.score small {
  font-size: 0.5em;
  font-variant-position: super;
}

.choices {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 20px;
}

.choice {
  width: 70px;
  height: 70px;
  flex: 1 1 30%;
  background-image: url(hands750_286.png);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  opacity: .5;
  filter: blur(1px);
  transition: .5s;
}

.choice:nth-of-type(1) {
  background-position: left center;
}

.choice:nth-of-type(2) {
  background-position: center center;
}

.choice:nth-of-type(3) {
  background-position: right center;
}

#computer .choice {
  transform: rotate(180deg);
}

#computer .choice.selected {
  opacity: 1;
  filter: none;
  transform: rotate(180deg) scale(1.2) translateY(-10px);
}

#user .choice.selected {
  opacity: 1;
  cursor: no-drop;
  filter: none;
  transform: scale(1.2) translateY(-10px);
}

@media all
and (min-device-width: 640px)
and (min-device-height: 640px) {
  html:not(.touchevents) #user .choice:hover {
    opacity: 1;
    cursor: pointer;
    filter: none;
    transform: scale(1.2);
  }
}

#computer .choice.selected.winner {
  animation: .5s ease-in-out cWin;
}

#computer .choice.selected.loser {
  animation: .5s ease-in-out cLose;
}

#computer .choice.selected.draw {
  animation: .5s ease-in-out cDraw;
}

#user .choice.selected.winner {
  animation: .5s ease-in-out uWin;
}

#user .choice.selected.loser {
  animation: .5s ease-in-out uLose;
}

#user .choice.selected.draw {
  animation: .5s ease-in-out uDraw;
}

@keyframes cWin {
  from {
    transform: rotate(180deg) scale(1.2) translateY(-10px);
    z-index: inherit;
  }
  50% {
    transform: rotate(180deg) scale(1.8) translateY(-30px);
    z-index: 20;
  }
  to {
    transform: rotate(180deg) scale(1.2) translateY(0px);
    z-index: inherit;
  }
}

@keyframes cLose {
  from {
    transform: rotate(180deg) scale(1.2) translateY(-10px);
  }
  50% {
    transform: rotate(540deg) scale(.1) translateY(20px);
  }
  to {
    transform: rotate(180deg) scale(1.2) translateY(-10px);
  }
}
@keyframes cDraw {
  0%, 100% {
    transform: rotate(180deg) scale(1.2) translateY(-10px) translateX(0);
  }
  10%, 90% {
    transform: rotate(180deg) scale(1.2) translateY(-10px) translateX(-1px);
  }
  20%, 80% {
    transform: rotate(180deg) scale(1.2) translateY(-10px) translateX(2px);
  }
  40%, 60% {
    transform: rotate(180deg) scale(1.2) translateY(-10px) translateX(-4px);
  }
  30%, 50%, 70% {
    transform: rotate(180deg) scale(1.2) translateY(-10px) translateX(4px);
  }
}

@keyframes uWin {
  from {
    transform: scale(1.2) translateY(-10px);
    z-index: inherit;
  }
  50% {
    transform: scale(1.8) translateY(-30px);
    z-index: 20;
  }
  to {
    transform: scale(1.2) translateY(-10px);
    z-index: inherit;
  }
}

@keyframes uLose {
  from {
    transform: rotate(0) scale(1.2) translateY(-10px);
  }
  50% {
    transform: rotate(-359deg) scale(.1) translateY(20px);
  }
  to {
    transform: rotate(0) scale(1.2) translateY(-10px);
  }
}

@keyframes uDraw {
  0%, 100% {
    transform: rotate(0) scale(1.2) translateY(-10px) translateX(0);
  }
  10%, 90% {
    transform: rotate(0) scale(1.2) translateY(-10px) translateX(-1px);
  }
  20%, 80% {
    transform: rotate(0) scale(1.2) translateY(-10px) translateX(1px);
  }
  40%, 60% {
    transform: rotate(0) scale(1.2) translateY(-10px) translateX(-2px);
  }
  30%, 50%, 70% {
    transform: rotate(0) scale(1.2) translateY(-10px) translateX(2px);
  }
}

@media all
and (max-height: 640px)
and (orientation: portrait)
{
  body {
    font: 50%/1.1 'Roboto Black';
  }

}

@media all
and (max-width: 640px)
and (orientation: landscape)
{
  body {
    font: 50%/1.1 'Roboto Black';
  }

  .choice {
    width: 50px;
    height: 50px;
  }
}