:root {
    --body-bg-start: #9674d9;
    --body-bg-end: #402080;
    --wrapper-bg-start: #d2acf1;
    --wrapper-bg-end: #7e4a9a;
    --circle-size: 4rem;       /* overall button size */
}

.page-wrapper {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: var(--wrapper-bg-start);
}
.post-wrapper {
    padding: 3rem;
}


.audio-title {
    display: flex;
    align-items: center;
    gap: 1em;
    width: auto;
    justify-content: flex-start;
}

.title-text {
    flex: none;
    text-align: left;
    margin-right: 0.5em;
}
.title-text.right {
    text-align: right;
    margin-right: 0;
    margin-left: 0.5em;
}

.audio-player {
    flex-shrink: 0;
}

.image-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.image-item {
    position: absolute;
    pointer-events: auto;
    width: 10%;
    height: auto;
    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
}





#zaba01 { top: 52vh; left: 52vw; transform: rotate(3deg); z-index: 4;}
#zaba02 { top: 62vh; left: 56vw; transform: rotate(-12deg); z-index: 5; }
#zaba03 { top: 62vh; left: 54vw; transform: rotate(4deg); }
#zaba04 { top: 45vh; left: 62vw; transform: rotate(-3deg); z-index: 3; }
#zaba05 { top: 52vh; left: 64vw; transform: rotate(8deg); }
#zaba06 { top: 62vh; left: 63vw; transform: rotate(-6deg); z-index: 1; }

#inrainbows01 { top: 85vh; left: 38vw; transform: rotate(-5deg); z-index: 4; }
#inrainbows02 { top: 109vh; left: 30vw; transform: rotate(7deg); z-index: 2; }
#inrainbows03 { top: 104vh; left: 35vw; transform: rotate(-3deg); }
#inrainbows04 { top: 83vh; left: 32vw; transform: rotate(4deg); z-index: 3; }
#inrainbows05 { top: 89vh; left: 25vw; transform: rotate(-8deg); }
#inrainbows06 { top: 106vh; left: 23vw; transform: rotate(6deg); z-index: 1; }

#boltcutters01 { top: 131vh; left: 55vw; transform: rotate(4deg); z-index: 4; }
#boltcutters02 { top: 144vh; left: 57vw; transform: rotate(-7deg); z-index: 2; }
#boltcutters03 { top: 152vh; left: 56vw; transform: rotate(5deg); }
#boltcutters04 { top: 125vh; left: 64vw; transform: rotate(-4deg); z-index: 3; }
#boltcutters05 { top: 136vh; left: 67vw; transform: rotate(9deg); }
#boltcutters06 { top: 154vh; left: 65vw; transform: rotate(-5deg); z-index: 3; }

#twinfan01 { top: 173vh; left: 37vw; transform: rotate(-6deg); z-index: 4; }
#twinfan02 { top: 187vh; left: 34vw; transform: rotate(8deg); z-index: 3; }
#twinfan03 { top: 205vh; left: 36vw; transform: rotate(-4deg); z-index: 4; }
#twinfan04 { top: 217vh; left: 39vw; transform: rotate(20deg); }
#twinfan05 { top: 184vh; left: 28vw; transform: rotate(-9deg); }
#twinfan06 { top: 193vh; left: 25vw; transform: rotate(7deg); z-index: 1; }
#twinfan07 { top: 209vh; left: 30vw; transform: rotate(-3deg); z-index: 2; }

#gliss01 { top: 237vh; left: 54vw; transform: rotate(5deg); z-index: 2;}    
#gliss02 { top: 247vh; left: 52vw; transform: rotate(-8deg); z-index: 4; }
#gliss03 { top: 265vh; left: 55vw; transform: rotate(4deg); }
#gliss04 { top: 238vh; left: 64vw; transform: rotate(-5deg); z-index: 3; }
#gliss05 { top: 261vh; left: 65vw; transform: rotate(10deg); }
#gliss06 { top: 254vh; left: 59vw; transform: rotate(-6deg); z-index: 5; }

#feels01 { top: 288vh; left: 31vw; transform: rotate(-4deg); z-index: 4; }
#feels02 { top: 295vh; left: 38vw; transform: rotate(6deg); z-index: 2; }
#feels03 { top: 299vh; left: 24vw; transform: rotate(-3deg); }
#feels04 { top: 303vh; left: 32vw; transform: rotate(4deg); z-index: 3; }
#feels05 { top: 305vh; left: 37vw; transform: rotate(-7deg); }
#feels06 { top: 314vh; left: 28vw; transform: rotate(5deg); z-index: 4; }


.text-left p {
    margin-right: 50%;
}

body {
    background: var(--body-bg-start);
    transition: none;
}

.text-right {
    justify-content: right;
    text-align: right;
    justify-items: right;
}
.text-right p {
    margin-left: 50%;
}