:root {
	--cpp-dark-green: #005030;
	--width-limit: min(100%, 600px);
}

.width-limited {
	width: var(--width-limit);
	margin-left: auto;
	margin-right: auto;
}

.icon-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(95px, 100%), 1fr));
	gap: 20px;
	padding: 20px;
	font-size: x-small;
}

.icon {
	padding: 5px;
	text-decoration: none;

	display: flex;
	flex-direction: column;
	align-items: center;

	.icon-img-container > svg {
		height: 40px;
	}
	
	.icon-name-wrapper {
		font-family: "transducer-extended", sans-serif;

		flex-grow: 2;
		text-align: center;
		align-content: center;
	}
}

.cpp-button {
	fill: white;
	color: white; 
	background-color: var(--cpp-dark-green) !important;

	border-radius: 0px;
	border: 2px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(to left, #ffb81c, #a4d65e);

	&:hover, &:focus {
		background: linear-gradient(to left, #ffb81c, #a4d65e) !important;
		fill: var(--cpp-dark-green);;
		color: var(--cpp-dark-green);;
	}
}