body{
	background-color: #efeff0;
	display: flex;
	flex-direction:column;
    align-items: center; 
}
#header {
    background: #ffffff;
    display: flex;
    flex-direction:column;
    width: 100vw;
    height: 10vh;
    justify-content: center;
    align-items: center; 
    background-image: linear-gradient( rgba(255,0,0,0) 80%, #b7b7b7);
}

#content {
    width: 95vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
}

#left_half{
	display: flex;
	flex-direction:column;
	align-items: center; 
	width: 50vw;
    height: 100vh;
}
#scatter3d{
	width: 45vw;
    height: 70vh;
    margin: 2%;
}
#suggestionDiv{
	width: 45vw;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}
#suggestionBg{
	background-color: #d5d5d6;
	width: 43vw;
    height: 25vh;
	border-radius: 5px;
}

#right_half{
	display: flex;
	flex-direction:column;
	align-items: center; 
	width: 50vw;
    height: 100vh;
}
#scorePosition{
	border-bottom: 5px solid #b8b9bb;
	display: flex;
	align-items: center; 
	flex-direction:column;
	width: 45vw;
    height: 15vh;
    margin: 2%; 
}
#scoreContent{
	width: 100%;
}
.showScore{
	display: flex;
	justify-content: center;
    align-items: center;
	width: 50%;
	height: 10vh;
}

#scoreContent{
	display: flex;
	justify-content: center;
	flex-direction:row;
	font-size: 2.5vw;
}

#pie{
	border-bottom: 5px solid #b8b9bb;
	display: flex;
	flex-direction:column;
	margin: 1%; 
	width: 45vw;
    height: 40vh;
}
#pieTitle{
	display: flex;
	align-items: flex-start; 
	justify-content: center;
	width: 45vw;
    height: 6vh;
}
#pieContent{
	display: flex;
	flex-direction:row;
	width: 45vw;
    height: 31vh;
}
#pie1{
	width: 15vw;
    height: 31vh;
}
#pie2{
	width: 15vw;
    height: 31vh;
}
#pie3{
	width: 15vw;
    height: 31vh;
}

#history{
	display: flex;
	align-items: center; 
	flex-direction:column;
	margin: 1%; 
	width: 45vw;
    height: 40vh;
}