.vitaBox {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	gap: 4rem;
	/* margin-bottom: 50rem; */
}
.vitaBox > .skillButtons {
	position: sticky;
	top: 0;

	flex: 0 0 auto;

	/*display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;*/

	display: grid;
	grid-template-columns: repeat(2, 1fr);

	gap: 0.25rem;
	background-color: rgb(72, 78, 81);
	z-index: 1;
	padding-bottom: 1rem;
	margin-bottom: 3rem;
}
.vitaBox > .skillButtons::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 3rem;
	background: linear-gradient(to bottom, rgba(72, 78, 81, 1), rgba(72, 78, 81, 0));
}
.vitaBox > .skillButtons > label {
	grid-column: 1 / span 2;
}
.vitaBox > .skillButtons > .skillButton {
	padding: 0.25rem 0.375rem;
	transition: background-color 0.5s ease-out 0.2s;
}
.vitaBox > .skillButtons > .skillButton:hover {
	transition: background-color 0.2s ease-out 0s;
}
.vitaBox > .skillButtons > .skillButton.active {
	transition: background-color 0s ease-out 0s;
}
.vitaBox > .skillButtons .skillButton:not(:hover):not(:active):not(.active) {
	/* background-color: transparent; */
}
.vitaBox > .skillButtons .buttonSymbol {
	margin-inline: auto;

	width: 2.5rem;
	height: 2.5rem;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	/*filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));*/
}
.vitaBox > .skillButtons .skillButton-html .buttonSymbol { background-image: url('/img/vita/html-5-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-css .buttonSymbol { background-image: url('/img/vita/css-3-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-js .buttonSymbol { background-image: url('/img/vita/js-official-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-jquery .buttonSymbol { background-image: url('/img/vita/jquery-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-php .buttonSymbol { background-image: url('/img/vita/php-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-mysql .buttonSymbol { background-image: url('/img/vita/mysql-svgrepo-com.svg'); background-color: #fff; border-radius: 0.4rem; }
.vitaBox > .skillButtons .skillButton-api .buttonSymbol { background-image: url('/img/vita/api-svgrepo-com.svg'); background-color: #fff; border-radius: 0.4rem; }
.vitaBox > .skillButtons .skillButton-debian .buttonSymbol { background-image: url('/img/vita/debian-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-video .buttonSymbol { background-image: url('/img/vita/video-editing-svgrepo-com.svg'); }
.vitaBox > .skillButtons .skillButton-audio .buttonSymbol { background-image: url('/img/vita/audio-svgrepo-com.svg'); background-color: #fff; border-radius: 0.4rem; }
.vitaBox > .skillButtons .buttonText {
	margin-top: 0.5em;
	line-height: 1;
	font-weight: 500;
}
.vitaBox > .skillButtons .sinceText {
	/* margin-bottom: 0.25em; */
	font-size: 0.75rem;
	line-height: 1;
	/* font-style: italic; */
	/* font-weight: bold; */
}

.vitaBox label {
	display: block;
}

.vitaBox > .vitaSections {
	flex: 1 1 auto;
	max-width: 100%;

	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;

	overflow: visible;
	margin-bottom: 20rem;
}
.vitaBox > .vitaSections .vitaSection {
	/*flex: 0 0 30rem;
	margin-bottom: 2rem;*/

	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
}

/*.vitaBox > .vitaSections .vitaSection:first-child { margin-left: 3rem; }
.vitaBox > .vitaSections .vitaSection:last-child { margin-right: 3rem; }
.vitaBox > .vitaSections .gallerySlider-arrowLeft { transform: translateX(-50%); }
.vitaBox > .vitaSections .gallerySlider-arrowRight { transform: translateX(50%); }*/

.vitaBox > .vitaSections label {
	flex: 0 0 auto;
}
.vitaBox > .vitaSections .vitaSection:not(:first-child) label {
	padding-top: 5rem;
}
.vitaBox > .vitaSections .vitaSectionParagraphs {
	flex: 1 0 auto;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 0.5rem 1rem;
	color: #eee;
}
.vitaBox > .vitaSections .vitaSectionParagraphs > div:not(:last-child) {
	margin-bottom: 1em;
}
.vitaBox > .vitaSections ul {
	margin-left: 1.5rem;
}



/*.vitaBox > .vitaSections .vitaSection:target > label > div:before,
.vitaBox > .vitaSections .vitaSection:target > label > div:after {
	background-color: rgba(255, 255, 255, 0.25);
}
.vitaBox > .vitaSections .vitaSection:target > label > div {
	text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.8), 0 0 1rem rgba(255, 255, 255, 0.8);
}
.vitaBox > .vitaSections .vitaSection:target > .vitaSectionParagraphs {
	background-color: rgba(0, 0, 0, 0.35);
}*/




@media (max-width: 1024px) or (max-height: 600px) {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 10rem;
	}

	.vitaBox {
		flex-flow: row wrap;
	}
	.vitaBox > .skillButtons,
	.vitaBox > .vitaSections {
		flex: 1 1 100%;
	}

	.vitaBox > .skillButtons {
		/* position: static; */
		grid-template-columns: repeat(5, 1fr);
	}
	.vitaBox > .skillButtons > label {
		grid-column: 1 / span 5;
		padding-top: 1rem;
	}
	.vitaBox > .skillButtons > .skillButton {
		padding: 0.25rem; /* 0.375rem;*/
	}
	.vitaBox > .skillButtons > .skillButton > .buttonText {
		display: none;
	}
	.vitaBox > .vitaSections {
		margin-bottom: 10rem;
	}
	.vitaBox > .vitaSections > .vitaSection {
	}
}