@charset "UTF-8";
/* CSS Document */



@font-face {
  font-family: Montserrat-Medium;
  src: url("../../../fonts/Montserrat/Montserrat-Medium.ttf");
  /*src: url(data:font/ttf;base64,STRING) format('truetype');*/
}

@font-face {
  font-family: Montserrat-SemiBold;
  src: url("../../../fonts/Montserrat/Montserrat-SemiBold.ttf");
  /*src: url(data:font/ttf;base64,STRING) format('truetype');*/
}

@font-face {
  font-family: ByteBounce;
  src: url("../../../fonts/ByteBounce/ByteBounce.ttf");
  /*src: url(data:font/ttf;base64,STRING) format('truetype');*/
}

:root {
	
	/* Default theme */
	--default_background-color: #ededed;
	--default_text-color: #000;
	--default_link-color: #222;
	
	
	
	/* Light theme */
	--lt_background-color: #ededed; 
	--lt_text-color: #000;
	--lt_link-color: #222;
	
	
	
	/* Dark theme */
	--dt_background-color: #333333;
	--dt_text-color: #fff;
	--dt_link-color: #999;
}


html{
	/*
	-webkit-user-select: none;
	user-select: none;
	*/
}

body {
	background-color: var(--default_background-color);
	color: var(--default_text-color);
	font-family: Montserrat-Medium);
}

a {
	color: var(-default_link-color);
}

.mindContainer{
	width: 260px;
	height: 317px;
	display: block;
	position: fixed;
	border: 0px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	left: calc(50vw - 130px);
	top: 60px;
	
	z-index: 4;
	
	transition: all .2s ease-in-out;
	display: none;
	opacity: 0;
}

.mindflowContainer{
	
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	
	opacity: 0;
	display: none;
	transition: all 0.2s ease-in-out;
	z-index: 2;
	
}

.mindContainer::-webkit-scrollbar{
	display: none;
}

.mindContainer::scrollbar{
	display: none;
}

.vpetStats{
	width: auto;
	height: auto;
	min-width: 160px;
	max-width: 260px;
	display: block;
	position: absolute;
	box-sizing: border-box;
	border-radius: 10px;
	border: 0px solid rgba(255, 255, 255, 0.1);
	
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;
	
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	
	text-align: left;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.7);
	color: rgba(255, 255, 255, 0.6);
	font-family: ByteBounce;
	line-height: 14px;
	letter-spacing: 1px;
	
	opacity: 0;
	display: none;
	transition: all 0.2s ease-in-out;
	z-index: 2;
}

.vpetstats_title{
	line-height: 18px;
	font-size: 20px;
	margin-bottom: 6px;
	
	background-image: url("../images/cog_256.gif?v=1");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px 16px;
	
	color: #000;
	opacity: 0.7;
	
	-webkit-filter: invert(100%);
    filter: invert(100%);
}

.bubble_mind_title{
	line-height: 18px;
	font-size: 20px;
	margin-bottom: 6px;
	
	background-image: url("../images/cog_256.gif?v=1");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 16px 16px;
	
	color: #000;
	opacity: 0.7;
	
	-webkit-filter: invert(100%);
    filter: invert(100%);
	
}

.bubble_mind{
	width: 100%;
	height: auto;
	max-width: 260px;
	display: block;
	position: absolute;
	box-sizing: border-box;
	border-radius: 26px;
	border: 2px dashed rgba(255, 255, 255, 0.1);
	
	border-radius: 10px;
	border: 0px solid rgba(255, 255, 255, 0.1);
	
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;
	
	background-color: rgba(0,0,0,0.3);
	
	text-align: left;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	font-family: ByteBounce;
	line-height: 14px;
	letter-spacing: 1px;
	
	transition: all 0.2s ease-in-out;
}

.mindButtonContainer{
	width: 60px;
	height: 60px;
	position: absolute;
	bottom: 0;
	display: block;
	box-sizing: border-box;
	border-radius: 30px;
	opacity: 1.0;
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px); 
	
	-webkit-tap-highlight-color: transparent;
	border-radius: 50%;
}

.mindButtonContainer_thoughts{
	left: calc(50% - 150px);
}

.mindButtonContainer_passions{
	left: calc(50% - 70px);
}

.mindButtonContainer_sim{
	left: calc(50% + 10px);
}

.mindButtonContainer_avatar{
	left: calc(50% + 90px);
}

.mindButton{
	width: 60px;
	height: 60px;
	position: absolute;
	bottom: 0;
	display: block;
	box-sizing: border-box;
	border-radius: 30px;
	pointer-events: all;
	cursor: pointer;
}

.mindButton_on{
	opacity: 0.7;
}

.mindButton_off{
	opacity: 0.3;
}

.mindButton_thoughts{
	background-image: url("../images/mindButton_thoughts.png?v=3");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
}

.mindButton_passions{
	background-image: url("../images/mindButton_passions.png?v=3");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
}

.mindButton_sim{
	background-image: url("../images/mindButton_sim.png?v=4");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
}

.mindButton_avatar{
	background-image: url("../images/mindButton_avatar.png?v=1");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
}

.brainwaves{
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	left: calc(50% + 100px);
	left: calc(50% - 150px);
	top: 90px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.0);
	opacity: 1.0;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
	z-index: 1;
}

.brainwaves:hover{
	transform: scale(2, 2);
}

.brainwaves:hover .brainwavesLabel{
	opacity: 1.0;
}

.brainwavesLabel{
	width: 60px;
	height: 10px;
	display: block;
	line-height: 9px;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	
	color: #fff;
	font-family: ByteBounce;
	font-size: 6px;
	letter-spacing: 1px;
	text-align: center;
	position: absolute;
	bottom:-15px;
	left: 0px;

	opacity: 0.2;
	z-index: 5;
	opacity: 0;
	
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.brainwaves_background{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.eegCanvas {
	background-color: rgba(0,0,0,0);
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.2;
	z-index: 3;
}






.tama_streak{
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	left: calc(50% + 110px);
	top: 30px;
	top: 28px;
	opacity: 1;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0);
	box-sizing: border-box;
}

.tama_streak:hover{
	transform: scale(2, 2);
}

.tama_streak:hover .tamaLabel_streak{
	opacity: 1.0;
}

.tamaLabel_streak{
	width: 50px;
	height: 10px;
	display: block;
	line-height: 9px;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	
	color: #fff;
	font-family: ByteBounce;
	font-size: 6px;
	letter-spacing: 1px;
	text-align: center;
	position: absolute;
	bottom:-10px;
	left: -5px;
	
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	
	z-index: 5;
	opacity: 0;
}

.tamaIcon_streak{
	width: 40px;
	height: 40px;
	display: block;
	
	background-image: url("../images/tama_icons_streak.png?v=2");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	animation: blink-animation 3s ease-in-out infinite;
	-webkit-animation: blink-animation 3s ease-in-out infinite;
	opacity: 0.2;
}

.tamaIconText_streak{
	width: 40px;
	height: 40px;
	line-height: 30px;
	margin-top: 10px;
	display: block;
	
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
	text-align: center;
	
	
	position: absolute;
	opacity: 0.6;
}








.tama_spark{
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	left: calc(50% + 110px);
	top: 100px;
	opacity: 1;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
	z-index: 1;
	box-sizing: border-box;
}

.tama_spark:hover{
	transform: scale(2, 2);
}

.tama_spark:hover .tamaLabel_spark{
	opacity: 1.0;
}

.tamaLabel_spark{
	width: 50px;
	height: 10px;
	display: block;
	line-height: 9px;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	
	color: #fff;
	font-family: ByteBounce;
	font-size: 6px;
	letter-spacing: 1px;
	text-align: center;
	position: absolute;
	bottom:-10px;
	left: -5px;
	
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	
	z-index: 5;
	opacity: 0;
}

.tamaIcon_spark{
	width: 40px;
	height: 40px;
	display: block;
	
	background-image: url("../images/tama_icons_spark.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	animation: blink-animation 3s ease-in-out infinite;
	-webkit-animation: blink-animation 3s ease-in-out infinite;
	opacity: 0.2;
}






.tama_bond{
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	left: calc(50% + 110px);
	top: 170px;
	opacity: 1;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
	z-index: 1;
	box-sizing: border-box;
}

.tama_bond:hover{
	transform: scale(2, 2);
}

.tama_bond:hover .tamaLabel_bond{
	opacity: 1.0;
}

.tamaLabel_bond{
	width: 50px;
	height: 10px;
	display: block;
	line-height: 9px;
	border-radius: 3px;
	transition: all 0.2s ease-in-out;
	background-color: rgba(0, 0, 0, 1.0);
	color: #fff;
	font-family: ByteBounce;
	font-size: 6px;
	letter-spacing: 1px;
	text-align: center;
	position: absolute;
	bottom:-10px;
	left: -5px;
	
	background-color: rgba(0,0,0,0.3);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	
	z-index: 5;
	opacity: 0;
}

.tamaIcon_bond{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/tama_icons_bond.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	animation: blink-animation 3s ease-in-out infinite;
	-webkit-animation: blink-animation 3s ease-in-out infinite;
	opacity: 0.2;
}

.powerRing_0{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_0.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_1{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_1.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_2{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_2.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_3{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_3.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_4{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_4.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_5{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_5.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_6{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_6.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_7{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_7.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

.powerRing_8{
	width: 40px;
	height: 40px;
	display: block;
	background-image: url("../images/power_ring_8.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px 40px;
	position: absolute;
	pointer-events: none;
	opacity: 0.2;
}

@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	.bubble_mind{ bottom: 70px; }
	.vpetStats{ bottom: 70px; }
}

@supports not (-webkit-touch-callout: none) {
	/* CSS for other than iOS devices */ 
	.bubble_mind{ bottom: 70px; }
	.vpetStats{ bottom: 70px; }
}

.blink {
  animation: blink-animation 1s step-start 0s infinite;
  -webkit-animation: blink-animation 1s step-start 0s infinite;
}
@keyframes blink-animation {
  50% {
    opacity: 0.05;
  }
}
@-webkit-keyframes blink-animation {
  50% {
    opacity: 0.05;
  }
}