@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Francois+One&display=swap');


::selection {
	color: #eee;
	background: #7500D6;
}

body {
	padding: 10px;
	background-image: url(Images/Textures/TexturesCom_Crackles0060_1_seamless_S.jpg);
	background-size: 600px;
	color: #d3b5ff;
	font-family: 'Francois One', sans-serif;
}
	body::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(55deg, #170048f0, #29002ff2);
		z-index: -1;
	}

h1, h2, h3, h4, h5, h6 {
	color: #8430FF;
	font-family: 'Bubblegum Sans', cursive;
}

.page-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
	#page-header-logo {
		display: inline-block;
		position: relative;
		width: 70px;
		height: 70px;
		min-width: 70px;
		min-height: 70px;
		background-image: linear-gradient(140deg, #ff00fa, #3d00ec);
		border-radius: 50%;
	}
	#page-header-logo:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: -60px -600px;
		border: 20px #520085;
		border-style: double;
		border-top-style: hidden;
		border-radius: inherit;
		transform: scaleX(0.1) scaleY(0.3) rotateX(65deg) rotateY(3deg) rotateZ(0deg);
	}
		#page-header-logo:hover:after {
			animation-name: page-header-logo-spin;
			animation-play-state: running;
			animation-iteration-count: infinite;
			animation-duration: 2s;
			animation-timing-function: linear;
		}
	.page-header-title {
		font-size: 5rem;
		text-shadow: 0 0 30px #4b047391;
		padding-inline: 60px;
	}

.link-override {
	color: #d23cff;
}
	.link-override:hover {
		color: #932ab4;
	}
	.link-override:focus-visible {
		outline-color: #ba2ad4;
		border-radius: 2px;
		padding-inline: 2px;
		margin-inline: -2px;
	}

hr {
	border-top: 1px solid rgba(157, 158, 255, 0.36);
}



/* Bootstrap overrides */
a:focus-visible {
	display: inline-block;
	outline-style: solid;
}

a.btn[aria-expanded=false]::after {
	content: "More info";
}
a.btn[aria-expanded=true]::after {
	content: "Less info";
}

.btn-primary {
	background-color: #7555FF;
	border-color: #7555FF;
}
	.btn-primary:hover {
		background-color: #6448F6;
		border-color: #5E43E7;
	}
	.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
		box-shadow: 0 0 0 .2rem #7555FF88;
	}
	.btn-primary:not(:disabled):not(.disabled):active {
		background-color: #7555FF;
		border-color: #7555FF;
	}

.card {
	margin: 15px 15px 40px 15px;
	color: #423451;
	background-color: #ede7ff;
	overflow: hidden;
	border-radius: 0.4rem;
}
	.card-title > a {
		font-family: 'Francois One', sans-serif;
		font-size: 1.3rem;
		color: #2c0659;
	}
		.card-img-top {
			position: relative;
			z-index: 1;
			opacity: 1.0; /* *animation start* */
			animation: fade-out 0.5s forwards;
			animation-delay: 0.5s;
		}
		.card-title > a:hover {
			text-decoration: underline;
		}
		.card-title > a:focus-visible {
			outline-color: #2c0659;
			border-radius: 2px;
			padding-inline: 2px;
			margin-inline: -2px;
		}
	.card > a {
		position: relative;
		overflow: hidden;
		box-shadow: 0 0 10px #100033;
	}
		.card > a:focus-visible {
			color: #5000ff;
		}
		.imageR, .imageG, .imageB {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
			.imageG, .imageB {
				transition: margin 0.7s ease-in-out;
				/*mix-blend-mode: plus-lighter;*/ /* Works perfect on FireFox, but not Chrome */
				mix-blend-mode: screen; /* Colors won't blend well on transition of opacity on pageload */
			}
			.card:hover .imageG {
				margin: -2px 0 0 -10px;
			}
			.card:hover .imageB {
				margin: 2px 0 0 10px;
			}



@keyframes fade-out {
	from {
		opacity: 1.0;
	}
	to {
		opacity: 0.0;
	}
}

@keyframes page-header-logo-spin {
	from {
		transform: scaleX(0.1) scaleY(0.3) rotateX(65deg) rotateY(3deg) rotateZ(0deg);
	}
	to {
		transform: scaleX(0.1) scaleY(0.3) rotateX(425deg) rotateY(3deg) rotateZ(0deg);
	}
}