body{
    background-color: #040926;
    color: #8CDEFD;
    font-family: DM Sans;
}
article{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
header{
    text-align: center;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.contact-info{
    text-align: center;
    align-items: center;
    width: 100%;
    justify-content: center;
    -webkit-animation: displayContactIcons 13.3s forwards;
    animation: displayContactIcons 13.3s forwards;
}

@keyframes displayContactIcons {
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}
@-webkit-keyframes displayContactIcons {
    0%   {opacity: 0;}
    90%  {opacity: 0;}
    100% {opacity: 1;}
}

.contact-info>a{
    color: inherit;
    font-size: 250%;
    padding: 10px;
}
#line-1,#line-2{
    white-space: nowrap; /* keep text in one line */
    overflow: hidden; /* hide text behind the cursor */
    margin: 0.5rem auto;

}

#line-1 {
    border-right: 2px solid #040926;
    /* define animation types for text + cursor */
    animation: animated-text_1 6s steps(30, end) 1s 1 normal both,
    animated-cursor_1 900ms steps(30, end) 8;
    font-size: 1.25em;

}

#line-2 {
    border-right: 2px solid #040926;

    /* define animation types for text + cursor */
    animation: animated-text_2 5s steps(30, end) 1s 1 normal both,
    animated-cursor_2 900ms steps(30, end) 5.3;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

@keyframes animated-cursor_1 {
    from {
        border-right-color: #152441;
    }
    to {
        border-right-color: #487492;
    }
}

@keyframes animated-cursor_1 {
    from {
        border-right-color: #152441;
    }
    to {
        border-right-color: #487492;
    }
}

@keyframes animated-cursor_2 {
    from {
        border-right-color: #152441;
    }
    to {
        border-right-color: #487492;
    }
}

@keyframes animated-text_1 {
    from {
        width: 0;
    }
    to {
        width: 20rem;
    }
}

@keyframes animated-text_2 {
    from {
        width: 0;
    }
    to {
        width: 10.5rem;
    }
}