@import url(/styles/core.css);
@import url(/styles/leftbox/base.css);
@import url(/styles/themes/tiles/white/diagrid24.css);

:root {
	--miri2_color-background: hsla(0, 100%, 99%, 0.7);
	--miri2_color-accent: khaki;
}

body {
	font-family: var(--font-sans-serif);
	background-color: var(--miri2_color-accent);
}

.basebox-bg {
	background-color: var(--miri2_color-background);
	border-color: var(--miri2_color-accent);
	outline-color: var(--miri2_color-accent);
}

span, p {
	letter-spacing: 1px;
}

ul {
	line-height: 2;
}

img {
	max-height: 14rem;
}

iframe {
	max-width: 100%;
}

summary:hover {
	text-decoration: underline;
	cursor: pointer;
}

#screenshots details img {
	display: block;
	margin-top: 1rem;
}

.header h1 {
	font-size: 7rem;
}
h2 {
	font-size: 4rem;
	margin-block: 2rem;
}

.footer {
	margin-top: 2rem;
}

.style-box {
	font-size: 0.6rem;
}
	.style-box ul {
		padding-left: 0.8rem;
		text-align: left;
	}


.nav {
	background-color: var(--miri2_color-background);
	border: 0.2rem solid var(--miri2_color-accent);
	padding: 1rem;
	padding-left: 0.75rem;
	font-size: 0.8rem;
}
	.nav ol {
		margin: 0;
		padding-left: 1rem;
		line-height: 1.5;
	}

	.screenshots img {
		max-height: unset;
		max-width: 100%;
		border: 0.1rem solid black;
	}


.accomplishments-page h2 {
	font-size: 2rem;
	color: goldenrod;
}



.color-1 {
	color: var(--miri2_color-accent);
}
.color-2, a {
	color: blue;
}


/* @media (min-width: 700px) {
	.basebox {
		position: relative;
	}
    .style-box {
		position: absolute;
		right: 0.5rem;
		top: 0.5rem;
	}
}

@media (min-width: 800px) {
    .style-box {
		right: 0.75rem;
	}
}

@media (min-width: 800px) {
    .basebox {
		position: unset;
	}
	.style-box {
		position: fixed;
		top: 0.75rem;
	}
} */

@media (min-width: 950px) {
	.basebox, 
	.accomplishments {
		position: relative;
	}
    .blog-nav {
		position: absolute;	
		right: 1rem;
		top: 0.5rem;
	}
	/* .accomplishments .nav {
		right: 0;
	} */
}