@import url(https://fonts.googleapis.com/css?family=Nova+Mono&display=swap);

.title-box {
    display: flex;
    /*   border:1px solid red; */
    height: 100%;
    align-items: center;
}

svg {
    display: block;
    font: 15em "Nova Mono", serif;
    width: 1560px;
    height: 300px;
    margin: 0 auto;
}
svg text {
    display: block;
    padding-top: 10px;
}
#title-hd {display: block;}
#title-mobile {display: none;}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0;
    animation: stroke-offset 5.5s infinite linear;
    text-shadow: 0 0 10px #b73cff;
}

.text-copy:nth-child(1) {
    stroke: #12b7ff;
    animation-delay: -1s;
}

.text-copy:nth-child(2) {
    stroke: #3880ff;
    animation-delay: -2s;
}

.text-copy:nth-child(3) {
    stroke: #9969ff;
    animation-delay: -3s;
}

.text-copy:nth-child(4) {
    stroke: #b244ff;
    animation-delay: -4s;
}

.text-copy:nth-child(5) {
    stroke: #9300ff;
    animation-delay: -5s;
}

@keyframes stroke-offset {
    100% {
        stroke-dashoffset: -35%;
    }
}


@media (max-width: 1920px) {
    svg {
        width: 1000px;
        height: 200px;
        font-size: 10em;
    }
    .text-copy {stroke-width: 3px;}
}

@media (max-width: 1280px) {
    svg {
        width: 750px;
        height: 150px;
    }
}

@media (max-width: 768px) {
    svg {
        width: 400px;
        height: 300px;
    }
    #title-hd {display: none;}
    #title-mobile {display: block;}
}

@media (max-width: 580px) {
    svg {
        height: 250px;
        font-size: 9.2em;
    }
    .text-copy {stroke-width: 2.5px;}
}