body {
	background-color: black;
	/* background: linear-gradient(-45deg, #000000, #28313B, #000000, #130F40);
	background-size: 500% 500%;
	animation: gradient 15s ease infinite;
	height: 100vh; */
}

desc {
	font-style: italic;
}

.green-button {
	background-color: green;
	border: solid;
	border-color: white;
	border-width: 1px;
	border-radius: 10px;
}

.section-title {
    font-size: 2.5rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pfilter {
	transition: opacity 0.3s ease;
	opacity: 1;
	visibility: visible;
	margin-bottom: 10px;
}

  /* When the .hidden class is added, start the fade-out animation */
.pfilter.hidden {
	opacity: 0;
	pointer-events: none;
}

.on-hover-opacity-75 *:hover {
	opacity: 0.75;
}

.skill-item, .tech-item {
	color: green;
	border-color: black;
	background-color: lightgray;
	
	padding: 15px 15px;

	display:flex;
	gap: 20px;

	border: 1px solid;
	border-radius: 10px;
}

.aboutIcon {
	height:35px;
	width:35px;
	margin-right: 5px;
}

.logo {
	width: 45px;
	height: 45px;
	border-radius: 50px;
}

.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: green;
	--bs-nav-link-color: green;
	--bs-link-hover-color: lightgreen;
}

.green {
    color: #00ff00;
}

.diamondImg {
	border-radius: 50% 2% 50% 2%;
}

.quote {
	font-style: italic;
}

.timeline {
	border-left: 1px solid hsl(0, 0%, 90%);
	position: relative;
	list-style: none;
}
  
.timeline .timeline-item {
	position: relative;
  }
  
.timeline .timeline-item:after {
	position: absolute;
	display: block;
	top: 0;
  }
  
.timeline .timeline-item:after {
	background-color: hsl(0, 0%, 90%);
	left: -38px;
	border-radius: 50%;
	height: 11px;
	width: 11px;
	content: "";
  }

section:not(.navBar) {
	animation: transitionIn 1.00s
}


@media (min-width: 768px) {
	.navbar-brand.abs
		{
			position: absolute;
			width: auto;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
		}
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes transitionIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}