/* RGB EFFECT */ .rgb-animate { animation-iteration-count: infinite; animation-duration: 40s; animation-name: rgb_anim; } /* RGB HOVER EFFECT */ .rgb-animate-hvr:hover { animation-iteration-count: infinite; animation-duration: 20s; animation-name: rgb_anim; } /* RGB ANIMATION EFFECT */ @keyframes rgb_anim { from { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(360deg); } to { filter: hue-rotate(0deg); } } /* CSS */ * { margin: 0; padding: 0; color: white; font-family: "Montserrat"; font-weight: 600; letter-spacing: 0.1em; } .content { min-height: 50vh; display: flex; flex-flow: column; justify-content: center; align-content: center; align-items: center; background: black; } .content:last-child { background: #de6161; /* fallback for old browsers */ background: -webkit-linear-gradient( to right bottom, #2657eb, #de6161 ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right bottom, #2657eb, #de6161 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } a { text-decoration: none; } .btn { padding: 20px 45px; background: #5c258d; /* fallback for old browsers */ background: -webkit-linear-gradient( to right bottom, #4389a2, #5c258d ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right bottom, #4389a2, #5c258d ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }