body {
    font: normal 12px Verdana, Arial, sans-serif;
}

table,
th,
td {
	padding: 0.5em;
	border: 1px solid;
	border-color: white;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.honeycomb {
	display: grid;
	margin: 100px;
	width: 100px;
	aspect-ratio: 1.15;
	color: black;
	font-size: 30px;
	line-height: 90px;
}

.block {
	grid-area: 1/1;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	background-color: lightgrey;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.honeycomb > :nth-child(1) {
	transform: translateY(120%);
}
.honeycomb > :nth-child(2) {
	transform: translateY(-100%);
}
.honeycomb > :nth-child(3) {
	transform: translate(-85%, -45%);
}
.honeycomb > :nth-child(4) {
	transform: translate(85%, -45%);
}
.honeycomb > :nth-child(5) {
	transform: translate(85%, 65%);
}
.honeycomb > :nth-child(6) {
	transform: translate(-85%, 65%);
}

.honeycomb > :nth-child(7) {
	background-color: palegoldenrod;
	transform: translateY(10%);
}

.collapsible {
	background-color: #777;
	color: white;
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}

.active,
.collapsible:hover {
	background-color: #555;
}

.content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
}