:root {
    --pill-color: white;
    /* --pill-length: 500px; */
    --orange: #eb690b;
    --sticky-apply-btn-width: 200px;
    --sticky-apply-btn-height: 90px;
    --added-speed-value: 0s;
}

#sticky-apply-btn {
    position: fixed;
    z-index: 100;
    top: 30%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: var(--sticky-apply-btn-width);
    height: var(--sticky-apply-btn-height);
    background-color: var(--orange);
    background: linear-gradient(to right, #eb690b 0%, #009e88 100%);
    background: linear-gradient(135deg,  #eb690b 0%,#009e88 100%);
    border: 3px solid white;
    border-right: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

    font-family: Consolas, 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px !important;
    font-weight: 600;
    text-decoration: none;
    /* text-transform: uppercase; */
    text-align: center;
    color: white;
    text-shadow: 0 0 2px black;
    transition: all .25s;
    /* border: 1px solid red; */
}

#sticky-apply-btn:hover {
    width: calc(var(--sticky-apply-btn-width) + 100px);
}

#sticky-apply-btn > span {
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 767px) {
    #sticky-apply-btn {
      transform-origin: top right;
      transform: scale(.8);
    }
  }

#decoration {
    position: absolute;
    left: -120px;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(10, 1fr);
    place-items: stretch;
    gap: 2px;
    height: 90px;
    width: 400px;
    transform: rotate(-45deg);
    transition: all .25s ease-in-out;
    /* z-index: 1; */
    /* border: 1px solid transparent; */
    /* background-color: rgba(0,0,0,.25); */
    /* mix-blend-mode: overlay; */
}

#sticky-apply-btn:hover #decoration {
    gap: 8px;
    height: 120px;
    /* width: 700px; */
}

.pill {
    display: block;
    /* background: linear-gradient(to left, var(--pill-color), transparent); */

    /* https://colorzilla.com/gradient-editor/#ffffff+25,ffffff+75,ffffff+93,ffffff+100&0+0,0+25,0.5+75,0.75+93,1+100 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 75%,rgba(255,255,255,0.75) 93%,rgba(255,255,255,1) 100%);

    /* opacity: 0.6; */
    border-radius: 40%;
    filter: drop-shadow(0px 0px 3px white) drop-shadow(0 0 5px white);
    transform: translateX(-250px);
    /* mix-blend-mode: overlay; */
}

@keyframes pill-float {
    from {
        transform: translateX(-250px);
    }

    to {
        transform: translateX(250px);
    }
}

#pill-1 {
    grid-column: 4 / span 8;
    grid-row: 5 / span 3;
}

#pill-2 {
    grid-column: 10 / span 4;
    grid-row: 6 / span 1;
}

#pill-3 {
    grid-column: 8 / span 3;
    grid-row: 3 / span 1;
}

#pill-4 {
    grid-column: 4 / span 3;
    grid-row: 3 / span 1;
}

#pill-5 {
    grid-column: 6 / span 4;
    grid-row: 9 / span 1;
}

#pill-6 {
    grid-column: 11 / span 1;
    grid-row: 9 / span 1;
}

#pill-7 {
    grid-column: 13 / span 2;
    grid-row: 10 / span 1;
}

#pill-8 {
    grid-column: 13 / span 3;
    grid-row: 8 / span 1;
}

#pill-9 {
    grid-column: 14 / span 3;
    grid-row: 4 / span 1;
}

#pill-10 {
    grid-column: 12 / span 1;
    grid-row: 4 / span 1;
}

#decoration > #pill-1 {
    animation: calc(3s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 1s;
}

#decoration > #pill-2 {
    animation: calc(2s - var(--added-speed-value)) infinite pill-float linear;
}

#decoration > #pill-3 {
    animation: calc(6s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.1s;
}

#decoration > #pill-4 {
    animation: calc(7s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.3s;
}

#decoration > #pill-5 {
    animation: calc(6s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.4s;
}

#decoration > #pill-6 {
    animation: calc(7s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.5s;
}

#decoration > #pill-7 {
    animation: calc(8s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.6s;
}

#decoration > #pill-8 {
    animation: calc(3s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.7s;
}

#decoration > #pill-9 {
    animation: calc(11s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.8s;
}

#decoration > #pill-10 {
    animation: calc(9s - var(--added-speed-value)) infinite pill-float linear;
    animation-delay: 0.4s;
}