.textMain { font-size: 4rem; -webkit-animation: glow 9s ease-in-out infinite alternate; -moz-animation: glow 9s ease-in-out infinite alternate; animation: glow 9s ease-in-out infinite alternate; } @-webkit-keyframes glow { 0% { text-shadow: 0 0 0px #000; } 90%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #0073e6; } 95% { text-shadow: 0 0 15px #fff, 0 0 20px #4da6ff, 0 0 30px #4da6ff; } } @media (max-width: 600px) { .textMain { font-size: 2rem; } } @media (max-width: 992px) { .textMain { font-size: 3rem; } } .backImage { background-image: url('img/darkthree02.jpg'); background-repeat: no-repeat; animation: zoom-bg 4s ease-in-out infinite; } @keyframes zoom-bg { 0%, 80% { background-size: 100% 100%; filter: brightness(80%); } 90% { background-size: 500% 500%; background-position: 50% 50%; filter: brightness(120%); } 100% { background-size: 100% 100%; filter: brightness(80%); } } .frontImage { padding: 0rem; background: -webkit-linear-gradient(135deg, #000 30%, #D8951C 45%, #FAF2A2 50%, #C8850C 55%, #000 70%); background-size: 250% 250%; animation: gradient-bg 6s ease-in-out infinite; } @keyframes gradient-bg { 0% { background-position: 0% 50%; filter: brightness(90%); box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6; } 40% { filter: brightness(105%); box-shadow: 0 0 40px #fff, 0 0 50px #4da6ff, 0 0 60px #4da6ff, 0 0 70px #4da6ff, 0 0 80px #4da6ff, 0 0 90px #4da6ff, 0 0 100px #4da6ff; } 80% { background-position: 0% 50%; filter: brightness(90%); box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6; } 92% { background-position: 100% 50%; filter: brightness(110%); box-shadow: 0 0 0px #fff; } 100% { background-position: 0% 50%; filter: brightness(90%); box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6; } }