body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364);
    opacity: 0;
    animation: fadeInBackground 2s forwards 3s;
}

p {
    padding: 50px;
    position: relative;
    font-family: 'CalSans SemiBold';
    font-size: 6em;
    overflow: hidden;
    animation: animateBackground 3s linear forwards, fadeInText 2s forwards 3s, glow 3s ease-in-out 5s infinite;
}

@keyframes animateBackground {
    0% {
        background: linear-gradient(90deg, #000, #fff, #000);
        background-repeat: no-repeat;
        background-size: 80%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
        background-position: -500%;
    }
    100% {
        background: linear-gradient(90deg, #000, #fff, #000);
        background-repeat: no-repeat;
        background-size: 80%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
        background-position: 500%;
    }
}

@font-face {
    font-family: 'CalSans SemiBold';
    src: url('CalSans-SemiBold.woff2') format('woff2');
}

@keyframes fadeInBackground  {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInText {
    0% {
        background: unset;
        -webkit-text-fill-color: unset;
        -webkit-background-clip: unset;
        color:#000;
    }
    100% {
        background: unset;
        -webkit-text-fill-color: unset;
        -webkit-background-clip: unset;
        color:#FFF;
        text-shadow: 0 0 16px #000;
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 0 16px #000, 0 0 0px #fff;
    }
    40% {
        text-shadow: 0 0 16px #000, 0 0 8px #fff;
    }
    100% {
        text-shadow: 0 0 16px #000, 0 0 0px #fff;
    }
}

@media only screen and (max-width: 800px) {
  p {
    font-size: 3em;
  }
}

@media only screen and (max-width: 500px) {
  p {
    font-size: 2em;
  }
}