@charset "utf-8";
/* CSS Document */
.intros #wrap { opacity: 0; }
#wrap { transition: opacity 1s ease 0s; }
.loading canvas,.loading iframe {animation: wrap .002s linear 0s infinite;}

@keyframes wrap {
0% { transform: translate(0,2vw);}
33.333% { transform: translate(2vw,0vw); }
66.666% { transform: translate(-2vw,0vw); }
100% { transform: translate(0,-2vw);}
}

 body,html { height: 100%; margin: 0; background-color: #000;}
.intros body { background-image: url("../img/Spinner-1s-200px.svg");  background-repeat: no-repeat; background-position: center; background-size: 15vw;}
        #load {  width: 100%; height: 100%; position: fixed; top:0; left: 0;  background-repeat: no-repeat; background-position: center; opacity: 0; z-index:1;  background-color: rgba(0,199,7,0.5);}
        .loading #load { opacity: 1; z-index: 4;}
        #load img { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
        canvas { width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0;}
        #explodeButton { box-sizing:border-box; display: inline-block; font-family: Arial, Helvetica, "sans-serif"; font-size:3vw; 
	
    cursor: pointer;
	margin: 0 auto; 
	
	padding:1em 4em; color:#fff; text-decoration:none; text-align:center; border-radius:.3em;  line-height:1; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffdf92+0,e1ad2f+100 */
/*background:#628684;*/ /* Old browsers */ border: 2px solid #fff;}
        #start {position:fixed; z-index: 1;top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center;
}
h1 { width: 100%;  color: #FFF; font-size: 14vw; text-align: center; margin: 0; font-weight: 500;margin-bottom: .5em;font-family: 'Inter', sans-serif;}
        .play #start { display: none;}
        img,iframe { width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0; border: none;}
        
         #close { width:60px; height:60px; position:fixed; top:0; right:0; cursor:pointer; background-image:url("../img/close.svg") ;background-repeat:no-repeat;background-size: 20px; background-position:center; z-index: 10; display:none; background-color: rgba(0,0,0,0.21); }
.play #close { display:block; }
        
        @media (orientation: landscape){
            #start h1 { font-size: 7vw;}
          #explodeButton { font-size:1.75vw; }
        }