/* Hey. i see you looking through my css shit. Do not look through this and expect anything good i am a shit coder and i weep every night dreaming about that perfect site that uuhhh fucking soragpt generated in 2 seconds */
@import url('https://fonts.googleapis.com/css2?family=Geo:ital@0;1&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css');
/* ^^^ ignore that im shoving css into one file because its good */
:root {
	interpolate-size: allow-keywords;
	scroll-behavior: smooth;
}

body {
	background-image: url("resources/img/main/googifloopBG.png");
	margin: 1.25rem;
	margin-top: 4rem;
	font-family: "Nunito", sans-serif;
}

html::-webkit-scrollbar {
	display: none;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
/* WE ARE CHARLIE KIRRRRKKKKKKKK WE CARRY THE FLAMEE
hi jolly ggoogifloop here */

h1, h2 {
	color: #1a2247;
	text-shadow: 0 0.1rem 0.25rem rgba(26, 34, 71, 0.4);
	text-align: center;
	font-size: 3rem;
	margin: auto;
	line-height: 0.9;
}

h2 {
	font-size: 1.5rem;
}

p, i {
	color: #1a2247;
	text-align: center;
	font-size: 1.25rem;
	line-height: 0.9;
}

sub, sup {
	margin: auto;
	text-align: center;
	font-size: 1rem;
}

li {
	font-size: 1.25rem;
	line-height: 1.1rem;
	text-align: center;
	transition: cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}

details::details-content {
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

details[open]::details-content {
	block-size: auto;
}

summary {
	cursor: pointer;
	text-align: center;
}

summary::marker {
	content: "◇ ";
}

a {
	text-align: center;
	color: #694850;
}

.alignLeft, .alignLeft h2, .alignLeft p, .alignLeft li {
	text-align: left;
}

/* classes and stuff. Yawwnnn */

.main, .toc, .infoBox, .basicInfoTbl, .quoteBox, .warning {
	max-width: 31.25rem;
	max-height: auto;
	margin: auto;
	padding: 2rem;
	border: 0.1rem solid rgba(255,255,255,0.3);
	box-shadow: 0 0.3rem 1rem 0 rgba(31, 38, 135, 0.3);
	background: rgba(255,255,255,0.4);
	backdrop-filter: blur(4px);
	
	border-radius: 1rem;
	overflow: hidden;

	animation: revealUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	opacity: 0;
}

.main * {
	animation: revealUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	opacity: 0;
	animation-delay: 0.1s;
}

.mainCharPage {
	margin: auto;
    max-width: 60rem;
	animation: revealUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
	opacity: 0;
}

.artworkPreview {
	border-radius: 2px;
	object-fit: scale-down;
	transition: transform 0.3s;
	width: 100%;
	margin: auto;
}

.artworkPreview:hover {
	transform: scale(1.05);
}

/* music player time for musci website because musicciAUHEUHAHUSFGUHg */
/*  i lied no more custom music section Fun fact i was gonna make a fully dedficated music player but bandcamps js more efficient */

/* CHARACTER SITE SHIT */

.warning {
	min-width: none;
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding: 0.5rem;
	overflow: auto;
	text-align: center;
}

/* Literally just main but swag lmaoo */
.infoBox {
	max-width: 16em;
	margin: 1rem;
	padding: 1rem;
	
	transform: translateY(-1rem);
	float: right;
	clear: right;
}

@media only screen and (max-width: 32.4rem) {
	.infoBox {
		float: none;
		clear: none;
		margin: auto;
		transform: translateY(0rem);
		margin-bottom: 1rem;
	}
}

.charImg {
	width: 16rem;
	height: 16rem;
	object-fit: contain;
}

/* More main dupe 💔 */
.basicInfoTbl {
	width: 100%;
	margin: auto;
	padding: 0.2rem;
}

/* Main dupe once again im a lazy fuck */
.quoteBox {
	min-width: 8rem;
	max-width: 30rem;
	margin: 1rem;
	padding: 0.5rem;
	overflow: auto;
}

.quoteBox p {
	text-align: left;
	transform: translateY(-1rem);
	line-height: 1rem;
}

/* Once again another main dupe. this time for the toc */
.toc {
	max-width: 14rem;
	min-width: 8rem;
	padding: 0.3rem;
	margin: 1rem;
	overflow: auto;
}

.toc ul {
	line-height: 0.3rem;
	list-style-type: none;
	padding-left: 0;
}

.toc li {
	font-size: 1rem;
}

.galleryImg {
	width: 10rem;
	height: 10rem;
	margin: 0.1rem;
	border-radius: 1rem;
	object-fit: cover;
}

#overview, #appearance, #personality, #trivia, #gallery, #extras {
	scroll-margin-top: 2rem;
}

/* oc gallery stuff */
/* I should mention literally everything in here is unorthodox ok but it works */


/* credits page */

.wavey {
	animation: wave 2s ease-in-out infinite;
}

.hslFun {
	opacity: 1;
	animation: rainbowText 5s ease-in-out infinite;
}

/* anims */

@keyframes swagIn {
	0% {
		opacity: 0;
		transform: translateY(-10px);
		filter:blur(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		filter:blur(0px);
	}
}

@keyframes wave {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1rem);
	}
}

@keyframes rainbowText {
	0% {
		color: hsl(0, 70%, 60%)
	}
	10% {
		color: hsl(40, 70%, 60%);
	}
	20% {
		color: hsl(80, 70%, 60%);
	}
	30% {
		color: hsl(120, 70%, 60%);
	}
	40% {
		color: hsl(160, 70%, 60%);
	}
	50% {
		color: hsl(200, 70%, 60%);
	}
	60% {
		color: hsl(240, 70%, 60%);
	}
	70% {
		color: hsl(280, 70%, 60%);
	}
	80% {
		color: hsl(320, 70%, 60%);
	}
	90% {
		color: hsl(360, 70%, 60%);
	}
	100% {
		color: hsl(360, 70%, 60%);
	}
}

@keyframes infinitetile {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -10rem -10rem;
	}
}

@keyframes shake {
	0% { transform: translate(.4px, .4px) rotate(0deg); }
	10% { transform: translate(-.4px, -.4px) rotate(-.4deg); }
	20% { transform: translate(-.4px, 0px) rotate(.4deg); }
	30% { transform: translate(.4px, .4px) rotate(0deg); }
	40% { transform: translate(.4px, -.4px) rotate(.4deg); }
	50% { transform: translate(-.4px, .4px) rotate(-.4deg); }
	60% { transform: translate(-.4px, .4px) rotate(0deg); }
	70% { transform: translate(.4px, .4px) rotate(-.4deg); }
	80% { transform: translate(-.4px, -.4px) rotate(.4deg); }
	90% { transform: translate(.4px, .4px) rotate(0deg); }
	100% { transform: translate(.4px, -.4px) rotate(-.4deg); }
}

@keyframes shakeIntense {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -1px) rotate(-1deg); }
	20% { transform: translate(-1px, 0px) rotate(1deg); }
	30% { transform: translate(1px, 1px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(1px, 1px) rotate(-1deg); }
	60% { transform: translate(1px, 1px) rotate(0deg); }
	70% { transform: translate(1px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 1px) rotate(0deg); }
	100% { transform: translate(1px, -1px) rotate(-1deg); }
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.transition-slide {
	transition-property: opacity, transform;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
	transform: translateY(0);
	opacity: 1;
}

html.is-animating .transition-slide {
	opacity: 0;
	transform: translateY(0.5em) scale(0.98);
}

html.is-leaving .transition-slide {
	transform: translateY(0.5em) scale(0.98);
}


html.is-animating.to-left .transition-slide {
	opacity: 0;
	transform: translateY(-0.5em);
}

html.is-leaving.to-left .transition-slide {
	transform: translateY(0.5em);
}