:root {
	/* https://pixelcorners.lukeb.co.uk/?radius=10&multiplier=3 */
	--pixel-border: polygon(
		0px calc(100% - 21px),
		3px calc(100% - 21px),
		3px calc(100% - 15px),
		6px calc(100% - 15px),
		6px calc(100% - 9px),
		9px calc(100% - 9px),
		9px calc(100% - 6px),
		15px calc(100% - 6px),
		15px calc(100% - 3px),
		21px calc(100% - 3px),
		21px 100%,
		calc(100% - 21px) 100%,
		calc(100% - 21px) calc(100% - 3px),
		calc(100% - 15px) calc(100% - 3px),
		calc(100% - 15px) calc(100% - 6px),
		calc(100% - 9px) calc(100% - 6px),
		calc(100% - 9px) calc(100% - 9px),
		calc(100% - 6px) calc(100% - 9px),
		calc(100% - 6px) calc(100% - 15px),
		calc(100% - 3px) calc(100% - 15px),
		calc(100% - 3px) calc(100% - 21px),
		100% calc(100% - 21px),
		100% 21px,
		calc(100% - 3px) 21px,
		calc(100% - 3px) 15px,
		calc(100% - 6px) 15px,
		calc(100% - 6px) 9px,
		calc(100% - 9px) 9px,
		calc(100% - 9px) 6px,
		calc(100% - 15px) 6px,
		calc(100% - 15px) 3px,
		calc(100% - 21px) 3px,
		calc(100% - 21px) 0px,
		21px 0px,
		21px 3px,
		15px 3px,
		15px 6px,
		9px 6px,
		9px 9px,
		6px 9px,
		6px 15px,
		3px 15px,
		3px 21px,
		0px 21px
	);
	--cubic-bezier: all 0.3s cubic-bezier(0.62, -0.33, 0.31, 1.44);
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	margin: auto 20%;
	background-color: rgb(255, 224, 224);

	display: flex;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
}

h1.pixelated {
	font-family: "Press Start 2P", Arial, Helvetica, sans-serif;
	margin: 0;
}
* {
	font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
}

.flex-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	& .space {
		flex-grow: 1;
	}

	& img {
		transform: rotate(10deg);
	}
}

smol {
	font-size: small;
	font-weight: 200;
	font-style: italic;
}
.sidebar {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 64px;
	gap: 10px;
	
	clip-path: var(--pixel-border);
	padding: 20px;
	margin: 10px;
	background-color: rgb(255, 245, 245);
}

.sidebar-item {
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 10px;
	/*
	Source - https://stackoverflow.com/a/14068216
	Posted by Vargr, modified by community. See post 'Timeline' for change history
	Retrieved 2026-10-20, License - CC BY-SA 4.0
	*/
	img {
		image-rendering: optimizeSpeed; 			/* STOP SMOOTHING, GIVE ME SPEED  */
		image-rendering: -moz-crisp-edges; 			/* Firefox                        */
		image-rendering: -o-crisp-edges; 			/* Opera                          */
		image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
		image-rendering: pixelated; 				/* Universal support since 2021   */
		image-rendering: optimize-contrast; 		/* CSS3 Proposed                  */
		-ms-interpolation-mode: nearest-neighbor; 	/* IE8+                           */
		
		transition: var(--cubic-bezier);
		&:hover {
			transform: scale(1.05);
		}
	}
}

.content {
	/* border: 1px red solid; */
	clip-path: var(--pixel-border);
	padding: 20px;
	margin: 10px;
	background-color: rgb(255, 245, 245);
}

.icon {
	height: 24px;
	margin: 6px;
}

.float {
	display: flex;
	flex-direction: row;
	flex: 1;
	flex-wrap: wrap;
	gap: 10px;
}

.card-title {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.card {
	clip-path: var(--pixel-border);

	/* border: 1px gray solid; */
	padding: 10px;
	padding-left: 20px;
	& h3 {
		margin-left: -10px;
	}
	max-width: 330px;
	min-width: 200px;
	flex-grow: 1;

	text-decoration: none;

	transition: var(--cubic-bezier);
	color: rgb(70, 8, 8);
	background-color: rgb(252, 162, 162);
	&:hover {
		color: rgb(255, 224, 224);
		background-color: rgb(129, 2, 2);

		transform: scale(1.02);
		& .card-title {
			text-decoration: underline;
		}
	}
}

.circle {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 5px;
	&.blue {
		background-color: #3477c5;
	}
	&.green {
		background-color: #88df52;
	}
	&.pink {
		background-color: #f34c7c;
	}
}

@media only screen and (max-width: 600px) {
	body {
		margin: auto 20px;

		flex-direction: column;
	}

	.sidebar {
		flex-direction: row;
		width: auto;
	}

	.sidebar-item {
		margin-bottom: 0;
	}

}