.triangle1, .triangle2, .triangle3{
	fill: rgb(223, 223, 223);
	stroke: black;
	stroke-width: 0.2 ;
    cursor: pointer;
}

#svg-container {
	height: auto;
	width: 50vw;
	max-width: 500px;
}

.triangle1-text, .triangle2-text, .triangle3-text {
    cursor: pointer;
    fill: black;
}
.triangle1-text.highlight, .triangle2-text.highlight, .triangle3-text.highlight {
    fill: white;
}

.triangle1.highlight {
	fill: rgb(228, 178, 17);
}
.triangle2.highlight {
	fill: rgb(129, 41, 41);
}
.triangle3.highlight {
	fill: rgb(53, 52, 52);
}

button {
	width: 80vw;
	font-family: Varela Round, Arial, Helvetica, sans-serif;
	cursor: pointer;
	background-color: #777;
	color: white;
	border: none;
	padding: 10px;
	margin-top: 5px;
}
.left_text {
	float: left;
}
.right_text {
	float: right;
}

.group_content {
	width: 80vw;
	background-color: #f1f1f1;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.group_content li {
	list-style-type: none;
}
.group_content img {
	padding: 18px;
	min-width: 10vw;
	width: 150px;
}