div.angercode-words-boundaries
{
    position       : relative;
    width          : 100vw; /*calc(100vw + 100px);*/
    max-width      : calc(1600px - (2 * var(--angercode-max-padding))) !important; /*calc(100vw + 100px) !important;*/
    left           : 50%;
    transform      : translateX(-50%);
    aspect-ratio   : 1;
    z-index        : 1;
    height         : 304px;
    container-type : size;
    margin-bottom  : 70px !important;

    .angercode-words
    {
        box-sizing : border-box;
        position   : relative;
        width      : 100%;
        height     : 100%;
        top        : 2px;
        max-height : 100% !important;

        .glassplate
        {
            position        : absolute;
            width           : 100%;
            height          : 100%;
            top             : 0;
            left            : calc(50% - 50%);
            transform       : translateZ(100px);
            background      : transparent;
            overflow        : hidden;
            filter          : blur(5px);
            backdrop-filter : blur(5px);
            z-index         : 1;
            
            div
            {
                box-sizing       : border-box;
                width            : calc(100% / 32);
                height           : calc(100% / 10.8);
                float            : left;
                background-color : var(--accent);
                opacity          : calc(1 / var(--blurindex));
                
                &:nth-child( even )
                {
                    animation : angercode-glassbox-blurfader calc((var(--blurindex) * 1s) / 5) infinite alternate;
                }
                
                &:nth-child( odd )
                {
                    animation : angercode-glassbox-blurfader calc((var(--blurindex) * 1s) / 5) infinite alternate-reverse;
                }
            }
        }
        
        svg.blobs
        {
            display      : block;
            position     : absolute;
            top          : 2px;
            height       : 100%;
            aspect-ratio : 2;
            
            &.right
            {
                right : -50px;
            }
            
            &.left
            {
                left : -50px;
            }
        }
    }
    
    .waves
    {
        opacity   : 1;
        position  : absolute;
        top       : -3px;
        height    : 5px !important;
        width     : 100% !important;
        clip-path : polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        
        &.rotated
        {
            top       : unset;
            bottom    : -1px !important;
            transform : rotate(180deg) scale(-1);
        }
    }
    
    
    .parallax1 > use
    {
        animation : move-forever1 10s linear infinite;
        
        &:nth-child(1)
        {
            animation-delay : -2s;
        }
    }
    
    .parallax2 > use
    {
        animation : move-forever2 8s linear infinite;
        
        &:nth-child(1)
        {
            animation-delay : -2s;
        }
    }
    
    .parallax3 > use
    {
        animation : move-forever3 6s linear infinite;
        
        &:nth-child(1)
        {
            animation-delay : -2s;
        }
    }
    
    .parallax4 > use
    {
        animation : move-forever4 4s linear infinite;
        
        &:nth-child(1)
        {
            animation-delay : -2s;
        }
    }
    
    .out-top
    {
        animation        : rotate 20s linear infinite;
        transform-origin : 13px 25px;
    }
    
    .in-top
    {
        animation        : rotate 10s linear infinite;
        transform-origin : 13px 25px;
    }
    
    .out-bottom
    {
        animation        : rotate 25s linear infinite;
        transform-origin : 84px 93px;
    }
    
    .in-bottom
    {
        animation        : rotate 15s linear infinite;
        transform-origin : 84px 93px;
    }
    
    div.angercode-largeslugs
    {
        box-sizing            : border-box;
        position              : absolute;
        z-index               : 999;
        top                   : 0;
        left                  : 15%;
        width                 : 70%;
        padding               : 10cqh;
        height                : 100%;
        opacity               : 0.8;
        display               : grid;
        grid-template-columns : 1fr;
        grid-template-rows    : repeat( 4, 1fr );
    }
    
    div.angercode-single-slug
    {
        
        user-select    : none;
        display        : inline-block;
        vertical-align : middle;
        position       : relative;
        box-sizing     : border-box;
        font-size      : 60cqh;
        line-height    : 100%;
        width          : max-content;
        text-align     : left;
        background     : #191919 !important;
        padding        : 10px 20px;
        color          : var(--bright) !important;
        overflow       : hidden;
        transform      : rotate(-1deg);
        font-family    : bitcountgrid!important;
        text-transform : lowercase;
        word-break     : keep-all;
        
        transition     : all 300ms ease-in-out;
        
        &.inactive
        {
            opacity   : 0;
            transform : scale(0.2) rotate(9deg);
        }
        
    }
    
    div.angercode-single-slug-body
    {
        
        display        : block;
        container-type : size;
        box-sizing     : border-box;
        width          : 100%;
        height         : 100%;
        text-align     : center;
        
    }
    
    div.angercode-words-rotator-line
    {
        position       : relative;
        width          : 100%;
        height         : 10cqh;
        min-height     : 10px;
        overflow       : hidden;
        transform      : rotate(-1deg);
        container-type : size;
    }
    
    div.angercode-words-rotator-inner
    {
        width       : max-content;
        height      : 100%;
        line-height : 100%;
    }
    
    div.angercode-single-word
    {
        user-select  : none;
        font-family  : bitcountgrid!important;
        font-variant : small-caps;
        box-sizing   : border-box;
        float        : left;
        margin       : 10px 20px;
        line-height  : 100%;
        font-size    : 100cqh;
        z-index      : 0;
    }
    
    div.angercode-looking-glass
    {
        position : absolute;
        z-index  : 20;
        top      : 0;
        left     : 0;
        right    : 0;
        bottom   : 0;
    }
    
    @media ( max-height : 1199px )
    {
        div.angercode-words
        {
            max-height : 30vh;
        }
    }
    
    @media ( min-height : 1200px )
    {
        div.angercode-words
        {
            max-height : 20vh;
        }
    }
}

@keyframes angercode-glassbox-blurfader
{
    from
    {
        opacity : calc(1 / var(--blurindex));
    }
    to
    {
        opacity : 0;
    }
}

@keyframes move-forever1
{
    0%
    {
        transform : translate(85px, 0%);
    }
    100%
    {
        transform : translate(-90px, 0%);
    }
}

@keyframes move-forever2
{
    0%
    {
        transform : translate(-90px, 0%);
    }
    100%
    {
        transform : translate(85px, 0%);
    }
}

@keyframes move-forever3
{
    0%
    {
        transform : translate(85px, 0%);
    }
    100%
    {
        transform : translate(-90px, 0%);
    }
}

@keyframes move-forever4
{
    0%
    {
        transform : translate(-90px, 0%);
    }
    100%
    {
        transform : translate(85px, 0%);
    }
}

@keyframes rotate
{
    100%
    {
        transform : rotate(360deg);
    }
}