.un_1 {
    animation: tracking-in-expand-fwd 3.5s cubic-bezier(0.215,0.610,0.355,1.000) infinite alternate
}

.un_2 {
    animation: focus-in-expand 3s cubic-bezier(.25,.46,.45,.94) infinite alternate both
}

.un_3 {
    animation: text-shadow-drop-tr 1s infinite alternate both
}

.un_4 {
    animation: text-shadow-drop-center 1s infinite alternate both
}

.un_5 {
    animation: text-shadow-pop-top 2s infinite alternate forwards
}

.un_6 {
    animation: bounce-left 3s infinite alternate both
}

.un_7 {
    animation: kenburns-top 3s ease-out infinite alternate-reverse both
}

.un_8 {
    animation: jello-horizontal 2s infinite alternate-reverse both
}

.un_9 {
    animation: heartbeat 1.5s ease-in-out infinite both
}

.un_10 {
    animation: shake-horizontal 3s cubic-bezier(.455,.03,.515,.955) infinite alternate-reverse both
}

.un_11 {
    animation: shake-lr 3s cubic-bezier(0.455,0.030,0.515,0.955) infinite reverse both
}

.un_12 {
    animation: jello-horizontal 3s infinite alternate both
}

.un_13 {
    animation: pulsate-bck 1s ease-in-out infinite both
}

.un_14 {
    animation: shake-right 4s cubic-bezier(0.455,0.030,0.515,0.955) infinite alternate both
}

.un_15 {
    animation: shake-left 4s cubic-bezier(0.455,0.030,0.515,0.955) infinite alternate both
}

.check_animation:before {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free';
    font-size: 15px;
    vertical-align: middle;
    color: #690029!important;
    font-weight: 900;
    position: absolute;
    right: 1px;
    bottom: 21px
}

.container_animation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: 10px;
    padding: 5px
}

.box_animation {
    width: 100px;
    height: 33px;
    border: 1px solid #e1e1e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border-radius: 8px;
    position: relative
}

@keyframes shake-left {
    0%,100% {
        transform: rotate(0deg);
        transform-origin: 0 50%
    }

    10% {
        transform: rotate(2deg)
    }

    20%,40%,60% {
        transform: rotate(-4deg)
    }

    30%,50%,70% {
        transform: rotate(4deg)
    }

    80% {
        transform: rotate(-2deg)
    }

    90% {
        transform: rotate(2deg)
    }
}

@keyframes shake-right {
    0%,100% {
        transform: rotate(0deg);
        transform-origin: 100% 50%
    }

    10% {
        transform: rotate(2deg)
    }

    20%,40%,60% {
        transform: rotate(-4deg)
    }

    30%,50%,70% {
        transform: rotate(4deg)
    }

    80% {
        transform: rotate(-2deg)
    }

    90% {
        transform: rotate(2deg)
    }
}

@keyframes pulsate-bck {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(0.9)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,0.75,1)
    }

    40% {
        transform: scale3d(0.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,0.85,1)
    }

    65% {
        transform: scale3d(0.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,0.95,1)
    }

    100% {
        transform: scale3d(1,1,1)
    }
}

@keyframes shake-lr {
    0%,100% {
        transform: rotate(0deg);
        transform-origin: 50% 50%
    }

    10% {
        transform: rotate(8deg)
    }

    20%,40%,60% {
        transform: rotate(-10deg)
    }

    30%,50%,70% {
        transform: rotate(10deg)
    }

    80% {
        transform: rotate(-8deg)
    }

    90% {
        transform: rotate(8deg)
    }
}

@keyframes shake-horizontal {
    0%,100% {
        transform: translateX(0)
    }

    10%,30%,50%,70% {
        transform: translateX(-10px)
    }

    20%,40%,60% {
        transform: translateX(10px)
    }

    80% {
        transform: translateX(8px)
    }

    90% {
        transform: translateX(-8px)
    }
}

@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out
    }

    10% {
        transform: scale(0.91);
        animation-timing-function: ease-in
    }

    17% {
        transform: scale(0.98);
        animation-timing-function: ease-out
    }

    33% {
        transform: scale(0.87);
        animation-timing-function: ease-in
    }

    45% {
        transform: scale(1);
        animation-timing-function: ease-out
    }
}

@keyframes bounce-left {
    0% {
        transform: translateX(-48px);
        animation-timing-function: ease-in;
        opacity: 1
    }

    24% {
        opacity: 1
    }

    40% {
        transform: translateX(-26px);
        animation-timing-function: ease-in
    }

    65% {
        transform: translateX(-13px);
        animation-timing-function: ease-in
    }

    82% {
        transform: translateX(-6.5px);
        animation-timing-function: ease-in
    }

    93% {
        transform: translateX(-4px);
        animation-timing-function: ease-in
    }

    25%,55%,75%,87%,98% {
        transform: translateX(0px);
        animation-timing-function: ease-out
    }

    100% {
        transform: translateX(0px);
        animation-timing-function: ease-out;
        opacity: 1
    }
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,0.75,1)
    }

    40% {
        transform: scale3d(0.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,0.85,1)
    }

    65% {
        transform: scale3d(0.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,0.95,1)
    }

    100% {
        transform: scale3d(1,1,1)
    }
}

@keyframes vibrate-1 {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px,2px)
    }

    40% {
        transform: translate(-2px,-2px)
    }

    60% {
        transform: translate(2px,2px)
    }

    80% {
        transform: translate(2px,-2px)
    }

    100% {
        transform: translate(0)
    }
}

@keyframes text-pop-up-tr {
    0% {
        transform: translateY(0) translateX(0);
        transform-origin: 50% 50%;
        text-shadow: none
    }

    100% {
        transform: translateY(-50px) translateX(50px);
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #cccccc,0 2px 0 #cccccc,0 3px 0 #cccccc,0 4px 0 #cccccc,0 5px 0 #cccccc,0 6px 0 #cccccc,0 7px 0 #cccccc,0 8px 0 #cccccc,0 9px 0 #cccccc,0 50px 30px rgba(0,0,0,0.3)
    }
}

@keyframes text-shadow-pop-top {
    0% {
        text-shadow: 0 0 #555555,0 0 #555555,0 0 #555555,0 0 #555555,0 0 #555555,0 0 #555555,0 0 #555555,0 0 #555555;
        transform: translateY(0)
    }

    100% {
        text-shadow: 0 -1px #555555,0 -2px #555555,0 -3px #555555,0 -4px #555555,0 -5px #555555,0 -6px #555555,0 -7px #555555,0 -8px #555555;
        transform: translateY(8px)
    }
}

@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 rgba(0,0,0,0)
    }

    100% {
        text-shadow: 0 0 18px rgba(0,0,0,0.35)
    }
}

@keyframes text-shadow-drop-tr {
    0% {
        text-shadow: 0 0 0 rgba(0,0,0,0)
    }

    100% {
        text-shadow: 6px -6px 18px rgba(0,0,0,0.35)
    }
}

@keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-700px);
        opacity: 0
    }

    40% {
        opacity: 0.6
    }

    100% {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        filter: blur(12px);
        opacity: 0
    }

    100% {
        filter: blur(0px);
        opacity: 1
    }
}

@keyframes kenburns-top {
    0% {
        transform: scale(1) translateY(0);
        transform-origin: 50% 16%
    }

    100% {
        transform: scale(1.25) translateY(-15px);
        transform-origin: top
    }
}

.note_gold {
    padding: 3px;
    border: 1px solid #d6d6d3;
    background: beige;
    border-radius: 12px;
    text-align: center;
    margin-top: 11px;
    color: #b60505;
    font-size: 10px;
}


.efekt {
    max-width: 100%;
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    border-radius: 7px 6px;
    color: white;
    background: transparent !important;
    border: 1px solid rgba(255, 0, 80, 0.5);
    box-shadow: 0 0 10px rgba(200, 0, 255, 0.4);
    animation: zoom-in-zoom-out 2s ease infinite, glow 3s ease-in-out infinite;
    font-weight: 600;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(200, 0, 255, 0.4), 0 0 20


.backglob {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 500px;
  z-index: 1; 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}