/* **************
Created using a tutorial from Redstapler
************** */

html{overflow:hidden;position:fixed}
body {
	  overscroll-behavior: none;
	  -webkit-overflow-scrolling: touch;
	
  width: 100vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position:fixed;
  cursor: url('textures/cursor.png') 2 5, auto;

}

.lil-gui{display:none!important;}
canvas{width:100%;height:100%;position:fixed;background:#000;top:0;left:0;z-index:13000;display:flex;  align-items: center; color:white;  justify-content: center;font-size:5vw;
-webkit-overflow-scrolling: touch;
}

#loader{width:100%;height:100%;position:fixed;top:0;left:0;z-index:15000;display:flex;  align-items: center; color:white;  justify-content: center;font-size:3vw;

}
#loader span {
	  animation: blinker 2s ease infinite;

	
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#grain-container{
	position: fixed;
    z-index: 33300;
    inset: 0;
    pointer-events: none;
mix-blend-mode: normal;
display:none!important;


}

.grain-frame{
	height: 300%;
    width: 300%;
    background-image: url(grain.png);
    opacity: 0.035;
    -webkit-animation: animateGrain 8s steps(5) infinite;
    animation: animateGrain 8s steps(15) infinite;
	
}

@-webkit-keyframes animateGrain{0%,100%{-webkit-translate:0 0;-moz-translate:0 0;-ms-translate:0 0;translate:0 0;}10%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}20%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}30%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}40%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}50%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}60%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}70%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}80%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}90%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}100%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}}

@keyframes animateGrain{0%,100%{-webkit-translate:0 0;-moz-translate:0 0;-ms-translate:0 0;translate:0 0;}10%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}20%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}30%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}40%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}50%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}60%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}70%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}80%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}90%{-webkit-translate:-5% -10%;-moz-translate:-5% -10%;-ms-translate:-5% -10%;translate:-5% -10%;}100%{-webkit-translate:-15% -20%;-moz-translate:-15% -20%;-ms-translate:-15% -20%;translate:-15% -20%;}}

canvas{position:fixed;}

#go-opensea{
	position:fixed;z-index:14000;background:none;top:0;left:0;width:30px;height:30px;border-radius: 50%;
	color:black;
	display:flex;
	border:3px solid white;
	align-items: center;
  justify-content: center;
  transition:opacity 0.3s, width 0.5s, height 0.5s;
  font-weight:600;
  animation: gradient-border 10s infinite;
  pointer-events:none;
	}

@keyframes gradient-border {
	0% {
		border: 3px solid red;
	}
	20% {
		border: 3px solid orange;
	}
	40% {
		border: 3px solid yellow;
	}
	60% {
		border: 3px solid green;
	}
	80% {
		border: 3px solid blue;
	}
	100% {
		border: 3px solid purple;
	}
}

	#go-opensea span.objkt{display:flex;width:101%;height:101%; align-items: center;font-family: 'Chakra Petch', sans-serif!important;opacity:0;
	background-image:url('textures/objkt.png');transition: all 0.5s;border-radius:50%;
  justify-content: center;text-align:center;background-size: 100%; box-shadow:inset 0 0 3px  rgba(0,0,0,0.4); position:absolute;}
  
  	#go-opensea span.foundation{display:flex;width:101%;height:101%; align-items: center;font-family: 'Chakra Petch', sans-serif!important;opacity:0;
	background-image:url('textures/foundation.png');transition: all 0.5s;border-radius:50%;
  justify-content: center;text-align:center;background-size: 100%; box-shadow:inset 0 0 3px  rgba(0,0,0,0.4); position:absolute;}
  
  #go-opensea span.superrare{display:flex;width:101%;height:101%; align-items: center;font-family: 'Chakra Petch', sans-serif!important;opacity:0;
	background-image:url('textures/superrare.png');transition: all 0.5s;border-radius:50%;
  justify-content: center;text-align:center;background-size: 100%; box-shadow:inset 0 0 3px  rgba(0,0,0,0.4); position:absolute;}
  
  #button-start{
	  position:relative;
	display:none;
	cursor: url('textures/hand.png') 8 3, auto;
    padding: 2.5vw 3vw;
    font-size: 2vw;
    border: 0.2vw solid white;
    border-radius: 8vw;
	transition:all 0.5s;
  
  }
  
  .gradient-background {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#button-holder{bottom:20px;position:fixed;z-index:14500;width:100%;text-align:center;}

#play-pause-button{color:white;font-size:1vw;padding:0.7vw 1.3vw;border-radius:500px;border:0.15vw solid white;background:none;opacity:0.3;transition:all 0.5s;margin:0 auto;display:block;position:relative;float:left;text-transform:lowercase;}
#play-pause-button:hover{opacity:1;}

.mobilebody #play-pause-button {font-size:4vw;opacity:1!important; padding:3vw 3vw;}

@media only screen and (orientation: landscape) {
    .mobilebody #play-pause-button {
        font-size: 2vw!important;
        opacity: 1!important;
        padding: 1vw 1.5vw!important;

    }
	
	.mobilebody #info-mus{font-size:2vw!important;opacity:1!important;padding:1vw 2vw!important;}
	.mobilebody #button-start {
    font-size: 2vw!important;
	border: 0.3vw solid white!important;
    border-radius: 10vw!important;
    padding: 2vw 4vw!important;
}
}
.mobilebody #info-mus{font-size:4vw;opacity:1!important;padding:3vw 5vw;}
.mobilebody #button-start {border: 0.6vw solid white;border-radius:10vw;padding: 4vw 8vw;} 
.mobilebody #go-opensea{display:none!important}
.mobilebody #info-mus span{display:none;}
#button-start:hover{box-shadow:-3px 3px 5px rgba(0,0,0,0.2)}
.mobilebody #button-start{font-size:4vw;}

.mobilebody #loader{font-size:4vw;}









.mobilebody #go-opensea{}
button{	cursor: url('textures/hand.png') 8 3, auto;
}
#info-mus{color:white;font-size:1vw;padding:0.7vw 1.1vw;border-radius:50%;border:0.15vw solid white;background:none;opacity:0.3;transition:all 0.5s;display:block;position:relative;float:left;margin-left:20px;text-transform:lowercase;}
#info-mus:hover{opacity:1;}
#butandi{margin:0 auto;position:relative;display:inline-block;}
#info-mus span {position:absolute; left:145%; color:white; height:100%;display:inline; white-space:nowrap;text-transform:none;opacity:0;transition:all 0.5s}
#info-mus:hover span{opacity:1;}