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

/*
	TODO: Maybe make assets for a cloud 9patch
*/

: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 12345 ---*/
html {
	scrollbar-color: var(--scrollbar-colors);
}

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

	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;
}

main {
	margin: auto;

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

	
	-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);
}

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

#home-button {
	position: absolute;
	top: 20px;
	left: 20px;
	line-height: 0%;
	
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: crisp-edges;
	image-rendering: pixelated;

	animation: boingboingboing-logo alternate-reverse infinite;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;

	z-index: 10;
}

.note {
	display: flex;
	min-height: 95vh; /* vh is weird and 100vh makes the scrollbar appear*/
}


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

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

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

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