#hero span.subtitle {
    color: var(--text-color-dark) !important;
	opacity: 1.0 !important;
}

#hero h2 {
    font-size: clamp(20px, 3em, 40px) !important;
	color: var(--text-color-dark) !important; /* Set the same value as textColorDark, as template sets that value to the light value when user switches. */
	opacity: 1.0 !important;
}

#hero p {
	color: var(--text-color-dark) !important;
	background-color: var(--background-color-dark);
	opacity: 0.8;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#hero a.btn:not(.social-icon) {
	color: var(--text-link-color-dark) !important;
	background-color: var(--background-color-dark);
	opacity: 0.8;
}

#hero a.btn.social-icon {
	border: 0px !important;
}

#hero a.btn.social-icon svg {
	width: 28px;
}

#hero {
	background-image: url('/media/profile/hero-background.jpg');
	background-color: #28292a;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-position-x: center;
	background-position-y: center;
}

#hero img.img-thumbnail {
	visibility: hidden;
}

#about ul {
	grid-template-columns: repeat(2, minmax(20em, 50em)) !important;
}

#projects .card-img-top {
	width: 100%;
	height: 250px !important;
	object-fit: cover !important;
	background-color: transparent !important;
}

#list-page .card > .card-header .card-img-top {
    width: 100%;
    height: 250px !important;
    object-fit: cover !important;
	background-color: transparent !important;
}

#see-all-posts {
	margin-top: 1em;
	margin-bottom: 2em;
}