/* CSS */


body{
	min-width: 100vw;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}



#toggle{
	color: white;
	font-size: 18px;
	left: 0px;
	top: 0px;
	position: fixed;
	
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto auto auto;
	}
	#top{
	padding-top: 40px;
	}
	#toggleButton {
	align: left;
	}

#container{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin: 0;
	padding: 0;
	}

#column{
	width: 33.3333%;
	height: 100%;
	}
	
#data{
	margin-top: 23%;
	}
	
h1{
	font-size: 4em;
	}
	
#img{
	margin-top: 10%;
	width: 75%;
	height: 75%;
}

/* CHARTS */

main{
  display: flex;
  flex-shrink: 1;
}

.info{
  width: 33.33%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}

.info select{
  position: relative;
  border: none;
  padding: 0.5em 2em;
  color: #000;
  background: #eb99a1;
}

.info ul{
  padding: 0;
  list-style-type: none;
}

.info-first{
  background: #111;
}

.info-second{
  background: #222;
}

.info-third{
  background: #333;
}

.info-data{
  height: 40vh;
  overflow-y: scroll;
}


@media only screen and (max-width: 768px){
  main{
    flex-direction: column;
  }

  .info{
    width: 100%;
  }
}