@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');

body {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	line-height: 1.6;
	max-width: 600px;
	margin: 0 auto;
	padding: 2rem;
	color: white;
	background-color: #181a1b;
	user-select: none;
}

a {
	text-decoration: none;
	color: #b8b8b8;
	transition: 0.3s ease;
}

a:hover { color: #ffffff; }

hr {
	margin-top:2rem;
	margin-bottom:2rem;
	opacity: 0.5;	
}

blockquote {
	background-color: rgba(255, 255, 255, 0.03);
	margin: 0;	
	padding: 2rem;	
	border-radius: 1rem;
	margin-bottom: 2rem;
}

blockquote p 	{ margin: 0; }

p		{ margin:0 0 1em 0; }
p strong	{ font-weight:700; }

h1 { font-size: 2rem; margin:0; }
h2 { font-size: 1.5rem; margin: 0; } 

.main-header {
	padding-bottom: 2rem;
}

.post-header {
 
	border-left: 5px solid #eee;
	padding-left: 1rem;
	margin-bottom: 2rem; 
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: start;

}
.post-content {	
	font-size:1.1rem; 
	margin-bottom: 2rem;
}

footer	 { }

.list-container {
    	display: flex;
       	flex-direction: column;
	gap: 3rem;
	padding-bottom: 3rem;
}

.list-item {
	flex-direction: column;
	display: flex;
	border-left: 5px solid #eee;
	transition: 0.2s ease;
	padding-left: 1rem;
}

.list-item:hover {
	transform: translateX(5px);
}

.list-item-header {
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: start;
}

.list-item-date { font-size: 1rem; }

.list-item-summary {
	position: relative;
	max-height: 125px;
	overflow: hidden;

	display:flex;
	flex-direction:column;
	font-size: 1rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8em;
}

.list-item-fade-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 75px;  
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #181a1b);
	pointer-events: none; 
}