.landing-page {
    position: relative;
    background: linear-gradient(to top, #393f4d 20%, #1d1e22 80%);
}
#title-name{
    animation: fill 0.5s ease forwards 3s;
}
#title-name path:nth-child(1){
    stroke-dasharray: 754.9266357421875px;
    stroke-dashoffset: 754.9266357421875px;
    animation: line-anim 2s ease forwards, fade 4s ease-in-out 4.1s infinite;
}
#title-name path:nth-child(2){
    stroke-dasharray: 506.4454650878906px;
    stroke-dashoffset: 506.4454650878906px;
    animation: line-anim 2s ease forwards 0.3s, fade 4s ease-in-out 4.4s infinite;
}
#title-name path:nth-child(3){
    stroke-dasharray: 383.08935546875px;
    stroke-dashoffset: 383.08935546875px;
    animation: line-anim 2s ease forwards 0.6s, fade 4s ease-in-out 4.7s infinite;
}
#title-name path:nth-child(4){
    stroke-dasharray: 441.6843566894531px;
    stroke-dashoffset: 441.6843566894531px;
    animation: line-anim 2s ease forwards 0.9s, fade 4s ease-in-out 5s infinite;
}
#title-name path:nth-child(5){
    stroke-dasharray: 506.4462890625px;
    stroke-dashoffset: 506.4462890625px;
    animation: line-anim 2s ease forwards 1.2s, fade 4s ease-in-out 5.3s infinite;
}
#title-name path:nth-child(6){
    stroke-dasharray: 239.3280029296875px;
    stroke-dashoffset: 239.3280029296875px;
    animation: line-anim 2s ease forwards 1.5s, fade 4s ease-in-out 5.4s infinite;
}
#title-name path:nth-child(7){
    stroke-dasharray: 515.2640380859375px;
    stroke-dashoffset: 515.2640380859375px;
    animation: line-anim 2s ease forwards 1.8s, fade 4s ease-in-out 5.7s infinite;
}
#title-name path:nth-child(8){
    stroke-dasharray: 467.8448486328125px;
    stroke-dashoffset: 467.8448486328125px;
    animation: line-anim 2s ease forwards 2.1s, fade 4s ease-in-out 6s infinite;
}
@keyframes line-anim {
    to{
        stroke-dashoffset: 0;
    }
}
@keyframes fill {
    from{
        fill: transparent;
    }
    to{
        fill: white;
    }
}
@keyframes fade {
    0% {
        stroke: white;
        fill: white;
    }
    50% {
        /* stroke: rgba(0,0,0,0.5); */
        fill: rgba(0,0,0,0.2);
    }
}
.landing-links {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 65vh;
    width: 85vw;
    overflow: hidden;
    
    /* border: 1px solid white; */
}
.land-link {
    text-decoration: none;
    color: white;
    margin: 0 1rem;
    cursor: pointer;
    z-index: 10000;
    transition: color 300ms;
}
.land-link:hover {
    color: black;
}
