@keyframes scroll {from {background-position-x: 600px} to {background-position-x: 0}}

body {
	color: #389440;
	font-family: mspgothic;
	background: linear-gradient(to bottom, #0F2027, transparent calc(50% + 72px)) #0B0C0D fixed;
	/*background-image: url("https://blake-vevo.neocities.org/gallery/img/IMG_7446.JPG");
            background-repeat: no-repeat; 
            background-size: cover;
            background-attachment: fixed;*/ 
	max-width: 300px;
	padding-inline: 64px 192px;
	margin: 64px auto;
	margin-top: 380px;
	position: relative;

.logo {
			position: fixed;
			bottom: -80px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9999;
			background-image: url("assets/blogo.png");
			background-size: contain;
			background-repeat: no-repeat;
			width: 80px;
			height: 150px;
			opacity: 0.10;
		}


	&::before {
		content: url(assets/mercer2.png);
		max-width: 30px;
		display: block;
		text-align: right;
		position: absolute;
		top: -340px;
		bottom: 0;
		right: 150px;
		pointer-events: none;
	}

	&::after {
		background: url(assets/vapor.png);
		opacity: 0.10;
		animation: scroll 50s linear infinite;
		image-rendering: pixelated;
	}
}

h1 {
	font-family: serif;
	font-style: italic;
	font-weight: normal;
}

#nav {
	ul {
		padding-left: unset;
		margin-block: unset;
	}

	li {
		display: inline;
	}
}

a {
	color: color-mix(in srgb, currentcolor, #45d1a1);
	text-decoration: underline;
}

#updates-goals-wrapper {
	display: flex;
	max-height: 200px;
}

#updates, #goals {
	flex: 1;
	overflow: hidden auto;

	h2 {
		font-size: 1em;
	}

	ul {
		list-style: none;
		padding-left: unset;
	}
}

#updates {
	/* display: grid;
	grid-template-columns: auto 1fr;
	align-content: start;
	gap: 0.5em; */
	padding-right: 1em;

	h2 {
		grid-column: 1 / 3;
	}

	h3 {
		font-size: 0.875em;
		font-weight: normal;
		margin-block: 0.5rem 0.25rem;
	}

	ul {
		margin-block: unset;
	}
}

#goals {
	border-left: 1px dashed;
	padding-left: 1em;

	ul {
		margin-block: 0.5em;
	}
}