body {
	color:white;
	background-color: #222;
	font-family: monospace;
	/*text-align: center;*/
	padding-top: 60px;
}

.tldr {
  border: 2px solid #00001A;
  padding: 50px;
  margin: 20px;
  font-size: 20px;
}

a {
	color:orange;
	text-decoration: none
}

a:hover {
	text-decoration: underline
}
nav ul {
  list-style-type: none;
  display: flex;
}


/* organises the nav bar */ 
nav {
  background-color: #00001A; /* obsidian */
/*  overflow: hidden;*/
  position: fixed; /* stays at the top during scrolling */
  height: 60px; /* gives control over the start of the true body */
  top: 0;
  right: 0;
  left: 0;
  display: flex; /* organises everything in a flex box */
  justify-content: center; /*horizontal position */
  align-items: center; /* vertical position */
  font-family: Arial;
  z-index: 9999; /* Makes it always in front of other content*/
}

/* Style the links inside the navigation bar */
nav a {
  float: left;
  color: #f2f2f2; /*kinda white*/
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links in the navigation bar on hover */
nav ul li a:hover {
  background-color: #ddd;
  color: black;
  text-decoration: none;
}

/* Add a color to the active/current link in navigation bar */
nav ul li a.active {
  background-color: #00308F;
  color: white;
}

.inline-headline{
	color: violet;
}

.intro-pic {
	float: right;
	width: 300px;
	margin: 10px;
}

@media screen and (max-width: 500px) {
	.intro-pic {
		float: center;
    	width: 100%; // The width is 100%, when the viewport is 600px or smaller 
		margin: 10px;
  }
}