@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&display=swap');

:root {
	--background-color: #e3e9ef;
	--text-color: #333543;
	--link-color: #656fff;
	--link-hover-color: #be78ff;
	--scrolling-background-image: url("assets/bg-light.png");
	--section-9patch-image: url("assets/section-9patch-light.gif");
	--scrollbar-colors: #c9cde0 #e3e9ef;
}

/*--- Handling dark mode ---*/
.darkmode {
	--background-color: #131619;
	--text-color: #e3e9ef;
	--link-color: #656fff;
	--link-hover-color: #be78ff;
	--scrolling-background-image: url("assets/bg-dark.png");
	--section-9patch-image: url("assets/section-9patch-dark.gif");
	--scrollbar-colors: #252730 #131619;
}

#lightdark-toggle {
	background: none;
	border: none;
	width: 64px;
	height: 64px;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 20px;
	right: 20px;

	z-index: 20;
}

#lightdark-toggle img:last-child {
	display: none;
}

.darkmode #lightdark-toggle img:first-child {
	display: none;
}

.darkmode #lightdark-toggle img:last-child {
	display: block;
}

/*--- by: faderax age 5 ---*/
html {
	scrollbar-color: var(--scrollbar-colors);
}

body {
	background-image: var(--scrolling-background-image);
	background-repeat: repeat;
	animation: bg-scroll 2s linear infinite;
	
	padding: 2vh 10vw 2vh 10vw;

	color: var(--text-color);

	font-family: "Comic Relief", system-ui;
	font-weight: 400;
	font-style: normal;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

header, section {
	/*background-color: #00000022;*/
	padding: 2% 2% 2% 2%;
	margin-bottom: 1%;

	border-image: var(--section-9patch-image) 10 10 10 10 fill / 10px 10px 10px 10px;
	border-image-repeat: repeat;

	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: crisp-edges;
	image-rendering: pixelated;

	filter: drop-shadow(4px 4px 5px #00000044);
}

h1 {
	font-size: 2.5rem;
	margin-top: 0%;
	margin-bottom: 0%
}

h2 {
	font-size: 2rem;
	margin-top: 0%;
	margin-bottom: 0%
}

h3 {
	font-size: 1.25rem;
	margin-top: 2%;
	margin-bottom: 0%;
}

a {
	text-decoration: none;
	color: var(--link-color);
}

a:hover {
	text-decoration: underline;
	color: var(--link-hover-color);
}


/*--- Custom classes and stuff ---*/
.point-filter {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.display-in-grid {
	/*
	display: grid;
	grid-template-columns: repeat(auto-fill, max(33.3333%, 300px));
	*/
	display: flex;
	justify-content: center;
	align-content: stretch;
	flex-wrap: wrap;
}

.display-in-grid div {
	border-image: var(--section-9patch-image) 10 10 10 10 fill / 10px 10px 10px 10px;
	border-image-repeat: repeat;
	padding: 10px 10px 10px 10px;

	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	
	filter: drop-shadow(4px 4px 5px #00000044);
}

.horizontal-list {
	list-style-type: none;
	white-space: nowrap;
	overflow-x: auto;
}

.horizontal-list li {
	display: inline-block;
}

.faderax-logo-h1 {
	margin: -0.5em 0 -0.5em 0;
}

.faderax-logo-img {
	animation: boingboingboing-logo alternate-reverse infinite;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	height: 200px;
}

.eve-bust {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 256px;

	z-index: 10;

	filter: drop-shadow(2px 2px 3px #00000055);
}

.particulate-bust {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 256px;

	z-index: 10;

	filter: drop-shadow(2px 2px 3px #0000ff55);
}

.boing-anim {
	animation-name: boingboingboing;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.boing-anim-on-hover:hover {
	animation-name: boingboingboing;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}

.button {
	width: 64px;
	height: 64px;
}

.button:hover {
	animation-name: boingboingboing;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;
	animation-duration: 0.4s;
	animation-iteration-count: infinite;
}

/*--- Those cards ---*/
.card-list-item {
	height: 100%;
	margin-right: 1rem;

	border-image: var(--section-9patch-image) 10 10 10 10 fill / 10px 10px 10px 10px;
	border-image-repeat: repeat;
	padding: 10px 10px 10px 10px;

	filter: drop-shadow(4px 4px 5px #00000044);

}

.card {
	display: block;

	width: 25em;
	height: 27em;
}

.card-thumbnail {
	display: block;
	padding: inherit;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

.card-art {
	display: block;
	padding: inherit;
	margin-bottom: -1em;
	width: 100%;
	max-height: 90%;
	object-fit: cover;
	object-position: center;
}

.card-title {
	display: block;
	padding: inherit;
	white-space: normal;
	font-size: 1.25rem;
	width: max-content;
}

.card-author {
	display: block;
	padding: inherit;
	white-space: normal;
	font-size: 1.05rem;
	line-height: 75%;
	width: max-content;
}

.card-description {
	padding: inherit;
	white-space: normal;
	margin-top: 0%;
}

.card-date {
	position: absolute;
	bottom: 0.25rem; /* why is not  1rem???? */
	right: 1rem;
	line-height: 0%;
	opacity: 0.5;
}


/*--- Animationsssssssssss ---*/
@keyframes bg-scroll {
	from {
		background-position: 0px 0px;
	}

	to {
		background-position: 32px 32px;
	}
}

@keyframes boingboingboing {
	from {
		transform: scale(1.05, 0.95);
	}

	to {
		transform: scale(0.95, 1.05);
	}
}

@keyframes boingboingboing-logo {
	from {
		transform: scale(1.05, 0.95) rotate(-6deg);
	}

	to {
		transform: scale(0.95, 1.05) rotate(-6deg);
	}
}