.side-decoration {
    position: fixed;
    z-index: 2;
    pointer-events: auto;
    image-rendering: pixelated;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.side-decoration:active {
    cursor: grabbing;
}

.deco-1 {
    top: 10%;
    left: 5%;
    width: 240px;
    animation: float1 8s ease-in-out infinite;
}

.deco-2 {
    top: 10%;
    right: 6%;
    width: 240px;
    animation: float2 10s ease-in-out infinite;
    border: 4px solid #000000;
}

.deco-3 {
    top: 40%;
    left: 15%;
    width: 240px;
    animation: float3 6s ease-in-out infinite;
    border: 4px solid #000000;
}

.deco-4 {
    top: 40%;
    right: 12%;
    width: 360px;
    animation: float4 12s ease-in-out infinite;
    border: 4px solid #000000;
}

.deco-5 {
    top: 70%;
    left: 10%;
    width: 240px;
    animation: float5 9s ease-in-out infinite;
    border: 4px solid #000000;
}

.deco-6 {
    bottom: 10%;
    right: 30%;
    width: 240px;
    animation: float6 7s ease-in-out infinite;
}

/* animations */
@keyframes float1 {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(10px, -15px) rotate(5deg);
    }

    50% {
        transform: translate(-5px, -25px) rotate(-5deg);
    }

    75% {
        transform: translate(-10px, -10px) rotate(3deg);
    }
}

@keyframes float2 {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-15px, 20px) rotate(-7deg);
    }

    66% {
        transform: translate(15px, -15px) rotate(7deg);
    }
}

@keyframes float3 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(0, -20px) scale(1.1);
    }
}

@keyframes float4 {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }
}

@keyframes float5 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(10deg);
    }
}

@keyframes float6 {
    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, -10px);
    }

    75% {
        transform: translate(-5px, -15px);
    }
}