*
{
	margin: auto;
	padding: 0px;
}
h1, h2
{
	text-align: center;
}

#my-canvas {
	pointer-events: none;
	z-index: 5;
}

.hexagon{
	width: 100px;
	height: 100px;
}

.inside {
	width: 150px;
	height: 90px;
}

.inside {
	position: relative;
	bottom: 0px;
	top: 0px;
	padding-left: 23px;
	padding-right: 21px;
	padding-top: 5px;
	word-break: break-word;
}

.row {
	display: flex;
	justify-content: center;
	width: min-content;
}

.one-hexagon {
	display: flex;
	text-align: center;
	width: 150px;
	height: 90px;
	clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}

	.one-hexagon:hover {
		opacity: 0.7;
	}

.invisible {
	opacity: 0;
}

.invisible:hover {
	opacity: 0.1;
}

p {
	word-wrap: normal;
	font-size: 16px;
}