@font-face {
  font-family: 'Aansa';
}

* {
  box-sizing: border-box;
  cursor: url("data:image/x-icon;base64,AAACAAEAICACAAIABAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAHAAAABwAAAA4AAAAOAAAAHAAAABwAAAQ4AAAGOAAAB3AAAAfwAAAH/4AAB/8AAAf+AAAH/AAAB/gAAAfwAAAH4AAAB8AAAAeAAAAHAAAABgAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////+P////B////wf///4P///+D///fB///zwf//8YP///CD///wB///8AAf//AAP//wAH//8AD///AB///wA///8Af///AP///wH///8D////B////w////8f////P////3/////////////////////////8="), auto !important;
}

body, html {
  overflow: hidden;
  font-family: 'Aansa', monospace;
  background-color: #000;
  height: 100vh;
  margin: 0px;
  border: 0px;
}

.screen__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  z-index: 12;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

#score {
  padding: 10px;
}

#score .shake {
  background: yellow;
}

.screen {
  height: 100%;
  /* width: 100%; */
  background-color: teal;
  position: relative;
}

.start {
  background-color: #b6bbb7;
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0px
  0px 0px 2px #f7f9f6, 0px 0px 0px 4px #d5dad6;
  padding: 0 6px;
  display: flex;
  align-items: center;
}

.start__button {
  /* font-size: 34px;
  height: 34px;
  display: inline-block;
  line-height: 1.25em;
  padding: 4px; */
  font-size: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 0px 1px #808080, 2px 2px 0px 2px #000, -1px -1px 0px 1px #fff;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}
.start__button:active {
  box-shadow: 1px 1px 0px 1px #808080, 2px 2px 0px 2px #fff, -1px -1px 0px 1px #000;
}

.box {
  height: 25px;
  width: 25px;
  background-color: red;
  cursor: url("data:image/x-icon;base64,AAACAAEAICACAAIABAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAHAAAABwAAAA4AAAAOAAAAHAAAABwAAAQ4AAAGOAAAB3AAAAfwAAAH/4AAB/8AAAf+AAAH/AAAB/gAAAfwAAAH4AAAB8AAAAeAAAAHAAAABgAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////+P////B////wf///4P///+D///fB///zwf//8YP///CD///wB///8AAf//AAP//wAH//8AD///AB///wA///8Af///AP///wH///8D////B////w////8f////P////3/////////////////////////8="), auto !important;
}

.icon {
  height: 52px;
  width: 35px;
  background-size: cover, calc(100% - 4px);
  background-position: 50%, 2px 2px;
  position: relative;
  background-repeat: no-repeat;
  padding: 0px;
  margin: 0px;
}

.icon--left {
  top: 30%;
  left: 30%;
}

.icon--right {
  top: 40%;
  left: 70%;
}

.ui-draggable-dragging .icon__text {
  background-color: rgba(0, 0, 255, 0.2);
}


.img {
  position: absolute;
}

.img {
  max-height: 82px;
  max-width: 82px;
}

.empty-nut {
  /* background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("recycle-empty.png"); */
  height: 70px;
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("angry_nut.png");
}
.empty-nut.ui-draggable-dragging {
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("recycle-empty.png");
}

.icon--trash--full {
  /* background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("recycle-full.png"); */
  height: 70px;
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("feed.gif");
}

.icon--trash--satisfied {
  /* background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("recycle-full.png"); */
  height: 70px;
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("happy.gif");
}

.icon--trash--unsatisfied {
  /* background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("recycle-full.png"); */
  height: 70px;
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0)), url("satisfied.gif");
}

.icon--trash--full.ui-draggable-dragging {
  background-image: linear-gradient(to left, rgba(0, 0, 255, 0.2), rgba(0, 0, 255, 0.2)), url("recycle-full.png");
}

.hide {
  pointer-events: none;
  opacity: 0;
}

.hidden {
  display: none !important;
}


@keyframes spinOut {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  10% {
    -webkit-transform: scale(1.1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(0.5) rotate(360deg);
    -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.5);
  }
}

.inactive, .inactive.img {
  max-height: 75px;
  position: absolute;
  z-index: 2;
  cursor: disabled !important;
  -webkit-animation-name: spinOut;
  animation-name: spinOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: once;
  animation-iteration-count: once;
  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(0.1);
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}