@media (min-width: 300px) {
  #platform {
    width: 100%;
    height: 100vh;
  }
}

@media (min-width: 768px) {
  #platform {
    width: 100%;
    height: 100vh;
  }
}

@media (min-width: 300px) {
  .emoticon img {
    width: 60px;
    height: 60px;
    transition: .3s;
  }
}

@media (min-width: 768px) {
  .emoticon img {
    width: 80px;
    height: 80px;
  }
}

@media (min-width: 300px) {
  .emoticon {
    transition: .3s;
    margin: 30px;
    transition: .3s;
  }
}

@media (min-width: 768px) {
  .emoticon {
    transition: .3s;
    margin: 15px;
  }
}

.emoticon:hover {
  transform: scale(3.0);
  z-index: 999;
}

.area-emoticons {
  width: 100%;
  height: 100vh;
}

body {
  background: rgb(63,94,251);
  background: linear-gradient(45deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
  background-size: cover;
}

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}