* {
  margin: 0; padding: 0;
}

#container {
  margin: 0 auto;
  text-align: center;
}

#received-emoticon {
  margin: 10px auto;
  width: 200px;
  height: 200px;
  border: 0px;
}
#received-emoticon.placeholder {
  background: 
  radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
  radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
  linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
  linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
  background-color: slategray;
  background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;
}

.emoticon {
  max-width: 128px;
  width: 25%;
  padding: 2%;
  margin: 1%;
  border-radius: 10px;
  float: left;
  -webkit-transition: -webkit-transform 0.1s ease-in-out;
  border: 2px solid transparent;
  opacity: 0.5;
}

.emoticon:hover {
  opacity: 1;
}
.emoticon:active {
  -webkit-transform: scale(0.9);
}

.emoticon.selected {
  border-color: black;
}

#mobile-warning {
  clear: both;
  display: none;
}

#options {
  clear: both;
}

#received-emoticon {
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transform-origin: 50% 0;
  -webkit-transform: scale(1);
}
#received-emoticon.big {
  -webkit-transform: scale(3);
}

/* Visualizer canvas */
canvas {
  position: fixed;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
