.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
  
    display: flex;
    align-items: center;
}

#drop-area {
    border: 1px solid #979797;
    height: 250px;
}

.normal {
    transition: all 1s ease-in-out;
    filter: none;
    translate: 0px -1px;
}

.clicked {
    animation: 0.2s clicked;
    translate: 0px 0px;
    filter: brightness(90%) sepia(100) saturate(100) hue-rotate(70deg);
}
  
@keyframes clicked {
    0% {
        translate: 0px -1px
    }

    50% {
        translate: 0px -3px;
    }

    100% {
        translate: 0px -1px;
    }
}


.normal2 {
    transition: all 1s ease-in-out;
    filter: none;
    translate: 0px -5px;
    filter: brightness(70%)
}

.clicked2 {
    animation: 0.2s clicked2;
    translate: 0px -5px;
    filter: brightness(50%) sepia(100) saturate(100) hue-rotate(0deg);
}
  
@keyframes clicked2 {
    0% {
        translate: 0px -5px
    }

    50% {
        translate: 0px -7px;
    }

    100% {
        translate: 0px -5px;
    }
}

.link {
    color: white;
    text-decoration: none;
    cursor: pointer;

    background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1)
    );
    background-size: 0% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}

.link:hover {
    background-size: 0 3px, 100% 3px;
  }
  
.link::before {
    content: "";
    display: inline;
    width: 0%;
    height: 0.2em;
    position: absolute;
    bottom: 0;
    background-color: var(--clr-primary);
    transition: width 0.2s ease-in;
}

.link:hover::before,
.link:focus::before {
    width: 100%;
}