body {
	color: #e6e6e6;
	
	/* From here: https://projects.verou.me/css3patterns/#starry-night */

	/* Setup the starry background for the page */
	background-color:black;
	background-image:
		radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
		radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
		radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
		radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}



main {
	background: rgba(0, 0, 0, 0.5);
}


a {
	color: #EBDF64;
}

nav > a {
	text-decoration: none;
	color: #63b3ed;
}

.thoughts {
	list-style: none;
}

.thoughts li:not(:last-child) {
	border-bottom: 1px solid #EBDF64;
}

.thought-link {
	text-decoration: none;
}


.thought-link > time {
	color: #e6e6e6;
}

blockquote {
	/* Solid border on blockquotes makes them look more professional */
	border-left:  5px solid #EBDF64;
}

.border_box {
	border:  2px solid #EBDF64;
}

.audiocontainer {
	display:flex;
	justify-content:center;
	align-items:center;
}

audio {
	background-color:#F83B3A;
}


@media only screen and (max-width: 750px) {

	/* For every nav link except the first we add a seperator to the left hand side */
	nav > a:not(:first-child) {
		border-left: 1px solid #63b3ed;
	}
}

@media only screen and (min-width: 750px) {

	/* On bigger displays we turn the nav links into 'buttons' with rounded borders */
	nav > a {
		border: 1px solid #63b3ed;
		border-radius: 5px;
	}
	nav > a:hover {
		color: #e6e6e6;
		background: #63b3ed;
		
	}
}