:root {
	--interact-color: rgb(50,50,50);
	--interacted-color: rgb(70,70,70);
	--background-color: rgb(130, 163, 63);
}

* {
	-ms-overflow-style: none;
	background-color: var(--background-color);
	scrollbar-color: var(--interact-color) var(--background-color);
}

a:link {
	color: rgb(93, 39, 163);
	text-decoration: none;
  }
  
  a:visited {
	color: rgb(81, 40, 134);
	text-decoration: none;
  }
  
  a:hover {
	color: rgb(93, 39, 163);
	text-decoration: underline;
  }
  
  a:active {
	color: rgb(152, 110, 206);
	background-color: transparent;
	text-decoration: underline;
  }

body {
	color: rgb(32, 32, 32);
	font-family: "Verdana", "Arial", sans-serif;
	line-height: 1.5;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0 0 10em;
	overflow-y: scroll;
	scrollbar-color: black green;
}

article {
	max-width: min(50em, calc(100% - 5em));
	margin: 0 auto;
}

article > header {
	z-index: 4;
	text-align: right;
	position: sticky;
	top: 0;
	width: 100%;
	overflow: hidden;
	background-color: var(--background-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

article > header > h1 {
	font-size: 1.5em;
	padding-right: 3em;
}

img {
	width: 100%;
}

article > header > time {
	min-height: 100%;
	font-size: 1.5em;
}

#overlay {
	z-index: 5;
	position: fixed;
	top: 1em;
	right: 1em;
	width: 3em;
	height: 3em;
	fill: var(--interact-color);
}

.padding {
	width: 100%;
	height: 4em;
}

.padding::after {
    content: '';
    width: 100%;
    height: 2px;
    background: black;
    display: block;
    position: relative;
    top: 2em;
}

#overlay:hover {
	fill: var(--interacted-color);
}