#body-bg {
	background: #00000020 url("../assets/wallpapers/city-bw.png") no-repeat center;
	background-blend-mode: darken;
	position: fixed;
	z-index: -999;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

/* MASCOT SETTINGS */
#mascot {
	position: absolute;
	right: 5vw;
	top: -223px;
	visibility: visible;
}

@media screen and (max-width: 820px) {
	#mascot {
		visibility: hidden;
	}
}

/* FLEXBOX */
#blog-container {
	display: flex;
	flex-direction: row;
	gap: 1vw;
	align-items: space-between;
	min-height: 700px;
	margin-bottom: 10px;
}



#blog-nav {
	background-color: var(--secondary-color);
	border: 4px double var(--primary-color);
	flex: 0.5 1 auto;
	width: 100px;
}

#blog-nav ul {
	list-style-type: none;
}

#blog-nav a {
	text-decoration: none;
	display: block;

	color: var(--text-color);

	width: 100%;
	height: 120px;

	padding: 15px;
}

#blog-nav a:hover {
	background-color: #00026c;
}

#blog-nav a img {
	float: left;
	margin-right: 10px;

	width: 90px;
	height: 90px;
}

#blogpost {
	background-color: var(--secondary-color-lighter);
	border: 4px double var(--secondary-color);
	flex: 1 1 auto;
	height: 700px;
	width: 700px;

	color: black;
	font-size: large;

	padding: 1vw;

	overflow-y: scroll;
	overflow-x: hidden;
}

#blogpost h2 {
	font-size: 3rem;
	color: var(--secondary-color);
}

@media screen and (max-width:800px) {
	#blog-container {
		flex-direction: column-reverse;
	}

	#blog-nav {
		width: 100%;
	}

	#blogpost {
		width: 100%;
	}
}