@font-face {font-family: 'VeteranTypewriter'; src: url('veterantypewriter.ttf');}
html, body {margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
#Overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; font-family: 'VeteranTypewriter', sans-serif;}
#Bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('1.png'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1;}
#Vid {position: absolute; top: 3%; left: 50%; height: 20%; transform: translateX(-50%);}
#Logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: InitLogo 9s linear forwards, LoopLogo 4s linear 9s infinite;}
@keyframes InitLogo {0% {width: 0%;} 55.56% {width: 50%;} 77.78% {width: 30%;} 100% {width: 60%;}}
@keyframes LoopLogo {0% {width: 60%;} 50% {width: 40%;} 100% {width: 60%;}}
#ComingSoon {position: absolute; bottom: 10%; left: 50%; width: 80%; transform: translateX(-50%); text-align: center; font-family: 'VeteranTypewriter', sans-serif; font-size: 8vw; color: #ff0000; animation: ColorAnim 8s infinite linear;}
@media screen and (max-width: 768px) {#ComingSoon {position: absolute; bottom: 10%; left: 2%; right: 2%; width: auto !important; transform: none !important; display: block !important; box-sizing: border-box; font-size: 14vw !important;}}
@keyframes ColorAnim {0% {filter: hue-rotate(0deg);} 100% {filter: hue-rotate(360deg);}}