@media (min-width: 768px){
    .mobile_break{
        display: none;
    }
}

.education_section {
    justify-content: center;
    color: white;
}

.typewriter {
    width: fit-content;
    height: fit-content;
    position: relative;
    margin: 0 auto;
}

.line_wrapper{
    width: fit-content;
}

.line {
    display: block;
    white-space: nowrap;
    
    width: 0;
    overflow: clip;
    font-size: 1.75em;
    font-size: bold;
}

.mcgill_university
,.brebeuf{
    width: 25vw;
}

.mcgill_progress_container{
    display: flex;
    color: white;
}

.line1.animate{
    display: flex;
    border-right: .15em solid var(--apple_blue);
    animation: typing 2s steps(30, end) forwards,
               line_fade_out 0s steps(1, start) 2s forwards; 

    margin-bottom: 2vh;
}
    .mcgill_progress_container::before {
        content: '';
        display: inline-block;
        width: 30vw; /* gap of 30vw between McGill and expected dates */
    }



.line2.animate {
    border-right: .15em solid var(--background_gray);
    animation: typing 2s steps(30, end) forwards 2s, 
               line_fade_in 0s steps(1, start) 2s forwards,
               line_fade_out 0s steps(1, start) 4s forwards; 
    text-indent: 5vw;
}

.line3.animate {
    border-right: .15em solid var(--background_gray);
    animation: typing 1s steps(30, end) forwards 4s, 
               line_fade_in 0s steps(1, start) 4s forwards,
               line_fade_out 0s steps(1, start) 5s forwards,
               blink_caret 1s step-end infinite 8s;
    text-indent: 5vw;

    margin-bottom: 4vh;
}


.line4.animate{
    display: flex;
    border-right: .15em solid var(--background_gray);
    animation: typing 2s steps(30, end) 5s forwards , 
               line_fade_in 0s steps(1, start) 5s forwards,
               line_fade_out 0s steps(1, start) 7s forwards; 

    margin-bottom: 2vh;
}
    .brebeuf_dates::before{
        content: '';
        display: inline-block;
        width: 30vw;
    }


.line5.animate {
    border-right: .15em solid var(--background_gray);
    animation: typing 1s steps(30, end) forwards 7s, 
               line_fade_in 0s steps(1, start) 7s forwards,
               line_fade_out 0s steps(1, start) 8s forwards; 
    text-indent: 5vw;
}


.cursor {
    display: inline-block;
    position: absolute;
    left: 0; 
    bottom: 0;
    height: 1.2em;
    width: .15em;
    background-color: var(--apple_blue);
    animation: blink_caret 1s step-end infinite;
}

/* Each line has its own typing animation */
    @keyframes typing {
        from { width: 0; }
        to { width: 100%}
    }




@keyframes line_fade_out {
    from { border-right-color: var(--apple_blue); }
    to { border-right-color: var(--background_gray); }
}

@keyframes line_fade_in{
    from { border-right-color:  var(--background_gray); }
    to { border-right-color: var(--apple_blue); }
}

@keyframes blink_caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--apple_blue); }
}