/* Blog title */
header {
	min-height: 50vh;
	padding: 10vw;

	background: linear-gradient(90deg,rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), center/cover no-repeat url("./Ryssebergen_2012b.jpg");
}
#herotitle {
	color: var(--inverttext);
}


/* Navigation */
#navigation {
	z-index: 1;
	
	position: sticky;
	top: -2px;
	min-height: 10vh;

	background-color: var(--invertbg);
}
#navigationcontainer {
	width: 80vw;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.aclogo {
	height: 2rem;
	aspect-ratio: 1;

	background-color: var(--text);
	border-radius: 2rem;
}
#navigationcontainer .wrapper > * {
	margin: 0 0.5rem;
}	


/* Blog post */
#content {
	min-height: 50vh;
	padding: 5vh 5vw;
	
	background-color: var(--primary);
	color: var(--inverttext);
	text-align: left;
}
#post {
	width: 60vw;
}
#postinfo {
	min-width: 80vw;
	margin: 3rem 0;

	justify-content: right;
	text-align: right;
}
.imgwrapper {
	margin: 1rem 0;
}
.imgwrapper p {
	font-size: 1rem;
	padding: 0.5rem 1rem;
}
.embed {
	margin: 1rem 0;
}


/* Standard element styling for blog/post/pages */
main p {
	padding: 0.5rem 0 1rem;
}
img {
	width: 40vw;
}
ul {
	margin: 1rem;
}
li {
	padding: 0.5rem 0;
}
#content a {
	color: var(--invertbg);
}
#content a:hover {
	color: var(--accent);
}

/* Footer */
#footer {
	padding: 2rem 5rem;
	align-items: stretch;
	
	background-color: var(--invertbg);
	
	color: var(--text);
	text-align: left
}
#footer > * {
	margin: 0 2rem;
}
.footermenu {
	display: flex;
	flex-direction: column;
}
.footermenu a > * {
	padding: 0.5rem 0;
}

/* Break points for mobile layout adjustments */
@media (max-width: 80vh) {
	#post {
		width: auto;
	}
}

/* By EagleP *.