.sticky-note {
   position: absolute;

   z-index: 200;

   width: 12em;
   height: 12em;

   padding: .5em;
   padding-top: 2.5em;

   display: flex;
   flex-direction: column;

   color: var(--bl);
   box-shadow: var(--shd);
   user-select: none;

   --col: rgb(231, 231, 106);
   background-color: var(--col);

   p {
      margin: 0;
      font-family: "HW";
      font-size: 1.2rem;
      font-weight: bold;
      letter-spacing: .1em;
      text-align: center;
   }

   a.unstick-button {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-decoration: none;

      height: 2em;

      background-color: rgba(88, 88, 88, 0.35);

      &::after {
         content: 'REMOVE';
         color: var(--col);
         display: block;
         opacity: 0;

         font-size: 1.5em;
         width: 12rem;
         text-align: center;
         letter-spacing: .2em;
         font-weight: bold;
         transition: .3s;
      }
   }

   a.unstick-button:hover::after {
      opacity: 1;
   }
}

/* color presets */
.sticky-note.green {
   --col: rgb(120, 240, 136);
}

.sticky-note.red {
   --col: rgb(241, 101, 101);
}

.sticky-note.pink {
   --col: rgb(241, 101, 187);
}

.sticky-note.blue {
   --col: rgb(131, 205, 255);
}

/* fall animation */

.sticky-note.sticky-fall {
   pointer-events: none;
   animation: fall-left 3s ease-in-out forwards;
   transition: .3s;
}


@keyframes fall-left {
   0% {
      margin-top: 0;
   }

   40% {
      rotate: 30deg;
      translate: -10em 0;
   }

   50% {
      opacity: 1;
   }

   80% {
      rotate: -30deg;
      translate: 10em 0;
   }

   100% {
      rotate: 0deg;
      translate: 0 0;
      opacity: 0;
      margin-top: 100vh;
   }
}