#title {
	position: absolute;
	display: block;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	height: 6vh;
}

#title > img {
	height: 100%;
}



/*
 * General CSS.
 */

body
{
	background: black;
	color: #BBB;

	/* Necessary for sticking the footer to the bottom. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;

	font-family: sans-serif;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 3rem;
	margin-bottom: 1rem;
}

h1, h2 {
	text-align: center;
}

h1, h2, h3, h4, h5, h6,
form .input-field,
.mono,
#version, #copyright, #rightmsg
{
	font-family: "Courier New", Consolas, monospace;
}

p {
	text-align: justify;
}

a {
	color: #D44;
}

ul {
	list-style: none;
	padding: 0 2em;
	text-align: justify;
}

ul > li {
	margin-bottom: 1rem;
}
  
ul li::before {
	position:absolute;
	content: "\2022";
	color: #B00;
	font-weight: bold;
	display: inline-block;
	margin-left: -1em;
	transform: translateX(-50%);
}

button
{
	background: #B33;
	color: white;

	border: none;
	border-radius: 20px;
	padding: 10px 20px;
	text-align: center;

	transition: 0.3s;
}

button:hover
{
	background: #D66;
}

button:active
{
	background: #800;
}



form > * {
	margin-top: 1em;
}

.input-field {
	display: flex;
	font-size: 16px;
	height: 42px;
	border-bottom: solid 2px #B33;
}

.input-field > .label-wrapper {
	width: 180px;
	height: 100%;
	background: linear-gradient(#F880, #F886);
}

.input-field > .label-wrapper > .label {
	display: inline-block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

	color: white;
	margin-left: 1rem;
}

.input-field > input {
	display: block;
	width: 100%;
	padding: 0;
	padding-left: 1rem;
	box-sizing: border-box;

	color: white;
	font-family: inherit;

	background: linear-gradient(#F880, #F884);
	border: none;
}

.input-field input:focus {
	outline: none;
}

form .btn-center button {
	width: 200px;
	margin: 0 auto;
	display: block;
}

::placeholder {
	color: #CCC;
	font-style: italic;
}

@media only screen and (max-width: 768px) {
	.input-field {
		display: block;
		font-size: 16px;
		height: 84px;
		border-bottom: none;
	}

	.input-field > .label-wrapper, .input-field > input {
		display: block;
		width: 100%;
		height: 42px;
	}

	.input-field > .label-wrapper {
		border-bottom: solid 2px #B33;
	}
	
	.input-field > .label-wrapper > .label {
		line-height: 42px;
		color: white;
		margin: auto 1rem;
	}

	.input-field > input {
		background: linear-gradient(to top, #F880, #F884);
	}
}

.row
{
	display: flex;
}

.col
{
	display: block;
}

.col1
{
	width: 8.333%;
}

.col3
{
	width: 25%;
}

.col6
{
	width: 50%;
}

.col8
{
	width: 66.666%;
}

.col9
{
	width: 75%;
}

.flex-space-between
{
	justify-content: space-between;
	gap: 2rem;
}



header {
	color: white;
}

header > *
{
	height: 42px;
}

header > #title-box
{
	display: block;
	text-align: center;
	font-size: 30px;
	line-height: 42px;
	margin: 0;

	background: radial-gradient(ellipse at top, #600, #000 90%);
}

header > #title-box > *
{
	color: white;
	text-decoration: none;

	user-select: none;
}

header > #menu-box
{
	position: relative;
	text-align: center;
}

header > #menu-box nav
{
	display: inline-flex;
	justify-content: center;
	background: #000;
	border-radius: 42px;
}

header > #menu-box a
{
	color: white;
	text-decoration: none;
	padding: 10px 20px;
	font-size: 18px;
	border-radius: 42px;

	transition: 0.3s;
}

header > #menu-box a:hover
{
	background: #FFF;
	color: #000;
}

header > #menu-box #back-button
{
	position: absolute;
	font-size: 26px;
	top: 0;
	left: 0;
	width: 40px;
	padding: 2px 0px;
}

header > #menu-box nav, header > #menu-box #back-button
{
	border: 1px solid white;
}

footer
{
	display: flex;
	margin-top: auto;
	width: 100%;
	color: white;
	font-size: 0.8rem;

	/*#528*/
	background: radial-gradient(ellipse at bottom, #801, #000 80%);
}

footer > *
{
	width: calc(33.333% - 32px);
	margin: 16px;
}

footer > #version
{
	text-align: left;
}

footer > #copyright
{
	text-align: center;
}

footer > #rightmsg
{
	text-align: right;
}

/* Common header and footer background. */
header > #menu-box, footer {
	--background: linear-gradient(to bottom, #AAA, #333 5%, #222 95%, #000);
}

.screen-small
{
	display: none;
}
@media only screen and (max-width: 1024px) {
	.screen-small
	{
		display: initial;
	}
	.screen-large
	{
		display: none;
	}
}



.blog-post-content img {
	display: block;
	width: 100%;
}



.projects-wrapper {
	background: #444;
	padding: 10px;
}

.project-block {
	position: relative;
	display: flex;
	height: 256px;
	background: #333;
	text-align: left;

	color: #DDD;
	text-decoration: none;

	font-size: 14px;
}

.project-block-background, .project-block-shade {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.project-block-background {
	transition: 0.3s;
	opacity: 0.4;
}

.project-block-shade, .project-tag {
	box-shadow: inset 0px 10px 6px -8px rgba(255, 255, 255, 0.4), inset 0 -10px 6px -8px rgba(0, 0, 0, 0.4);
}

.project-block:hover > .project-block-background {
	opacity: 0.7;
}

.project-block .thumbnail {
	width: 208px;
	height: 208px;
	margin: 24px;
	margin-right: 14px;
	box-sizing: border-box;
	text-align: center;
}

.project-block p {
	margin: 0;
}

.project-block .project-title-wrapper {
	display: flex;
	align-items: stretch;
	max-height: 2rem;
	gap: 12px;
	flex-wrap: wrap;
	overflow: hidden;
}

.project-block .project-title {
	/*font-family: 'Nothing You Could Do', cursive;*/
	font-size: 24px;
	font-weight: bold;
	margin-right: auto;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-block .project-tag-wrapper {
	display: flex;
}

.project-block .project-tag {
	background: #FFF3;
	margin: auto 0;
	padding: 6px;

	white-space: nowrap;
}

.project-block .project-desc {
	padding-top: 0.5rem;
	margin-top: 0.5rem;
	border-top: solid 1px white;

	overflow: hidden;
	text-overflow: ellipsis;
}

.project-block > .project-owner-star {
	display: block;
	position: absolute;
	top: -8px;
	left: -8px;
	width: 3rem;
	height: 3rem;
	z-index: 2;
}

.project-block > .project-owner-star > .project-owner-star-img {
	display: block;
	width: 100%;
	transform: rotate(-20deg);
}



.image-view {
	background: #574f45;
	margin: 0 -10%;
}

.image-view h2 {
	margin: 0 0 20px 0;
	padding: 20px 0 0 0;
	font-size: 32px;
	font-family: 'Nothing You Could Do', cursive;
}

.image-view > p {
	margin: 20px 10%;
}

.image-view > .image-view-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 32px;
	gap: 8px;
}

.image-view > .image-view-list > div {
	width: calc(33.333% - 16px);	
}

.image-view > .image-view-list > div > div {
	position: relative;
	width: 100%;
	aspect-ratio: 1.7777777778;
	box-shadow: inset 0 0 8px #0008;
}

.image-view > .image-view-list > div > div > img {
	position: absolute;
	display: block;
	max-width: 98%;
	max-height: 540px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
}

.image-view > .image-view-list > div > p {
	margin: 2%;
	text-align: center;
	color: white;
}

.banner-wrapper {
	min-height: calc(1em + 128px);
	overflow: hidden;
	position: relative;
}

.banner-wrapper .banner-image {
	min-width: 100%;
	overflow: hidden;
}

.banner-wrapper .banner-image img {
	display: block;
	width: 100%;
}

/* Project banner contains a title set over a tricky gradient. We need all that stuff below. */
.banner-wrapper .banner-title {
	width: 100%;
	height: 64px;
}
.banner-title-bottom {
	height: 64px;
	background: linear-gradient(to bottom, var(--c, #666), #000);
}
.banner-wrapper .banner-title {
	position: absolute;
	bottom: 0;
	background: linear-gradient(to bottom, #0000, var(--c, #666));
}
.banner-project-title {
	margin: 0;
	padding: 0;
	color: #e8e8e8;
	text-shadow: black 0 0 12px;
	background: var(--c, #666);
}



/* Tooltips. */
.tooltip {
	position: relative;
}

.tooltip-content {
	position: absolute;
	display: block;
	bottom: 100%;
	left: 50%;
	margin-left: -110px;
	width: 220px;
	pointer-events: none;

	z-index: 1;
	opacity: 0;
	transition: opacity 0.2s;
}

.tooltip-background {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: -1;

	background: #222F;
	width: 100%;
	height: 100%;

	filter: blur(2px);
	border-radius: 8px;
}

.tooltip-background::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -1rem;
	border-width: 1rem;
	border-style: solid;
	border-color: #222F transparent transparent transparent;
}

.tooltip-text {
	text-align: center;
	font-size: 1rem;
	color: #FFFFFF;
	padding: 1.0rem;
}

.tooltip:hover .tooltip-content {
	opacity: 1;
}



@media only screen and (max-width: 768px) {
	header > #title-box {
		font-size: 24px;
	}

	footer {
		display: block;
		font-size: 12px;
	}

	footer > * {
		display: block;
		text-align: center !important;
		width: 100%;
		margin: 1em 0;
	}

	.image-view > .image-view-list > div {
		width: 50%;
	}
}



.bold
{
	font-weight: bold;
}

.align-justify
{
	text-align: justify;
}

.container
{
	width: 70%;
	margin: 0 auto;
}

.align-left {
	display: flex;
	justify-content: left;
}

.align-center {
	display: flex;
	justify-content: center;
}

.align-right {
	display: flex;
	justify-content: right;
}

@media only screen and (max-width: 768px) {

	.container {
		width: 100%;
	}
}