/* newcss */
body {
	--nc-lk-1: #FF3881 !important;
	--nc-lk-2: #FF3881 !important;
	padding: 1rem;
}

/* header */

header {
	display: flex;
	flex-direction: row;
	align-items: center;
	
	font-size: 2em;

	padding-bottom: 1rem;
}

header > div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

header > div > span {
	margin: 0;
}

header > div > nav {
	font-size: 1rem;
	margin: 0;
}

.logo {
	margin: 0;
	margin-right: 1ch;
	height: 2em;
	vertical-align: middle;
}

@media only screen and (max-width: 600px) {
	header {
		font-size: 1.5rem;
	}
}

/* navigation */

.nav-parent {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1ch;
}

.nav-parent > a > button, .nav-bar > a > button {
	padding-top: 1em;
	padding-bottom: 1em;
	margin: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;

	font-size: 1.5em;
}

.nav-parent > a > button > small, .nav-bar > a > button > small {
	font-size: 0.67em;
}

.nav-parent > a > button > img, .nav-bar > a > button > img,
.nav-parent > a > button > span > img, .nav-bar > a > button > span > img {
	height: 32px;
	margin-bottom: 0;
}

.span-with-image {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1ch;
}

.nav-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: 1ch;
}

.nav-bar > * {
	flex: 1;
}

@media only screen and (max-width: 600px) {
	.nav-bar {
		flex-direction: column;
		gap: 0.5em;
	}

	.nav-separator {
		display: none;
	}

	.nav-bar > * {
		flex: 0;
		width: 100%;
	}
}

/* card */

div.card {
	padding: 2rem;
	margin-bottom: 1rem;

	border-radius: 1rem;

	background-color: black;
}

div.card h2, div.card h3, div.card h1, div.card h4, div.card h5 {
	color: white;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: light) {
	div.card code {
		color: black;
	}
}

div.card hr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

div.card p.actions a {
	white-space: nowrap;
}

div.card.place2023 {
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("/assets/images/2023-final-bg.webp");
	background-position: center;
	background-size: cover;

	color: white;
}

div.card.place2022 {
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("/assets/images/2022-final-bg.webp");
	background-position: center;
	background-size: cover;

	color: white;
}

div.card.connorcanvas {
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("/assets/images/connor-background.webp");
	background-position: center;
	background-size: cover;

	color: white;
}

div.card.pxls2017 {
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("/assets/images/pxls2017-final-bg.webp");
	background-position: center;
	background-size: cover;

	color: white;
}

div.card.place2017 {
	background-color: white;
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("/assets/images/2017-final-bg.webp");
	background-position: center;
	background-size: cover;

	color: white;
}

div.card.neurocanvas {
	background-color: white;
	background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("/assets/images/neuro-final-bg.webp");
	background-position: center;
	background-size: cover;

	color: white;
}

/* misc */

button {
	margin-right: 6px;
	margin-bottom: 6px;
}

a.link-with-button {
	text-decoration: none;
}

ul > li {
    margin-left: 2ch;
}