:root {
	--bg-color: black;
	--fg-color: white;
	/*
	--btn-bg-color: #1b1b1b;
	--link-color: #979797;
	--code-bg: #1a1a1a;
	--code-border: #262626;
	--code-color: white;
	*/
}

body {
    background-image: linear-gradient(180deg,rgba(0,0,0,0.75), rgba(0,0,0,0)), url(visuals/charlotte.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
	background-color: var(--bg-color);
	color: var(--fg-color);
	font-family: system-ui, sans-serif;
	margin: 1em auto;
	padding: 1em;
	max-width: 50em;
}

/* Navbar */

.navbar {
    position: sticky;
	top: 0.8em;
	z-index: 100;
	margin-bottom: 2em;
}

.navbar-elements {
    display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85em 1.4em;
	border-radius: 999px;
	background-color: rgba(10, 10, 10, 0.35);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid #222;
}

.navbar-logo {
	display: flex;
	align-items: center;
	font-family: "mplusu";
	text-decoration: none;
	color: var(--fg-color);
	flex-shrink: 0;
}

.navbar-links {
	display: flex;
	align-items: center;
	gap: 1.5em;
}

.navbar-links > a {
    font-family: "mplusu";
	text-decoration: none;
	font-size: 0.9em;
	color: #bbb;
	transition: color 0.2s;
}

.navbar-links > a:hover {
	color: var(--fg-color);
}

/* page */

.page-content {
    margin: 0em 2em 0em 2em;
    padding: 0.5em 2em;
    background-color: rgba(10, 10, 10, 0.35);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 16px;
	border: 1px solid #222;
}

@font-face {
    font-family: "mplusu";
    src: url(fonts/MPLUSU-VariableFont_wght.ttf);
    ascent-override: 91%;
}

@view-transition {
    animation: auto;
}