/* assistance from https://codepen.io/alvarotrigo/pen/QWqLEGL */
h2 {
    margin-top: 0;
    margin-bottom: 10px;
}
.timeline-container {
    display: grid;
    width: 50%;
    grid-template-columns: 50px 16% 25% 25% 25%;

    .squished {
        width: 0px !important;
        height: 0px;
        padding: 0 !important;
        z-index: 10 !important;
        position: relative;
        display: none;
        
        h3 {
            visibility: hidden;
        }
        h4 {
            visibility: hidden;
        }
    }

    .timeline {
        margin-left: 25%;
        &.one,
        &.years {
            margin:0;
        }
        &.years {
            width: min-content;
        }
    }

    .year {
        height: calc(11px * 5.5);
        align-content: end;
        text-align: end;
        padding:0;
        padding-right: 5px;
        margin:0;
        width: min-content;
    }
    

    &.one {
        left: 10px
    }
    &.two {
        left: 20px
    }
    &.three {
        left:30px;
    }
    &.four {
        left: 40px;
    }

    .timeline-event {
        position: relative;
        list-style-type: none;
        cursor: pointer;
        background-color: #04202b;
        
        &.zero_month,
        &.one_month {
            height: calc(1px * 5.5);
        }
        &.two_month {
            height: calc(2px * 5.5);
        }
        &.three_month {
            height: calc(3px * 5.5);
        }
        &.four_month {
            height: calc(4px * 5.5);
        }
        &.five_month {
            height: calc(5px * 5.5);
        }
        &.six_month {
            height: calc(6px * 5.5);
        }
        &.eight_month {
            height: calc(8px * 5.5);
        }
        &.ten_month {
            height: calc(10px * 5.5);
        }
        &.eleven_month {
            height: calc(11px * 5.5);
        }
        &.thirteen_month {
            height: calc(13px * 5.5);
        }
        &.fourteen_month {
            height: calc(14px * 5.5);
        }
        &.sixteen_month {
            height: calc(16px * 5.5);
        }
        &.thirty_one_month {
            height: calc(31px * 5.5);
        }
        &.thirty_two_month {
            height: calc(32px * 5.5);
        }
        &.thirty_four_month {
            height: calc(34px * 5.5);
        }
        &.thirty_six_month {
            height: calc(36px * 5.5);
        }
        &.thirty_seven_month {
            height: calc(37px * 5.5);
        }
        &.fourty_four_month {
            height: calc(44px * 5.5);
        }
    }
    .card {
        margin: 0;
        width: 500px;
        min-height: 300px;
        padding: 0 15px;
        border-radius: 5px;
        background-color: #04202b;
        color: #ecfaff;
        border: none;
        z-index: 1000;
        position: absolute;
        right: 2vw;
        box-shadow: 4px 4px 9px 1px rgba(0, 0, 0, 0.4);

        .title {
            font-weight: bold;
            font-size: 18px;
            display: block;
            margin-bottom: 10px;
        }

        a { 
            color: #ecfaff !important;
            text-decoration: underline;
            &:visited {
            color: #ecfaff !important;  
            }
        }

        .card-body {
            text-align: left;
            z-index: 10;
        
            p {
                font-weight: unset;
                margin: 0.5em 0;
                line-height: 1.5;
            }
        }

        h4 {
            margin: 0.5em 0 0.2em 0;
        }
    }
    .green {
        background-color: #03562d !important;
        
        &.light {
            background-color: #4d9772 !important;
        }
    }

    .purple {
        background-color: #672477 !important;

        &.light {
            background-color: #614b67 !important;
        }
    }

    .orange {
        background-color: #b75105 !important;

        &.light {
            background-color: #8f6546 !important;
        }
    }
    
    .empty { 
        visibility: hidden;
    }
}
.mobile-timeline {
    display: none;
}
@media only screen and (max-width: 700px) {
        .picture.home,
        .timeline-container,
        .timeline-hint {
            display: none !important;
        }
        .mobile-timeline {
        display: block !important;
        .card {
            background-color: #04202b;
            color: white;
            padding: 10px;
            border-radius: 10px;
            
            &.empty {
                display: none;
            }
            &.zero_month,
            &.one_month,
            &.two_month,
            &.three_mont,
            &.four_month,
            &.five_month,
            &.six_month,
            &.eight_month,
            &.ten_month,
            &.eleven_month,
            &.thirteen_month,
            &.fourteen_month,
            &.sixteen_month,
            &.thirty_one_month,
            &.thirty_two_month,
            &.thirty_four_month,
            &.thirty_six_month,
            &.thirty_seven_month, 
            &.fourty_four_month {
                margin: 10px 0;
            }
            
            &.green {
                background-color: #03562d;
            }
            &.orange {
                background-color: #b75105;
            }
            &.purple {
                background-color: #672477;
            }

            a { 
                color: #ecfaff !important;
                text-decoration: underline;
                &:visited {
                  color: #ecfaff !important;  
                }
            }
        }
    }
    h2 {
        margin: 10px 0 !important;
    }

}

@media only screen and (min-width: 800px) and (max-width: 1000px) {
    .timeline-container {
        .card {
            position: absolute;
            right: 3vw;
        }
    }
    h2 {
        margin: 10px 0 !important;
    }
}

@media only screen and (min-width:1001px) and (max-width:1080px) {
    .timeline-container {
        .card {
            position: absolute;
            right: 3vw;
        }
    }
}