#cover { 
	position: absolute; 
	left: 0; top:0; background: rgba(0,0,0,0.5);
	 width: 100%; height: 100%; color: #fff; z-index: 9000;
	  display: flex; align-items: center; justify-content: center;
}
#cover .group { text-align: center; }
#cover .title { 
	font-size: 4em; position: relative;}
#cover .title .by { 
	font-size: 0.4em; position: absolute; white-space: nowrap; 
	left: 100%; bottom: 10px; 
	margin-left: 10px;
	font-weight: normal;
	text-align: left;
}


#cover .subtitle { 
	font-size: 2.4em; margin: 25px 0;}
#cover .playbtn { 
	font-size: 48px; 
	border: 3px solid #fff; 
	border-radius: 100px; 
	display: inline-block;
	width: 100px; height: 100px; 
	text-indent: 4px;
	cursor:pointer;
	transition: all 0.4s ease;
	transform: scale(1.2);
    display: flex;
    align-items: center;
    justify-content: center;
	pointer-events: none;
    margin:auto;
}

#cover .playbtn i { position: relative; left: 2px; }

#cover .group > div { opacity:0; }

#cover .playbtn.loaded { transform: scale(1); pointer-events: auto;}
#cover .playbtn:active { transform: scale(1.2);}


#cover .project-logo { position: absolute; left: 0; bottom: 0; padding: 10px 0;  width: 100%; }
#cover .project-logo img { width: auto; height: 48px; }


.aiText { 
    z-index: 5000; 
    position: fixed; 
    left: 0; top: 0; 
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    color: #fff; 
    text-shadow: 0.5px 0.5px 5px #0066cc; 
    font-size: 32px;   
    font-weight: bold;
    
    opacity: 1;
    animation-duration: 1.5s;
    animation-name: fadeInfadeOut;
    animation-iteration-count: infinite;
}

@keyframes fadeInfadeOut {
    10% {
      opacity: 1;
    }
    50% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
  }