body, html {
  height: 100%;
}

body {
	color: #222;
	font-family: sans-serif;
	font-size: 18px;
	font-size: 1.2em;
	line-height: 1.6;
	padding-bottom: 5em;
	scroll-behavior: smooth;
	text-shadow: 2px 2px 5px white;
	overflow-x: hidden;
}

#bg {
	position: fixed;
	top: -3em;
	left: -2em;
	background-image: url("bg.jpg");
	height: 120%;
	width: 110%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -9999;
	overflow-y: hidden;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	-o-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	-moz-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

h1,
h2,
h3 {
	font-family: Georgia, Garamond, serif;
	line-height: 1.2;
}

h1,
h2,
h3,
p {
	transition-property: color;
	transition-duration: 0.5s;
	transition-delay: 0s;
}

h1:hover,
h2:hover,
h3:hover,
p:hover {
	color: #000;
}

a {
	white-space: pre-wrap;
	transition-property: font-size;
	transition-duration: 1s;
	transition-delay: 0s;
	filter: drop-shadow(0 0 0.5rem rgba(220,20,60, 0.5));
}

a:hover {
	font-size: 1.05em;
	filter: drop-shadow(0 0 0.5rem rgb(220,20,60));
}

iframe,
img {
	display: block;
	margin: 1em auto;
	max-width: 80%;
	max-height: 90vh;
	border-radius: 0.3em;
}

#portrait {
	border-radius: 50%;
	max-height: 55vh;
	max-width: 80vw;
	box-shadow: 0px 0px 5px white;
	transition-property: max-height;
	transition-duration: 1s;
	transition-delay: 0s;
}

#portrait:hover {
	max-height: 60vh;
}

[data-host],
[data-smash],
[data-asin] {
	cursor: pointer;
	transition-property: max-width, max-height;
	transition-duration: 0.5s;
	transition-delay: 0s;
}

[data-host]:hover,
[data-smash]:hover,
[data-asin]:hover {
	max-width: 81%;
	max-height: 91vh;
}

@media (min-width: 30em) {
	.row { width: 100%; display: inline-block; table-layout: fixed; }
	.column { display: table-cell; }
}

@media (max-width: 45em) {
	.column a {
		display: inline-block;
		margin-bottom: 0.5em;
	}
}

body {
	filter: invert(90%) hue-rotate(25deg);
	background-color: black;
}

img, video, iframe, #bg {
	filter: invert(100%) hue-rotate(-25deg);
}

img[data-lazy-src]{will-change:contents}