/**
   Coded by /u/j0be in scss.
   See scss source here -> http://codepen.io/j0be/pen/MKRVyN
*/

HTML,
BODY {
    height: 100%;
}
BODY {
    background: #082330;
    background-size: .12em 100%;
    font: 16em/1 Arial;
}
.text--line {
    font-size: .5em;
}
svg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 7% 28%;
    stroke-width: 3px;
    animation: stroke-offset 9s infinite linear;
}
.text-copy:nth-child(1) {
    stroke: #360745;
    stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
    stroke: #D61C59;
    stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
    stroke: #E7D84B;
    stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
    stroke: #EFEAC5;
    stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
    stroke: #1B8798;
    stroke-dashoffset: 35%;
}
@keyframes stroke-offset {
    50% {
        stroke-dashoffset: 35%;
        stroke-dasharray: 0 87.5%;
    }
}
body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}
.pyro > .before,
.pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
    to {
        box-shadow: -102px 20.33333px #d500ff, 35px -276.66667px #00ffd5, -230px -59.66667px #ff00b7, -29px -295.66667px #e6ff00, 29px -178.66667px #2b00ff, 16px -213.66667px #ff0062, 84px -322.66667px #6600ff, 146px -303.66667px #006fff, -158px -367.66667px #ff001e, -62px -210.66667px #00eeff, -143px -171.66667px #0088ff, -146px -109.66667px #00ff6f, 173px -122.66667px #ff00d9, -202px 31.33333px #00c4ff, 141px -86.66667px #ff9100, 17px -333.66667px #ff005e, 59px -132.66667px #aeff00, 0px 65.33333px #ff9d00, -138px 19.33333px #00ffd5, 125px -110.66667px #00ffd0, -54px -298.66667px #ff0d00, 97px -201.66667px #ff5900, 224px 47.33333px #e6ff00, -1px -115.66667px #11ff00, -70px -237.66667px #bbff00, -14px -321.66667px #00ff37, -120px -279.66667px #7bff00, 160px -150.66667px #ff0026, -173px 3.33333px #00e1ff, -93px -274.66667px #ff009d, 102px -415.66667px #ff7700, 223px -50.66667px #00d9ff, -170px 52.33333px #0900ff, 218px 43.33333px deepskyblue, 167px -102.66667px cyan, 217px 34.33333px #00ffae, 110px -393.66667px #007bff, -201px -259.66667px blue, -90px -328.66667px #f700ff, 193px -351.66667px #00ff48, 42px -388.66667px #a600ff, -222px -264.66667px #00e1ff, 178px -93.66667px #ff0055, -11px -400.66667px #ffbf00, 176px -103.66667px #62ff00, -120px -86.66667px #00ffe1, 85px -29.66667px #ff7b00, -219px -376.66667px #ffc400, -144px -262.66667px #ff0055, 18px -98.66667px #00ffaa, 36px -310.66667px #00fffb;
    }
}
@-moz-keyframes bang {
    to {
        box-shadow: -102px 20.33333px #d500ff, 35px -276.66667px #00ffd5, -230px -59.66667px #ff00b7, -29px -295.66667px #e6ff00, 29px -178.66667px #2b00ff, 16px -213.66667px #ff0062, 84px -322.66667px #6600ff, 146px -303.66667px #006fff, -158px -367.66667px #ff001e, -62px -210.66667px #00eeff, -143px -171.66667px #0088ff, -146px -109.66667px #00ff6f, 173px -122.66667px #ff00d9, -202px 31.33333px #00c4ff, 141px -86.66667px #ff9100, 17px -333.66667px #ff005e, 59px -132.66667px #aeff00, 0px 65.33333px #ff9d00, -138px 19.33333px #00ffd5, 125px -110.66667px #00ffd0, -54px -298.66667px #ff0d00, 97px -201.66667px #ff5900, 224px 47.33333px #e6ff00, -1px -115.66667px #11ff00, -70px -237.66667px #bbff00, -14px -321.66667px #00ff37, -120px -279.66667px #7bff00, 160px -150.66667px #ff0026, -173px 3.33333px #00e1ff, -93px -274.66667px #ff009d, 102px -415.66667px #ff7700, 223px -50.66667px #00d9ff, -170px 52.33333px #0900ff, 218px 43.33333px deepskyblue, 167px -102.66667px cyan, 217px 34.33333px #00ffae, 110px -393.66667px #007bff, -201px -259.66667px blue, -90px -328.66667px #f700ff, 193px -351.66667px #00ff48, 42px -388.66667px #a600ff, -222px -264.66667px #00e1ff, 178px -93.66667px #ff0055, -11px -400.66667px #ffbf00, 176px -103.66667px #62ff00, -120px -86.66667px #00ffe1, 85px -29.66667px #ff7b00, -219px -376.66667px #ffc400, -144px -262.66667px #ff0055, 18px -98.66667px #00ffaa, 36px -310.66667px #00fffb;
    }
}
@-o-keyframes bang {
    to {
        box-shadow: -102px 20.33333px #d500ff, 35px -276.66667px #00ffd5, -230px -59.66667px #ff00b7, -29px -295.66667px #e6ff00, 29px -178.66667px #2b00ff, 16px -213.66667px #ff0062, 84px -322.66667px #6600ff, 146px -303.66667px #006fff, -158px -367.66667px #ff001e, -62px -210.66667px #00eeff, -143px -171.66667px #0088ff, -146px -109.66667px #00ff6f, 173px -122.66667px #ff00d9, -202px 31.33333px #00c4ff, 141px -86.66667px #ff9100, 17px -333.66667px #ff005e, 59px -132.66667px #aeff00, 0px 65.33333px #ff9d00, -138px 19.33333px #00ffd5, 125px -110.66667px #00ffd0, -54px -298.66667px #ff0d00, 97px -201.66667px #ff5900, 224px 47.33333px #e6ff00, -1px -115.66667px #11ff00, -70px -237.66667px #bbff00, -14px -321.66667px #00ff37, -120px -279.66667px #7bff00, 160px -150.66667px #ff0026, -173px 3.33333px #00e1ff, -93px -274.66667px #ff009d, 102px -415.66667px #ff7700, 223px -50.66667px #00d9ff, -170px 52.33333px #0900ff, 218px 43.33333px deepskyblue, 167px -102.66667px cyan, 217px 34.33333px #00ffae, 110px -393.66667px #007bff, -201px -259.66667px blue, -90px -328.66667px #f700ff, 193px -351.66667px #00ff48, 42px -388.66667px #a600ff, -222px -264.66667px #00e1ff, 178px -93.66667px #ff0055, -11px -400.66667px #ffbf00, 176px -103.66667px #62ff00, -120px -86.66667px #00ffe1, 85px -29.66667px #ff7b00, -219px -376.66667px #ffc400, -144px -262.66667px #ff0055, 18px -98.66667px #00ffaa, 36px -310.66667px #00fffb;
    }
}
@-ms-keyframes bang {
    to {
        box-shadow: -102px 20.33333px #d500ff, 35px -276.66667px #00ffd5, -230px -59.66667px #ff00b7, -29px -295.66667px #e6ff00, 29px -178.66667px #2b00ff, 16px -213.66667px #ff0062, 84px -322.66667px #6600ff, 146px -303.66667px #006fff, -158px -367.66667px #ff001e, -62px -210.66667px #00eeff, -143px -171.66667px #0088ff, -146px -109.66667px #00ff6f, 173px -122.66667px #ff00d9, -202px 31.33333px #00c4ff, 141px -86.66667px #ff9100, 17px -333.66667px #ff005e, 59px -132.66667px #aeff00, 0px 65.33333px #ff9d00, -138px 19.33333px #00ffd5, 125px -110.66667px #00ffd0, -54px -298.66667px #ff0d00, 97px -201.66667px #ff5900, 224px 47.33333px #e6ff00, -1px -115.66667px #11ff00, -70px -237.66667px #bbff00, -14px -321.66667px #00ff37, -120px -279.66667px #7bff00, 160px -150.66667px #ff0026, -173px 3.33333px #00e1ff, -93px -274.66667px #ff009d, 102px -415.66667px #ff7700, 223px -50.66667px #00d9ff, -170px 52.33333px #0900ff, 218px 43.33333px deepskyblue, 167px -102.66667px cyan, 217px 34.33333px #00ffae, 110px -393.66667px #007bff, -201px -259.66667px blue, -90px -328.66667px #f700ff, 193px -351.66667px #00ff48, 42px -388.66667px #a600ff, -222px -264.66667px #00e1ff, 178px -93.66667px #ff0055, -11px -400.66667px #ffbf00, 176px -103.66667px #62ff00, -120px -86.66667px #00ffe1, 85px -29.66667px #ff7b00, -219px -376.66667px #ffc400, -144px -262.66667px #ff0055, 18px -98.66667px #00ffaa, 36px -310.66667px #00fffb;
    }
}
@keyframes bang {
    to {
        box-shadow: -102px 20.33333px #d500ff, 35px -276.66667px #00ffd5, -230px -59.66667px #ff00b7, -29px -295.66667px #e6ff00, 29px -178.66667px #2b00ff, 16px -213.66667px #ff0062, 84px -322.66667px #6600ff, 146px -303.66667px #006fff, -158px -367.66667px #ff001e, -62px -210.66667px #00eeff, -143px -171.66667px #0088ff, -146px -109.66667px #00ff6f, 173px -122.66667px #ff00d9, -202px 31.33333px #00c4ff, 141px -86.66667px #ff9100, 17px -333.66667px #ff005e, 59px -132.66667px #aeff00, 0px 65.33333px #ff9d00, -138px 19.33333px #00ffd5, 125px -110.66667px #00ffd0, -54px -298.66667px #ff0d00, 97px -201.66667px #ff5900, 224px 47.33333px #e6ff00, -1px -115.66667px #11ff00, -70px -237.66667px #bbff00, -14px -321.66667px #00ff37, -120px -279.66667px #7bff00, 160px -150.66667px #ff0026, -173px 3.33333px #00e1ff, -93px -274.66667px #ff009d, 102px -415.66667px #ff7700, 223px -50.66667px #00d9ff, -170px 52.33333px #0900ff, 218px 43.33333px deepskyblue, 167px -102.66667px cyan, 217px 34.33333px #00ffae, 110px -393.66667px #007bff, -201px -259.66667px blue, -90px -328.66667px #f700ff, 193px -351.66667px #00ff48, 42px -388.66667px #a600ff, -222px -264.66667px #00e1ff, 178px -93.66667px #ff0055, -11px -400.66667px #ffbf00, 176px -103.66667px #62ff00, -120px -86.66667px #00ffe1, 85px -29.66667px #ff7b00, -219px -376.66667px #ffc400, -144px -262.66667px #ff0055, 18px -98.66667px #00ffaa, 36px -310.66667px #00fffb;
    }
}
@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }
    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }
    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }
    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }
    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}
footer {
  position: absolute;
  font-size: 5%;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 1rem;
  color: #33B5FF;
  text-align: center;
}