/* text */ #banner-halloween-title.life > tspan { opacity: 1; } #banner-halloween-title-II { text-shadow: 0 4px 10px #ff000060; } #banner-halloween-title.life > #banner-halloween-title-II { animation: blinker 0.5s forwards; } @media (max-width: 767.98px) { #banner-halloween-title { transform: scale(1.4) translate(-90px, -120px); animation:none !important; } #banner-halloween-presenting { transform: scale(1.4) translate(-90px, -120px); } #banner-halloween-bats { display:none; } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } } @keyframes blinker { 10% { opacity: 0; } , 30% { opacity: 0.4; } , 60% { opacity: 0.2; } , 85% { opacity: 0.5; } , 100% { opacity: 0.9; } } svg g { color: unset; } /* stars */ .star { animation: linear infinite snow; } .star1 { animation-duration: 3s; } .star2 { animation-duration: 4s; } .star3 { animation-duration: 3.5s; } .star4 { animation-duration: 2s; } .star5 { animation-duration: 4s; } .star1 circle { r: 0.5; } .star2 circle { r: 0.75; } .star3 circle { r: 1.0; } .star4 circle { r: 1.2; } .star5 circle { r: 1.5; } @media (max-width: 767.98px) { .star { animation: none; fill-opacity: 0.5; } .star1 circle { r: 1; } .star2 circle { r: 1.5; } .star3 circle { r: 2; } .star4 circle { r: 2; } .star5 circle { r: 2.5; } } @keyframes twinkle { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes snow { 100% { transform: translateY(150px); } }