div.angercode-words
{
    position       : relative;
    width          : 100%;
    aspect-ratio   : 2;
    overflow       : hidden;
    background     : white;
    container-type : size;
}

div.angercode-largeslugs
{
    box-sizing            : border-box;
    position              : absolute;
    z-index               : 11;
    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-gradient
{
    height     : 100%;
    position   : absolute;
    width      : 20%;
    background : white;
    position   : absolute;
    z-index    : 10;
    top        : 0;
    
    &.left
    {
        background : rgb(255, 255, 255);
        background : linear-gradient(90deg, rgba(255, 255, 255, 1) 34%, rgba(255, 255, 255, 0) 100%);
        left       : 0;
    }
    
    &.right
    {
        background : rgb(255, 255, 255);
        background : linear-gradient(270deg, rgba(255, 255, 255, 1) 34%, rgba(255, 255, 255, 0) 100%);
        right      : 0;
    }
}

div.angercode-single-slug
{
    
    user-select    : none;
    display        : inline-block;
    vertical-align : middle;
    position       : relative;
    box-sizing     : border-box;
    font-size      : 100cqh;
    line-height    : 100%;
    width          : max-content;
    text-align     : left;
    background     : #2c2c2c;
    padding        : 10px 20px;
    color          : white;
    overflow       : hidden;
    transform      : rotate(-1deg);
    font-family    : 'markazi';
    text-transform : uppercase;
    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         : calc(100% - 25px);
    
    &:nth-child( 1 )
    {
        position : relative;
        left     : -40px;
    }
    
    &:nth-child( 4 )
    {
        position : relative;
        right    : -40px;
    }
    
    &:nth-child(even)
    {
        text-align : right;
    }
    
    &:nth-child(odd)
    {
        text-align : left;
    }
}

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
{
    transition  : transform 300ms linear;
    width       : max-content;
    height      : 100%;
    line-height : 100%;
}

div.angercode-single-word
{
    user-select  : none;
    font-family  : 'markazi';
    font-variant : small-caps;
    box-sizing   : border-box;
    float        : left;
    margin       : 5px 10px;
    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;
    }
}