:root
{
    --timeline-min-width                 : 400px;
    --timeline-width                     : 75%;
    --timeline-container-width           : 100%;
    --timeline-transition                : all 400ms ease-in-out;
    --timeline-border-color              : #303030;
    --timeline-timestamp-color           : #8c8c8c;
    --timeline-timestamp-gradient-color  : #8c8c8c20;
    --timeline-timestamp-gradient-border : #8c8c8c60;
    --timeline-paragraph-background      : #ecececaa;
    --history-dropshadow                 : 0 0 5px 2px #cecece;
}

div#page.site
{
    overflow : unset !important;
}

div.angercode-history
{
    &.timeline
    {
        
        display        : flex;
        margin         : 0 auto;
        flex-wrap      : wrap;
        flex-direction : column;
        width          : var(--timeline-width);
        max-width      : var(--timeline-width);
        min-width      : var(--timeline-min-width);
        position       : relative;
        margin-top     : 40px;
        
        &:before
        {
            position   : absolute;
            left       : 50%;
            width      : 2px;
            height     : 100%;
            content    : '';
            margin     : 0 0 0 -1px;
            background : var(--timeline-border-color);
            opacity    : 0.5;
        }
        
        .timeline-item
        {
            
            .clearfix
            {
                clear : both;
            }
            
            h2.timeline-timestamp
            {
                background     : var(--timeline-timestamp-color);
                background     : linear-gradient(266deg, transparent 0%, var(--timeline-timestamp-gradient-color) 100%);
                font-size      : 2.3em !important;
                transition     : var(--timeline-transition);
                padding        : 10px 40px;
                margin-bottom  : 40px !important;
                left           : -40px;
                width          : calc(100% - 40px);
                text-transform : none !important;
                
                &:after
                {
                    content    : '';
                    position   : absolute;
                    bottom     : -2px;
                    left       : 0;
                    width      : 100%;
                    height     : 2px;
                    background : linear-gradient(266deg, transparent 0%, var(--timeline-timestamp-gradient-border) 100%);
                }
            }
            
            padding            : 40px 0;
            width              : calc(50% - 20px);
            box-sizing         : border-box;
            display            : flex;
            position           : relative;
            
            animation          : angercode-history-inViewPort ease both;
            animation-timeline : view();
            
            &:before
            {
                content        : attr(data-text);
                letter-spacing : 2px;
                width          : 100%;
                position       : absolute;
                border-left    : 5px solid var(--timeline-border-color);
                top            : 50%;
                transform      : translateY(-50%);
                padding        : 0 0 0 20px;
                right          : calc(-100% - 18px);
                z-index        : 99;
            }
            
            .timeline-content
            {
                img.history
                {
                    border-radius : var(--steinmetz-large-border-radius) var(--steinmetz-large-border-radius) var(--steinmetz-large-border-radius) 0;
                    border-bottom : 1px solid var(--steinmetz-design-header-color);
                    margin        : 0 20px 20px;
                    filter        : grayscale(100%);
                    box-shadow    : var(--history-dropshadow);
                }
            }
            
            p
            {
                background    : var(--timeline-paragraph-background);
                border-radius : 0 var(--steinmetz-large-border-radius) var(--steinmetz-large-border-radius) var(--steinmetz-large-border-radius);
                border-top    : 1px solid var(--steinmetz-design-header-color);
                margin        : 0 20px;
                padding       : 10px 20px !important;
                box-shadow    : var(--history-dropshadow);
            }
            
            &:nth-child(odd)
            {
                
                p
                {
                    border-radius : var(--steinmetz-large-border-radius) 0 var(--steinmetz-large-border-radius) var(--steinmetz-large-border-radius);
                }
                
                h2.timeline-timestamp,
                h3
                {
                    background : var(--timeline-timestamp-color);
                    background : linear-gradient(266deg, var(--timeline-timestamp-gradient-color) 0%, transparent 100%);
                    left       : unset;
                    right      : -40px;
                    text-align : right;
                }
                
                h2.timeline-timestamp
                {
                    &:after
                    {
                        background : linear-gradient(266deg, var(--timeline-timestamp-gradient-border) 0%, transparent 100%);
                    }
                }
                .timeline-content
                {
                    img.history
                    {
                        border-radius : var(--steinmetz-large-border-radius) var(--steinmetz-large-border-radius) 0 var(--steinmetz-large-border-radius);
                        float         : right;
                    }
                }
            }
            
            &:nth-child(even)
            {
                align-self : flex-end;
                
                &:before
                {
                    right        : auto;
                    text-align   : right;
                    left         : calc(-100% - 18px);
                    border-left  : none;
                    border-right : 5px solid var(--timeline-border-color);
                    padding      : 0 20px 0 0;
                    
                }
            }
            
        }
        
    }
}

/* mobile and smaller screens */
@media screen and ( max-width : 800px )
{
    
    div.angercode-history
    {
        &.timeline
        {
            
            max-width : 100%;
            width     : calc(100% - 40px);
            
            &:before
            {
                left : 0;
            }
            
            .timeline-item
            {
                
                h2.timeline-timestamp
                {
                    font-size : 2.4em !important;
                    margin    : 0 20px !important;
                }
                
                padding : 40px 0;
                width   : 100%;
                
                &:before
                {
                    transform : translateY(-10px);
                    right     : unset;
                    top       : 0;
                    left      : -2px;
                }
                
                &:nth-child(even)
                {
                    align-self : flex-start;
                    
                    &:before
                    {
                        transform    : translateY(-10px);
                        right        : unset;
                        top          : 0;
                        left         : -2px;
                        text-align   : left;
                        border-left  : 5px solid var(--timeline-border-color);
                        border-right : none;
                        padding      : 0 0 0 20px;
                        
                    }
                }
                
                
            }
            
        }
    }
    
    
}

@keyframes angercode-history-inViewPort
{
    0%
    {
        opacity   : .2;
        filter    : blur(5px);
        transform : scale(1.2) translateY(100px);
    }
    30%, 70%
    {
        opacity   : 1;
        filter    : blur(0);
        transform : translateY(0);
    }
    100%
    {
        opacity   : .2;
        filter    : blur(5px);
        transform : scale(1.2) translateY(-100px);
    }
}