body, html {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html {
	background-color: #333;
	color: white;
	min-height: 100%;
}

body {
	padding: 10px;
}

a img {
	border: none;
}

a img.badge {
	outline: none;
}

a {
	color: #db301f;
	text-decoration: none;
}
a:visited {
	color: #df8b4e;
}
a.anchor {
	color: unset;
	text-decoration: none;
}

.layout {
	margin: auto;
	max-width: 980px;
	min-height: 580px;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	grid-template-rows: 115px auto 2rem;
	grid-gap: 10px;
}

.layout > header {
	grid-area: 1 / 1 / span 1 / span 2;
	/*
	background: linear-gradient(170deg, #b03931 0%, #b039314f 60%, rgba(0, 0, 0, 0.3) 110%),
		repeating-linear-gradient(45deg, var(--highlight), var(--highlight) var(--size), transparent var(--size), transparent var(--end)),
		repeating-linear-gradient(-45deg, var(--highlight), var(--highlight) var(--size), transparent var(--size), transparent var(--end)),
		var(--bg);
	--size: 6px;
	--end: 10px;
	--highlight: #333;
	--bg: #2d2c2c;
	*/
	background: linear-gradient(170deg, #b03931 0%, #b039314f 60%, rgba(0, 0, 0, 0.3) 110%),
		repeating-linear-gradient(45deg, #333, #333 6px, transparent 6px, transparent 10px),
		repeating-linear-gradient(-45deg, #333, #333 6px, transparent 6px, transparent 10px),
		#2d2c2c;
	margin: 0;
	height: 115px;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	--bg: #2d2c2c;
	animation: header-flash 10s linear infinite alternate;
}

@keyframes header-flash {
	from {
		background: linear-gradient(170deg, #b03931 0%, #b039314f 60%, rgba(0, 0, 0, 0.3) 110%),
			repeating-linear-gradient(45deg, #333, #333 6px, transparent 6px, transparent 10px),
			repeating-linear-gradient(-45deg, #333, #333 6px, transparent 6px, transparent 10px),
			#2d2c2c;
	}
	to {
		background: linear-gradient(170deg, #b03931 0%, #b039314f 60%, rgba(0, 0, 0, 0.3) 110%),
			repeating-linear-gradient(45deg, #333, #333 6px, transparent 6px, transparent 10px),
			repeating-linear-gradient(-45deg, #333, #333 6px, transparent 6px, transparent 10px),
			#3b3939;
	}
}

.layout > header > a {
	color: white;
	text-decoration: none;
	font-size: 3em;
	line-height: 87px;
	padding-left: 1rem;
	font-weight: 100;
	flex-grow: 1;
}

.layout > header > a > b {
	font-weight: 500;
}

.layout > header > canvas, .layout > header > img {
	flex-grow: 0;
	flex-shrink: 1;
	max-width: 100%;
}

.layout > aside.menu {
	grid-area: 2 / 1 / span 1 / span 1;
}

.layout > main {
	grid-area: 2 / 2 / span 1 / span 1;
}

.layout > aside.sideflag {
	grid-area: 1 / 3 / span 3 / span 1;
}

.layout > footer {
	grid-area: 3 / 1 / span 1 / span 2;
}

.layout > footer .fresh {
	font-family: 'Comic Sans MS', 'Comic Neue', cursive;
	font-weight: bold;
}

.layout > header:after {
	content: "";
	display: block;
	clear: both;
}

img {
	width: auto;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 2rem;
}

.layout > footer > p {
	margin: 0;
	line-height: 2rem;
	text-align: center;
}

.layout > aside > nav {
	position: -webkit-sticky;
	position: sticky;
	top: 10px;
}

.layout > aside > nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.layout > aside > nav > ul a {
	color: white;
	text-decoration: none;
	display: block;
	text-align: center;
	padding: 0.5rem;
	margin: auto;
	margin-top: 10px;
	max-width: 185px;
	border-radius: 5px;
	background-color: #6a413f;
}

.layout > aside > nav > ul a.active,
.layout > aside > nav > ul a:hover,
.layout > aside > nav > ul a:focus {
	background-color: #b03931;
}

.layout > aside > nav > ul > li:first-child a {
	margin-top: 0;
}

.layout > aside.sideflag img {
	display: block;
	margin: auto;
}

article, form, header, .block {
	display: block;
	margin: 10px 0;
	background-color: rgba(0, 0, 0, 0.3);
	background: radial-gradient(circle at 100% 0, #b0393117 0%, rgba(0, 0, 0, 0.3) 700px);
	border-radius: 5px;
	padding: 10px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

article.preview {
	padding: 10px;
}

article.preview h2 {
	border: none;
	font-size: 1.2rem;
}

article.preview a {
	color: white;
	text-decoration: none;
}

article.blog pre {
	padding: 16px;
	color: #111111;
	background-color: #EEEEEE;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	overflow-x: auto;
}

article.blog img {
	width: auto;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

form > label,
form > label > input {
	display: block;
	box-sizing: border-box;
	margin-bottom: 10px;
}

input[type="text"], input[type="password"], input[type="number"] {
	background-color: transparent;
	border: none;
	color: white;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	appearance: none;
	padding: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	transition: border-bottom-color 0.05s ease-in;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
	border-bottom-color: white;
}

input[type="button"], input[type="submit"], submit {
	appearance: none;
	padding: 5px 20px;
	background-color: #b03931;
	color: white;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	border: none;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.1s ease-in;
}

input[type="button"]:hover, input[type="submit"]:hover, submit:hover,
input[type="button"]:focus, input[type="submit"]:focus, submit:focus {
	background-color: #da5349;
}

input[type="button"]:active, input[type="submit"]:active, submit:active {
	background-color: #98312a;
}

form.login label > input, .guestbook-submit #message {
	width: 100%;
	box-sizing: border-box;
}

form.login label > input, .guestbook-submit table {
	width: 100%;
	table-layout: fixed;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

form.login label > input, .guestbook-submit table th {
	width: 75px;
	text-align: right;
	font-weight: normal;
}

form.login label > input, .guestbook-submit table th label:after {
	content: ":";
	display: inline;
}

form > label > span {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
}

main > :first-child {
	margin-top: 0;
}

main > .guestbook > .comments > .comment {
	padding: 2pt 8pt;
	margin: 10px 0;
	/* display: flex; */
}

main > .guestbook > .comments > .comment > span.date {
	width: 75px;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	float: left;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.7em;
	line-height: 1.5rem;
}

main > .guestbook > .comments > .comment > span.date.same-date {
	opacity: 0;
}
main > .guestbook > .comments > .comment:hover > span.date.same-date {
	opacity: 1;
}

main > .guestbook > .comments > .comment > span.sender {
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	font-weight: bold;
	margin-right: 4pt;
	float: left;
}

main > .guestbook > .comments > .comment > span.sender:after {
	content: " ";
	display: inline;
}

main > .guestbook > .comments > .comment > blockquote {
	padding-left: 100px;
}

main > .guestbook > .comments > .comment:nth-child(7n+1) > span.sender {
	color: #da5349;
}

main > .guestbook > .comments > .comment:nth-child(7n+2) > span.sender {
	color: #df8b4e;
}

main > .guestbook > .comments > .comment:nth-child(7n+3) > span.sender {
	color: #ffc107;
}

main > .guestbook > .comments > .comment:nth-child(7n+4) > span.sender {
	color: #8bc34a;
}

main > .guestbook > .comments > .comment:nth-child(7n+5) > span.sender {
	color: #00bcd4;
}

main > .guestbook > .comments > .comment:nth-child(7n+6) > span.sender {
	color: #2196f3;
}

main > .guestbook > .comments > .comment:nth-child(7n+0) > span.sender {
	color: #e91e63;
}

main > .guestbook > .comments > .comment > blockquote {
	margin: 0;
}

main > .gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

main > .gallery img {
	margin: 6px;
}


main > .gallery_preview img {
	width: auto;
	max-width: 100%;
	border: none;
	outline: none;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 5px;
}

.pettingInfo {
	position: absolute;
	padding: 10px;
	background-color: #b03931;
	border-radius: 5px;
	box-shadow: 0 2px 7px rgb(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pettingInfo p {
	margin: 0;
	text-align: center;
}

.pettingInfo p:first-child {
	font-weight: bold;
}

.pettingInfo p:last-child {
	font-size: 0.8em;
}

.pettingInfo a {
	font-weight: bold;
	color: white;
	text-decoration: underline;
}

.visitcount {
	display: inline-flex;
	vertical-align: middle;
}

.visitcount > .digit {
	width: 20px;
	margin-right: 1px;
	height: 24px;
	display: inline-block;
	background: url(/img/counter/all.png) 0 0 no-repeat;
}

.visitcount > .digit0 { background-position-x: 0; }
.visitcount > .digit1 { background-position-x: -20px; }
.visitcount > .digit2 { background-position-x: -40px; }
.visitcount > .digit3 { background-position-x: -60px; }
.visitcount > .digit4 { background-position-x: -80px; }
.visitcount > .digit5 { background-position-x: -100px; }
.visitcount > .digit6 { background-position-x: -120px; }
.visitcount > .digit7 { background-position-x: -140px; }
.visitcount > .digit8 { background-position-x: -160px; }
.visitcount > .digit9 { background-position-x: -180px; }

@media screen and (max-width: 600px) {
	.layout {
		display: block;
	}

	.layout > * {
		margin-bottom: 10px;
	}

	.layout > aside > nav > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.layout > aside > nav > ul a {
		width: unset;
		display: inline-block;
		padding: 10px 20px;
		margin: 5px;
	}

	.layout > aside > nav > ul:after {
		content: "";
		display: block;
		clear: both;
	}

	main > .guestbook > .comments > .comment > blockquote {
		padding-left: 75px;
	}
}

@media screen and (max-width: 460px) {
	.layout > header > #dman1,
	.layout > header > canvas {
		display: none;
	}

	.layout > header,
	.layout > header a {
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	main > .guestbook > .comments > .comment {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		margin-top: 10px;
	}

	main > .guestbook > .comments > .comment > .date {
		grid-area: 1 / 2 / span 1 / span 1;
		float: none;
	}

	main > .guestbook > .comments > .comment > span.date.same-date {
		opacity: 1;
	}

	main > .guestbook > .comments > .comment > .sender {
		grid-area: 1 / 1 / span 1 / span 1;
		float: none;
	}

	main > .guestbook > .comments > .comment > blockquote {
		padding-left: 0;
		grid-area: 2 / 1 / span 1 / span 2;
	}
}

@media screen and (max-width: 400px) {
	.layout > header > a {
		font-size: 11.5vw;
	}
}