#controls {
	position: fixed;
	top: 2em;
	left: 0em;
	z-index: 0;
}
#usage-button {
	font-size: 1em;
	width: 1em;
	padding: 0 0.2em 0 0.2em;
	background-color: lightgreen;
	border: thin solid grey;
}

#control-buttons, 
#page-nav {
	display: none;
}

body {
	text-align: left;
}
/* Dark version */
body.dark {
	background-color: rgb(34 36 37);
	color: rgb(209 203 199);
}


header {
	margin-bottom: 4em;
	max-width: 60;
	margin: auto;
}

main {
	max-width: 60;
	margin: auto;

}
h1 {
	margin-block-start: 1.5em;
	text-align: center;
}
h1 + p {
	text-align: center;
}
h2, h3, h4 {
	font-family: sans-serif;
}
dt {
	font-size: 1em;
	font-family: sans-serif;
}
dd {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.bubble {
	font-family: serif;
	margin: 0.3em;
 	border: 1px solid black;
	padding: 0.3em;
	padding-bottom: 0.1em;
	padding-top: 0.1em;
	white-space: nowrap;
	display: inline-block;
}

.dark .bubble {
	border-color: rgb(123 107 101);
}

#build-tools .bubble {
	color: red;
}
#programming-languages .bubble,
#database-systems .bubble,
#operating-systems .bubble
{
	color: green;
}
#office-tools .bubble {
	color: blue;
}
#activities .bubble {
	color: red;
}
#disciplines .bubble {
	color: green;
}
#artifacts .bubble {
	color: blue;
}

.dark #activities .bubble {
	color: rgb(250 158 158);		
}
.dark #disciplines .bubble {
	color: rgb(158 250 158);
}
.dark #artifacts .bubble {
	color: rgb(158 158 250);			
}
.dark #build-tools .bubble {
	color: rgb(250 158 158);		
}
.dark #programming-languages .bubble,
.dark #database-systems .bubble,
.dark #operating-systems .bubble
{
	color: rgb(158 250 158);
}
.dark #office-tools .bubble {
	color: rgb(158 158 250);			
}

/** time-line **/
.timeline {
	width: 95%;
	margin: auto;
}
.timeline .today {
	color: red;
/*	font-weight: bold;*/
}

@media (min-width: 36em) {
	.timeline {
		display: flex;
	}
	.timeline .filler {
		display: none;
	}
	.tl-part {
		flex: 1;
	}
}

.tl-part {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/** Slide ***/
.slide {
	font-family: sans-serif;
	border: thin solid black;
	width: 95%;
	margin: auto;
	padding-top: 0em;
}
.slide h3 {
	text-align: center;
	margin: 0em;
	margin-top: 1em;
	margin-bottom: 0.5em;

}
.slide h4 {
	text-align: center;
	margin: 0em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;

}
.slide .bubbles {
	margin: 0;
	text-align: center; 
	line-height: 1.5em;		 
}

.dark .slide {
	border-color: rgb(123 107 101);
}


.can-mark {
	cursor: pointer;
}
.with-info {
	border-bottom: 1px dashed black;
	cursor: pointer;
}

.year.with-info {
	border: none;
}

.info-popup {
	position: fixed;
	top: 50vh;
	left: 50vw;
	transform: translate(-50%, -50%);
	margin: auto;
	z-index: 3;
	border: thin solid black;
	background: gainsboro;
}
.info-popup .popup-drag-handle {
	position: absolute;
	top: 0em;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: move;
	height: 1.5em;
	background-image: linear-gradient(saddlebrown, lightblue, lightblue, saddlebrown);
	z-index: 5;
	padding-left: 0.5em;
}
.info-popup .popup-drag-handle .popup-close-button {
	cursor: default;
	color: black;
	font-size: 0.8em;
	font-weight: bold;
	border:	1px solid gray;
	width: 1.5em;
	text-align: center;
	z-index: 6;
	padding-bottom: auto;
	padding-top: auto;
}
.info-popup .popup-drag-handle .popup-close-button:hover {
	color: white;
	background-color: steelblue;
}
.info-popup .popup-content {
	cursor: text;
	background: gainsboro;
	color: rgb(34 36 37);
	border: 5px inset whitesmoke;
	font-weight: normal;
	font-size: 1em;
	text-align: left;
	white-space: normal;
	margin-top: 1em;
	padding: 1em;
	padding-top: 2em;
	resize: vertical;
	overflow: auto;
	max-height: 75vh;
}
.info-popup .popup-content .topic {
	font-family: sans-serif;
	font-weight: bold;
}
.info-popup .popup-content .summary {
	font-family: sans-serif;
	font-style: normal;
	margin-bottom: 0.3em;
}
.info-popup .popup-content .years {
	font-family: monospace;
	font-size: 1em;
}

.info-popup .popup-content .sep {
	font-family: sans-serif;
	font-size: 0.8em;
	font-weight: bold;
}
.info-popup .popup-content .desc {
	font-family: serif;
	font-weight: normal;
	margin-left: 1em;
}

/** Projekte */
.project * {
	text-align: left;
}

.project div {
	margin-left: 0em;
}
.project .sectors::before {
	content: "Branche(n): ";
	font-size: 0.9em;
	font-weight: bold;
}
.project .activities::before {
	content: "Aktivitäten: ";
	font-size: 0.9em;
	font-weight: bold;
}
.project .artifacts::before {
	content: "Ergebnisse: ";
	font-size: 0.9em;
	font-weight: bold;
}
.project .tools::before {
	content: "Werkzeuge: ";
	font-size: 0.9em;
	font-weight: bold;
}
.project .rating::before {
	content: "Bewertung: ";
	font-size: 0.9em;
	font-weight: bold;
}
.project .rating-text::before {
	content: "Kommentar: ";
	font-size: 0.9em;
	font-weight: bold;
}

.project .places::before {
	content: "- ";
}
.project .employments::before {
	content: "/";
}

/*.project .employments::before {
	content: "(";
}
.project .employments::after {
	content: ")";
}
*/
.project .years > span::after,
.project .places > span::after,
.project .employments > span::after,
.project .sectors > span::after,
.project .activities > span::after,
.project .artifacts > span::after,
.project .tools > span::after
{
	content: ",";
}
.project .years > span:last-of-type::after,
.project .places > span:last-of-type::after,
.project .employments > span:last-of-type::after,
.project .sectors > span:last-of-type::after,
.project .activities > span:last-of-type::after,
.project .artifacts > span:last-of-type::after,
.project .tools > span:last-of-type::after
{
	content: "";
}


table,
th,
td {
	border: thin solid;
	border-collapse: collapse;
}
th, td, caption {
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: left;
}

.dark table,
.dark th,
.dark td{
	border-color: rgb(123 107 101);	
}

#employments table {
	width: 75%;
	margin: auto;
}

.is-marked {
	background-color: lightgreen;
}
.dark .is-marked {
	background-color: darkgreen;
}

details {
	margin-bottom: 1em;
}
section + details {
	margin-top: 1em;
}

details > summary {
	cursor:pointer;
	font-size: 1.2em;
	font-weight: bold;
}

details details {
	margin-left: 1em;
}

details details > summary {
	font-size: 1em;
}

details details details {
	margin-left: 2em;
}

.dark a {
	color: lightblue;
}
.dark a:visited {
	color: steelblue;
}

 
 .hidden {
	 display: none;
 }

.relation {
	display: none;
}

.picture-box {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	gap: 1em;
	position: relativ;
}

.picture-box figure {
	z-index: 1;
}
.picture-box figure.normal-size img{
	border: 1px solid gray;
	max-width: 100%;
	z-index: 1;
}
.picture-box figure.big-size {
	z-index: 10;
}

.picture-box figure.big-size img {
	border: 1px solid gray;
	max-width: 800px;
}