@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');







@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap');











/*font-family: 'Lato', sans-serif;



font-family: 'Inconsolata', monospace;



*/







html {



font-size:12px;



background-color:black;



color:white;



font-family: 'Lato', sans-serif;



}







body {



width:100vw;



height:100vh;



background-color:black;



overflow:hidden;



}





#planetbumphtitle {
	font-family: 'Inconsolata', monospace;
	font-size: 2.9vw;
	width: 40vw;
	position: absolute;
	top: 1%;
	left: 1%;
	z-index: 3;
	letter-spacing: 0.4rem;
	color: rgb(255, 255, 255);
	transition: transform 10s;
	text-transform: uppercase;
	text-shadow: -4px 4px 0 rgba(255, 255, 255,0.7), -6px 6px 0 rgba(255,255,255,0.5);
  min-width:max-content;
}

#planetbumph {
	font-family: 'Lato', sans-serif;
	font-size: 0.7vw;
	width: 43vw;
	position: absolute;
	top: 1%;
	left: 43%;
	z-index: 3;
}

  #planetbumph h3 {

    font-family: 'Inconsolata', monospace;

    letter-spacing:0.05vw;

  }


  .planetslottitle {
    font-family: 'Inconsolata', monospace;
    font-size: 2vw;
    letter-spacing: 8px;
    color: rgb(255, 255, 255);
    transition: color 1s, text-shadow 1s;
    text-transform: uppercase;
    text-shadow: -4px 4px 0 rgba(255, 255, 255,0.7), -6px 6px 0 rgba(255,255,255,0.5);
    text-align: center;
    position: absolute;
    width: 25vw;
    z-index: 2;
  }






#pst1 {
	top: 10vw;
	left: 10vw;
	transition: color 1s, text-shadow 1s;
}



#pst2 {
	top: 10vw;
	right: 10vw;
	transition: color 1s, text-shadow 1s;
}






.planetslot {
	border: 0.3vw dotted rgb(255,255,255);
	/* border-radius: 5%; */
	position: absolute;
	color: rgb(255,255,255);
	font-size: 1.6vw;
	text-align: center;
	display: flex;
	font-family: 'Lato', sans-serif;
	align-items: center;
	align-content: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 2;
}




.ps1in {
	top: 13.8vw;
	left: 9.8vw;
	width: 25vw;
	height: 25vw;
	transition: top 0.3s, left 0.3s, width 0.3s, height 0.3s;
	transition-timing-function: ease-in-out;
}




.ps2in {
	top: 13.8vw;
	right: 9.8vw;
	width: 25vw;
	height: 25vw;
	transition: top 0.3s, right 0.3s, width 0.3s, height 0.3s;
	transition-timing-function: ease-in-out;
}



.slot1out {
top:11.8vw;
transition:top 0.3s, left 0.3s, width 0.3s, height 0.3s;
transition-timing-function: ease-in-out;
}

.slot2out {
  top:11.8vw;
transition:top 0.3s, right 0.3s, width 0.3s, height 0.3s;
transition-timing-function: ease-in-out
}

  



#planetselector {
	width: 100vw;
	display: flex;
	position: absolute;
	bottom: 3%;
	left: 0%;
	flex-wrap: nowrap;
	flex-basis: auto;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 10.3vw;
	z-index: 7;
}


.planetchoice {
	width: 6vw;
	margin-left: 3vw;
	margin-right: 3vw;
	height: 6vw;
	font-family: 'Lato', sans-serif;
	position: relative;
	z-index: 3;
}


.planetempty {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	cursor: pointer;
	border: 0.25vw dotted white;
	z-index: 3;
	position: absolute;
	top: -0.5vw;
	left: -0.5vw;
	padding: 0.25vw;
}


.planetlogo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin-bottom: 17%;
	cursor: pointer;
	transition: opacity 0.3s;
	opacity: 1;
	z-index: 3;
	padding: 0.25vw;
	position: absolute;
	top: -0.25vw;
	left: -0.25vw;
}

.planetchoice span {
	font-family: 'Inconsolata', sans-serif;
	text-align: center;
	font-size: 1vw;
	letter-spacing: 1px;
	text-transform: uppercase;
	width: 100%;
	padding-bottom: 59px;
	display: block;
	width: 149%;
	position: absolute;
	left: -19%;
	top: 7.2vw;
	margin: auto;
}






  #testcontainer {
    width: 25vw;
    height: 25vw;
    position: absolute;
    left: 10vw;
    /* z-index: 2; */
    cursor: pointer;
    /* left: 10vw; */
    transition: opacity, 0.5s;
    z-index: 3;
  }






.tcin {



top: 14vw;



}



.slot2outtc {
  top:12vw;
  transition:top 0.3s, left 0.3s, width 0.3s, height 0.3s;
  transition-timing-function: ease-in-out;
  }




.tcout {

animation-name:bouncetc;
animation-duration: 0.3s;
}







@keyframes bouncetc {



0% {



top:14vw;



}







50% {



top:12vw;



}







100% {



top:14vw;



}






}




#testcontainer2 {
	width: 25vw;
	height: 25vw;
	position: absolute;
	right: 10vw;
	/* z-index: 2; */
	cursor: pointer;
	transition: opacity, 0.5s;
	z-index: 3;
}





.tc2in {



top:14vw;



}



.slot2outtc {
	top:12vw;
	transition:top 0.1s, left 0.2s, width 0.2s, height 0.2s;
	
	}

	
.slot1outtc {
	top:12vw;
	transition:top 0.1s, left 0.3s, width 0.3s, height 0.3s;
	}




.tc2out {



animation-name:bouncetc2;



animation-duration: 1s;



animation-fill-mode: both;



animation-timing-function: ease-in-out;



}







@keyframes bouncetc2 {



0% {



top:23%;



}







25% {



top:18%;



}







50% {



top:23%;



}







65% {



top:20%;



}







80% {



top:23%;



}







90% {



top:21%;



}







100% {



top:23%;



}



}







canvas {



width:100%;



height:100%;



cursor:pointer;



}







.planetoffshoot {
	position: absolute;
	width: max-content;
	height: max-content;
	border: 0.25vw dotted white;
	border-radius: 9%;
	color: white;
	font-size: 0.7vw;
	text-align: left;
	padding: 1%;
	padding-top: 2%;
	font-family: 'Source Sans Pro', sans-serif;
	/* z-index: 1; */
	z-index: 3;
}





.boxouttitle {
	font-size: 1.3vw;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	left: 0%;
	top: 4%;
	font-family: 'Inconsolata', monospace;
	color: rgb(255, 255, 255);
	text-shadow: -4px 4px 0 rgba(255, 255, 255,0.7), -6px 6px 0 rgba(255,255,255,0.5);
	letter-spacing: 1px;
	margin-bottom: 4%;
}





#options1 {
	left: 39vw;
	top: 13vw;
	z-index: 3;
	position: relative;
}






.optvisible {



transition:opacity 1s;



}






#opt1svg {
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 3;
	pointer-events: none;
	width: 100vw;
	height: 100vw;
}






#info1 {
	left: 36vw;
	top: 30vw;
	z-index: 3;
	position: absolute;
}






#inf1svg {



position: absolute;



top: 0%;



left: 0%;



z-index:3;



pointer-events:none;

width:100vw;

height:100vw;





}





#options2 {
	left: 52vw;
	top: 13vw;
	z-index: 3;
	position: absolute;
	/* width: 7vw; */
}







#opt2svg {



position: absolute;



top: 0;



left: 0;



z-index:3;



pointer-events:none;



width:100vw;

height:100vw;



}







.hideplanet {



opacity: 0;



transition:opacity, 0.5s;



}







.hideplanetfast {



opacity: 0;



transition:opacity, 0.1s;



}




#info2 {
	left: 52vw;
	top: 33vw;
	z-index: 3;
	position: absolute;
}


#inf2svg {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 3;

	pointer-events: none;

	width: 100vw;

	height: 100vw;

}







.hide {



opacity:0;



transition:opacity 1s;



}







.disable {



opacity:0;



transition:opacity 0.3s;



pointer-events:none;



}







.planetprompt {
	width: 25.4vw;
	height: 25.4vw;
	/* border-radius: 5%; */
	position: absolute;
	color: white;
	font-size: 1.8vw;
	text-align: center;
	display: flex;
	font-family: 'Inconsolata', sans-serif;
	align-items: center;
	align-content: center;
	justify-items: center;
	justify-content: center;
	text-transform: uppercase;
	/* z-index: 2; */
	background-color: rgba(0,0,0,1);
	pointer-events: none;
	opacity: 0;
	transition: opacity 1s;
	border-radius: 50%;
	z-index: 3;
}



#pp1 {
	top: 13.9vw;
	left: 9.9vw;
}



#pp2 {
	top: 13.9vw;
	right: 9.9vw;
}






.drop-hover {



opacity:1;



transition:opacity 1s;



}










#resetbutton {
	font-family: 'Inconsolata', monospace;
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	font-size: 1.1vw;
	border-radius: 50%;
	width: max-content;
	border: 3px solid rgb(255,255,255);
	transition: border 1s;
	color: white;
	position: absolute;
	top: 2vw;
	right: 4vw;
	cursor: pointer;
	z-index: 3;
	width: 7vw;
	height: 7vw;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.option {
	font-size: 0.9vw;
	margin-bottom: -1%;
	text-align: center;
	cursor: pointer;
	padding: 5%;
	transition: padding 1s ease-in-out;
	margin-left: auto;
	margin-right: auto;
	max-width: 8vw;
	margin-top: 5%;
	border: 2px solid rgba(0,0,0,0);
}






#options1 span .selected {



border: 2px solid rgb(255,255,255);



border-radius:5%;



}







#options2 span .selected {



border: 2px solid rgb(255,255,255);



border-radius:5%;



}







.selectedbounce {



animation-name: squiggle;



animation-duration: 0.3s;



animation-fill-mode: both;



animation-timing-function: ease-in-out;



}


#info1 span {
	width: 11vw;
	display: block;
  font-size:0.7vw;
}



#info2 span {

  width: 11vw;

display: block;

}











@keyframes move-background {



  from {



		-webkit-transform: translate3d(0px, 0px, 0px);



	}



	to {



		-webkit-transform: translate3d(1000px, 0px, 0px);



	}



}



@-webkit-keyframes move-background {



  from {



		-webkit-transform: translate3d(0px, 0px, 0px);



	}



	to {



		-webkit-transform: translate3d(1000px, 0px, 0px);



	}



}







@-moz-keyframes move-background {



	from {



		-webkit-transform: translate3d(0px, 0px, 0px);



	}



	to {



		-webkit-transform: translate3d(1000px, 0px, 0px);



	}



}







    @-webkit-keyframes move-background {



	from {



		-webkit-transform: translate3d(0px, 0px, 0px);



	}



	to {



		-webkit-transform: translate3d(1000px, 0px, 0px);



	}



}







.background-container{



	position: fixed;



	top: 0;



	left:0;



	bottom: 0;



	right: 0;



}







.stars {



 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;



 position: absolute;



	top: 0;



	bottom: 0;



	left: 0;



	right: 0;



	display: block;



  	z-index: 0;



}







.twinkling{



	width:10000px;



	height: 100%;



	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;



	background-size: 1000px 1000px;



    position: absolute;



    right: 0;



    top: 0;



    bottom: 0;



    z-index: 2;







    -moz-animation:move-background 70s linear infinite;



  -ms-animation:move-background 70s linear infinite;



  -o-animation:move-background 70s linear infinite;



  -webkit-animation:move-background 70s linear infinite;



  animation:move-background 70s linear infinite;







}







.clouds{



	width:10000px;



	height: 100%;



	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;



	background-size: 1000px 1000px;



    position: absolute;



    right: 0;



    top: 0;



    bottom: 0;



    z-index: 3;







   -moz-animation:move-background 150s linear infinite;



  -ms-animation:move-background 150s linear infinite;



  -o-animation:move-background 150s linear infinite;



  -webkit-animation:move-background 150s linear infinite;



  animation:move-background 150s linear infinite;



}



img{



  height: 70vh;



  width:70vh;



  position: absolute;



  z-index: 3;



  right: 20px;



}







#rbo1 {



border-radius: 50%;



border: 3px solid rgb(255,255,255);



position: absolute;



cursor: pointer;



z-index: 3;



pointer-events:none;



}







#rbo2 {



border-radius: 50%;



border: 3px solid rgb(255,255,255);



position: absolute;



cursor: pointer;



z-index: 3;



pointer-events:none;



}







.rbo1in {



width: 8vw;



height: 8vw;



top: 1.5vw;



right: 3.5vw;



transition: width 0.3s, height 0.3s,top 0.3s, right 0.3s, border 1s;



}







.rbo2in {



width: 9vw;



height: 9vw;



top: 1vw;



right: 3vw;



transition: width 0.5s, height 0.5s, top 0.5s, right 0.5s, border 1s;



}







.rbo1out {



width:9vw;



height:9vw;



top: 1vw;



right: 3vw;



transition: width 0.3s, height 0.3s, top 0.3s, right 0.3s, border 1s;



}







.rbo2out {



width: 11vw;



height: 11vw;



top: 0vw;



right: 2vw;



transition: width 0.5s, height 0.5s, top 0.5s, right 0.5s, border 1s;



}







.resetquiver {



animation-name: squiggle;



animation-duration: 0.3s;



animation-fill-mode: both;



animation-timing-function: ease-in-out;



}







#planetslottitle1 {
	font-size: 1.3vw;
	text-align: center;
	font-family: 'Lato', sans-serif;
	color: white;
	position: absolute;
	width: max-content;
	z-index: 2;
	top: 25.5vw;
	left: 15.9vw;
}


#planetslottitle2 {
	font-size: 1.3vw;
	text-align: center;
	font-family: 'Lato', sans-serif;
	color: white;
	position: absolute;
	width: max-content;
	z-index: 2;
	top: 25.5vw;
	right: 15.9vw;
}





@keyframes squiggle {







0% {



transform:skew(0deg, 0deg);



}







25% {



transform:skew(5deg, 5deg);



}







50% {



transform:skew(0deg,0deg);



}







75%{



transform:skew(-5deg, -5deg);



}







100% {



transform:skew(0deg,0deg);



}



}











.bounceslot {



animation-name: bounceanim;



animation-duration: 1s;



animation-fill-mode: both;



animation-timing-function: ease-in-out;



}







@keyframes bounceanim {



0% {



top:-0.5vw;



}







50% {



top:-2vw;



}







100% {



top:-0.5vw;



}



}







.bounceplanet {



animation-name: bounceplanetanim;



animation-duration: 1s;



animation-fill-mode: both;



animation-timing-function: ease-in-out;



}







@keyframes bounceplanetanim {



0% {



top:-0.25vw;



}







50% {



top:-1.75vw;



}







100% {



top:-0.25vw;



}



}







.titlein {



animation-name: fadeInUp;



animation-duration: 1s;



animation-timing-function: ease-in-out;



animation-fill-mode: both;



}







@keyframes fadeInUp {



  from {



    opacity: 0;



    -webkit-transform: translate3d(0, 600%, 0);



    transform: translate3d(0, 600%, 0);



  }







  to {



    opacity: 1;



    -webkit-transform: translate3d(0, 0, 0);



    transform: translate3d(0, 0, 0);



  }



}







.titleout {



animation-name: fadeOutUp;



animation-duration: 0.5s;



animation-timing-function: ease-in-out;



animation-fill-mode: both;



}







@keyframes fadeOutUp {



  from {



    opacity: 1;



    -webkit-transform: translate3d(0, 0, 0);



    transform: translate3d(0, 0, 0);



  }







  to {



    opacity: 0;



    -webkit-transform: translate3d(0, -100%, 0);



    transform: translate3d(0, -100%, 0);



}



  }

  #landscapenote {
	opacity:0;
  display:flex;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:100;
  position:relative;
  background: none repeat scroll 0 0 #000000;
  pointer-events: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute ;
  top:0%;
  left:0%;
  }
  
  #lnsymbol {
	  font-size: 10rem;
	  text-align: center;
	  z-index:4;
  }
  
  #lndesc {
	  font-size: 2rem;
	  width: 50%;
	  text-align: center;
	  margin-left: auto;
	  margin-right: auto;
	  z-index:4;
  }
  
  #phonenote {
	opacity:0;
	display:flex;
	width:100vw;
	height:100vh;
	overflow:hidden;
	z-index:100;
	position:relative;
	background: none repeat scroll 0 0 #000000;
	pointer-events: none;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute ;
  top:0%;
  left:0%;
	}
	
	#phsymbol {
	  font-size: 10rem;
	  text-align: center;
	  z-index:4;
	}
	
	#phdesc {
	  font-size: 2rem;
	  width: 50%;
	  text-align: center;
	  margin-left: auto;
	  margin-right: auto;
	  z-index:4;
	}

@media only screen and (max-width:1350px) {
  #planetbumphtitle {
    font-size:2.6vw;
  }
}

@media only screen and (max-width:950px) {
  #planetbumphtitle {
    font-size:2.4vw;
  }
}

@media only screen and (min-width:768px) and (orientation:portrait) {
	#landscapenote {
	  opacity:1;
	  pointer-events: all;
	}
	}
	
	@media only screen and (max-width:765px) {
	  #phonenote {
		opacity:1;
		pointer-events: all;
	  }
	
	  #landscapenote {
		opacity:0;
		pointer-events: none;
	  }
	  }