body { font-family: canada-type-gibson, sans-serif; font-size: .5rem; font-weight: 300; font-size: 1.25rem; display: grid; flex-direction: column; justify-content: center; overflow: hidden; } img { border-radius: 8px; margin: auto; } .alerts { display: grid; justify-content: center; width: 1040px; text-align: center; } .content { display: flex; align-content: center; justify-content: center; } .text-shadows { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #f07a6a; font-family: bungee, sans-serif; font-size: calc(.25rem + 5vw); font-weight: 400; text-transform: uppercase; text-align: center; margin: 0; color: #f6aca2; animation: shadows 1.5s ease-in infinite, move 1.5s ease-in infinite; letter-spacing: 0.4rem; } .fade-in { animation: fadeIn ease 6s; -webkit-animation: fadeIn ease 6s; -moz-animation: fadeIn ease 6s; -o-animation: fadeIn ease 6s; -ms-animation: fadeIn ease 6s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @keyframes shadows { 0% { text-shadow: none; } 10% { text-shadow: 3px 3px 0 #f49b90; } 20% { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d; } 30% { text-shadow: 3px 3px 0 #f28b7d, 6px 6px 0 #f28b7d, 9px 9px #f07a6a; } 40% { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #ee6352; } 50% { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #ee6352; } 60% { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a, 12px 12px 0 #ee6352; } 70% { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d, 9px 9px #f07a6a; } 80% { text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d; } 90% { text-shadow: 3px 3px 0 #f49b90; } 100% { text-shadow: none; } } @keyframes move { 0% { transform: translate(0px, 0px); } 40% { transform: translate(-12px, -12px); } 50% { transform: translate(-12px, -12px); } 60% { transform: translate(-12px, -12px); } 100% { transform: translate(0px, 0px); } }