#decoration{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.decorator:nth-of-type(1), .decorator:nth-of-type(3), .decorator:nth-of-type(5){
    width: 100px;
    aspect-ratio: 1;
    background-color: rgba(56, 3, 86, 0.35);
    border-radius: 0.5rem;
}

.decorator:nth-of-type(2), .decorator:nth-of-type(4), .decorator:nth-of-type(6){
    width: 250px;
    aspect-ratio: 1;
    background-color: rgba(56, 3, 86, 0.35);
    border-radius: 0.5rem;
}

.decorator{
    rotate: 45deg;
    flex-shrink: none;
    position: fixed;
}

.decorator:nth-of-type(2){
    top: 62px;
    left: -175px;
}

.decorator:nth-of-type(4){
    top: 237px;
    right: -150px;
}

.decorator:nth-of-type(6){
    top: 412px;
    left: -175px;
}

.decorator:nth-of-type(1){
    top: 112px;
    right: 50px;
    animation: spinClockwise 8s ease 0s infinite alternate;
}

.decorator:nth-of-type(3){
    top: 312px;
    left: 50px;
    animation: spinAnticlockwise 8s ease 0s infinite alternate;
}

.decorator:nth-of-type(5){
    top: 512px;
    right: 50px;
    animation: spinClockwise 8s ease 0s infinite alternate;
}

@keyframes spinClockwise{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

@keyframes spinAnticlockwise{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(-360deg);
    }
}