body {
	background-image: url(../images/clowder_small.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}

.mainTextColor {
	color: var(--navyBlue);
}

.mainBGColor {
	background-color: #396c60;
}

.textAreaBGColor {
	background-color: #d9ece2;
}

.buttonColors {
	background-color: #6c3261;
	color: #d9ece2;
}


.outlineButtonColors {
	background-color: transparent;
	color: #6c3261;
	border: 1px solid #6c3261;
}
	.outlineButtonColors:hover, .outlineButtonColors:active, .outlineButtonColors:focus {
		background-color: #b466a4;
		border-color: #b466a4;
		color: #d9ece2;
	}


.myName {
	font-family: 'Bangers', sans-serif;
	text-shadow: .02em .02em white;
	color: #6c3261;
}

.subtitle {
	font-family: 'Bayon', sans-serif;
}

.mainText {
	font-family: 'Abel', sans-serif;
}

.mainImage {
	max-width: 100%;
}

.buttonColors:hover::after {
	box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.carousel-control-next-icon.circleBackdrop, .carousel-control-prev-icon.circleBackdrop {
	border-radius: 50%;
	background-color: #333;
	width:2.5rem;
	height:2.5rem;
	background-size:70% 70%;
}

.cardGraphic {
	background-color: #6c3261;
	overflow: hidden;
}

.cardTitle {
	font-family: 'Bangers', sans-serif;
	font-size: 50rem;
	transition: all linear .2s;
	color: #b466a4;
	border: 5px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
	transform:rotate(45deg);
}

.cardTitleStatic{
	font-family: 'Bangers', sans-serif;
	font-size: 10rem;
	color:transparent;
	-webkit-text-stroke: 2px #d9ece2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all linear .2s;
}

.graphicOverlay {
	transition: all linear .2s;
	background: linear-gradient(45deg, rgba(0, 211, 255, 0.5) 0%, rgba(8, 105, 253, 0.2) 51%, rgb(191 88 255 / 50%) 100%);
}

.card {
	box-shadow: 0 0 rgba(0,0,0,.5);
	transition: all linear .2s;
}

.invisibleAnchor{
	text-decoration:unset;
	color:unset;
}
	.invisibleAnchor:hover > .card {
		box-shadow: 0 2px 10px rgba(0,0,0,.5);
	}

	.invisibleAnchor:hover .cardTitle {
		font-size: 10rem;
		border-color: #d9ece2;
		color: #d9ece2;
		transform: rotate(0);
	}
 	.invisibleAnchor:hover .cardTitleStatic{
		opacity:0;
	}
	.invisibleAnchor:hover .graphicOverlay {
		opacity: .5;
	}

	.invisibleAnchor:hover .buttonColors {
		background-color: #b466a4;
		color: #d9ece2;
	}