svg {
    width: 100%;
}

path {
    stroke: #fff;
    fill: #fff;
    stroke-width: 0.1em;
}

.light {
    stroke-width: 0em;
    animation: spawn 4s linear forwards;
}

.underline {
    opacity: 1;
}

.entertainment {
    stroke-width: 0em;
    animation: spawn 5s linear forwards;
}

.music {
    stroke-width: 0em;
    animation: spawn 3s linear forwards;
}

.spacer {
    animation: spawn 6s linear forwards;
}

.title {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 10;
    animation: dash 2s linear forwards;
}

.skipredraw {
    animation: none;
}

@keyframes spawn {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
        fill: none;
    }
    
    30% {
        stroke-dashoffset: 500;
        fill: rgba(255, 255, 255, 0);
    }
    
    90% {
        stroke-dashoffset: 250;
        fill: rgba(255, 255, 255, 0.5);
    }
    
    100% {
        stroke-dashoffset: 0;
        fill: rgba(255, 255, 255, 1);
        stroke-width: 0em;
    }
}