:root {
    --shadow-color: #FF9E9E;
    --shadow-color-light: white;
}

/** {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}*/

.neon-div {
    font-family: "Archivo", sans-serif;
    background-color: #192824;
}

    .neon-div p {
        margin: calc(50vh - 40px) auto 0 auto;
        font-size: 30px;
        text-transform: uppercase;
        font-family: "Archivo Black", "Archivo", sans-serif;
        font-weight: normal;
        display: block;
        height: auto;
        text-align: center;
    }

    .neon-div .logo-1 {
        color: white;
        animation: neon 3s infinite;
    }

@keyframes neon {
    0% {
        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }

    50% {
        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
    }

    100% {
        text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light), 0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light), 0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
    }
}

/*https://codepen.io/AllThingsSmitty/pen/VzXrgY*/
.neon-container {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #010a00;
    background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /*font-size: 1rem;*/
}


    .neon-container .neon-item {
        width: 100%;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff, 0 0 90px #0ff, 0 0 100px #0ff, 0 0 150px #0ff;
    }
        .neon-container .neon-item h1 {
            /*font-size: calc(1vw + 1vh + 1.5vmin);*/
            font-size: 2vw;
            /*font-weight: 100;*/
            text-align: center;
            text-transform: uppercase;
        }

@import url('https://fonts.googleapis.com/css?family=Raleway|Sacramento');

.text-effect-parent {
    background: #e2e2;
    background-image: repeating-linear-gradient( to bottom, transparent 7px, rgba(0, 0, 0, 0.8) 9px, rgba(0, 0, 0, 0.8) 13px, transparent 13px );
}

.text-effect {
    color: #fff6a9;
    font-family: 'Sacramento', cursive;
    font-size: 20px;
    font-weight: 20;
    text-align: center;
    text-transform: capitalize;
    margin: 20px auto 0;
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    position: relative;
    animation: animate 2s ease-in-out infinite;
}

@keyframes animate {
    20%, 24%, 55% {
        color: #111;
        text-shadow: none;
    }

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        color: #fff6a9;
        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    }
}

@media only screen and (max-width: 990px) {
    .text-effect {
        font-size: 100px;
    }
}

@media only screen and (max-width: 767px) {
    .text-effect {
        font-size: 80px;
    }
}

@media only screen and (max-width: 479px) {
    .text-effect {
        font-size: 60px;
    }
}

@media only screen and (max-width: 359px) {
    .text-effect {
        font-size: 45px;
    }
}