.graph {
			
			font-family: sans-serif;
		}

		body {
			background: #150402;
			margin: 0;
			color: #a82900;
			font-family: 'Share Tech Mono', monospace;
			overflow-x: hidden;
		}

		h1, h3 {
			text-align: center;
			font-size: 50px;
		}

		h3 {
			font-size: 20px;
		}

		p {
			color: #ffdc9c;
		}

		g {
			transition: 2s;
			transition-property: opacity;
		}

		text {
			transition: 1s;
			transition-property: opacity;
		}

		#authors {
			position: fixed;
			top: 100vh;
			transform: translateY(calc(-100% - 10px));
			left: 20px;

			font-size: 11px;
		}

		#titulo, #desc, #legenda {
			transition: 0.2s;
		}
		
		.ic_left, .ic_right {
			width: 50%;
			float: left;
			white-space: nowrap;
		}

		.ring, .line, line, .bpm_ico{
			transition: 0.4s;
			transition-property: opacity;
		}

		.angle, .radius {
			font-family: 'Share Tech Mono';
   			font-weight: 800;
		}

		.radius {
			transition-property: opacity;
		}

		.sep {
			height: 100vh;
			width: 100%;
		}

		.welcome {
			display: flex;
    		align-items: center;
    		justify-content: center;
		}

		.legend {
			width: 70%;
			margin: 15%;
			margin-top: 0px;
			height: inherit;
		}

		.legend > h1 {
			text-align: left;
		}

		#main {
		}

		.desc, .icons {
			width: 40%;
		}

		.desc {
			float: left;
		}

		.icons {
			float: right;
		}

		.label {
			display: inline-block;
			margin-left: 20px;
			transform: translateY(-10px);
			white-space: nowrap;
		}

		.valence {
		}
		.grad {
			width: 100%;
			height: 20px;
			border-radius: 20px;
			background-image: linear-gradient(to right, darkred, orange, white);
		}

		.less_v, .more_v {
			display: inline-block;
			color: #ffdc9c;
		}

		.less_v {

		}

		.more_v {
			float: right;
		}

		.circle {
	      width: 30px;
	      height: 30px;
	      -webkit-border-radius: 45px;
	      -moz-border-radius: 45px;
	      border-radius: 45px;
	      background: #b53b00;
	      animation-duration: 3s;
	      animation-iteration-count: infinite;
	      display: inline-block;
	    }

	    .col {
	    	animation-name: col;
	    }

	    .size {
	    	animation-name: size;
	    }

	    .dance {
	    	transform: scale(0.3);
	    }

	    @keyframes col{
	    	0% {
	    		background: #023A50;
	    	}

	    	55% {
	    		background: #97b4ff;
	    	}

	    	100% {
	    		background: #023A50;
	    	}
	    }

	    @keyframes size{
	    	0% {
	    		transform: scale(0.2);
	    	}

	    	55% {
	    		transform: scale(1);
	    	}

	    	100% {
	    		transform: scale(0.2);
	    	}
	    }

	    @keyframes opacity_1 {
	    	0% {
	    		opacity: 1;
	    	}

	    	50% {
	    		opacity: 0;
	    	}

	    	100% {
	    		opacity: 1;
	    	}
	    }

	    @keyframes opacity_0 {
	    	0% {
	    		opacity: 0;
	    	}

	    	50% {
	    		opacity: 1;
	    	}

	    	100% {
	    		opacity: 0;
	    	}
	    }

	    .less, .more {
	    	animation-duration: 3s;
	      	animation-iteration-count: infinite;
	    }

	    .less {
	    	position: absolute;
	    	animation-name: opacity_1;
	    }

	    .more {
	    	animation-name: opacity_0;
	    }