:root {
	--science: #E53935;
	--arts: #1cc747;
	--politics: #4e3eda;
}

.lifes {
	position: absolute;
	margin-top: 50px;
}
.life {
	width: 100%;
	position: absolute;
	border: 0;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.life .life-caption {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	white-space: nowrap;
	display: block;
	width: 100%;
	padding-left: 20px;
	margin: 2px;
	padding-top: 1px;
	border: 1px solid #FFF;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.75) 15%, rgba(200, 200, 200, 0) 50%);
}

.life.science, .badge-legend.science {
	background-color: var(--science);
}
.life.arts, .badge-legend.arts {
	background-color: var(--arts);
}
.life.politics, .badge-legend.politics {
	background-color: var(--politics);
}
.life.events {
	background-color: #999;
}
.life.events .life-caption {
	padding-left: 3px;
	padding-top: 2px;
	font-size: 12px;
}

#life-list .badge {
	color: black;
	margin: 5px;
	padding: 5px 10px;
	font-size: 14px;
}
#life-list .badge.science {
	border: 2px solid var(--science);
}
#life-list .badge.politics {
	border: 2px solid var(--politics);
}
#life-list .badge.arts {
	border: 2px solid var(--arts);
}
#life-list .badge.events {
	border: 1px solid #444;
}