body {
        background-color: #f7fbf0;
        color: #000000;
}

a {
        color: #400080;
}

a:visited {
        color: #800000;
}

a:hover {
        color: #ff0000;
}

ul {
        list-style-type: none;
}

.header {
	border-bottom: 1px solid black;
}

.header * {
	display: inline;
}

.header p {
	float: right;
}

.footer {
        border-top: 2px solid black;
}

h1 {
        font-style: italic;
}

.symbol-clar {
	height: 40px;
	display: inline-block;
	margin: 1em;
}

.symbol-clar .clar-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;

	box-shadow: 0 0 0 4px white,
	inset 0 2px 0 rgba(0, 0, 0, .08),
	0 3px 0 4px rgba(0,0,0,.05);
	
	overflow: hidden;

	display: inline-block;
}

.clar-text {
	display: inline-block;
	/* text-align: center; */
	margin: auto;
}

.clar-icon img {
	width: 100%;
	height: auto;
}

.timeline {
	display: flex;
}

.timeline .time-jump {
	position: sticky;
	top: 20px;
	block-size: calc(100vh - 25px);
	overflow-y: auto;
	padding-left: 2em;
	direction: rtl;


}

.timeline .time-jump ul {
	padding-inline-start: 0;
	min-width: 4em; /* should contain a 4 digit year */
}

.timeline .time-jump a {
	color: blue;
}

.timeline .time-jump a:visited {
	color: blue;
}

.timeline .time-jump a:visited:hover {
	color: red;
}

.cell_tl_month .node-content,
.cell_tl_year .node-content {
	padding-left: 1em;
	border-radius: .25em;
}

.cell_tl_year .node-content {
	background-color: #e0a020;
	max-width: 90%;
	font-size: 120%;
}

.cell_tl_month .node-content {
	background-color: olive;
	max-width: 20em;
	font-size: 90%;
}

/* 
 * Code for timeline "borrowed" from
 * https://codyhouse.co/gem/vertical-timeline/
 * Licensed under MIT.
 */

.node {
	position: relative;
	width: 90%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0.1em 0;
}

.node-content {
	/* margin: 2em; */
}

/* This is the actuall timeline */
.node::before  {
	content: '';
	position: absolute;
	top: 0;
	left: 18px;
	height: 100%;
	width: 4px;
	background: #a7b4bd;
}

.node-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 0 0 4px white,
	inset 0 2px 0 rgba(0, 0, 0, .08),
	0 3px 0 4px rgba(0,0,0,.05);
	overflow: hidden;
}

.node-img img {
	width: 100%;
	height: auto;
}

.node-text {
	position: relative;
	margin-left: 60px;
	border-radius: .25em;
	padding: 0.2em;

}

.node-info .node-text {
	border: 1px solid gray;
	padding: 1em;
}

/* make latest year and month "entries" stay at top of screen when
 * scrolled of */
.timeline-year, .timeline-month {
	position: sticky;
	z-index: 1;
}

/* where on screen they stay. month is an ugly hardcoded value which
 * places it below the year indicator */
.timeline-year { top: 0px; }
.timeline-month { top: 2em; }

.timeline-year .node-text {
	margin-left: 20px;
}

.timeline-month .node-text {
	margin-left: 20px;
}