*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*Settings for large screens over 1000px in width*/
@media screen and (min-width: 1000px)
{
	body
		{
			background-color: gray;
			color: black;
			font-family: arial, sans-serif;
			font-size: 1.5vw;
			text-align: justify;
			background: url(pictures/bg.png);
			background-size: cover;
			background-attachment: fixed;
		}
		
	header
	{
		background-color: rgb(0, 0, 0, 0.9);
		padding: 1%;
		margin: 1%;
		border-radius: 20px;
		color: orange;
		/*background: url(pictures/header-bg.png);*/
		background-size: cover;
	}
	
	aside
	{
		position: relative;
		width: 20%;
		float: left;
		background-color: rgb(255, 165, 0, 0.9);
		color: black;
		text-align: left;
		padding: 1% 1% 1% 1%;
		margin: 1% 1% 1% 1%;
		border-radius: 20px;
	}
	
	main
	{
		position: relative;
		width:78%;
		float: right;
	}

}

/*Reduced screen elements and increased text size for small displays*/
@media screen and (max-width: 1000px)
{
	body
	{
		background-color: gray;
		color: black;
		font-family: arial, sans-serif;
		font-size: 12pt;
		text-align: justify;
		background: url(pictures/bg.png);
		background-size: cover;
		background-attachment: fixed;
	}
	
	header
	{
		background-color: rgb(0, 0, 0, 0.9);
		padding: 1%;
		margin: 1%;
		border-radius: 20px;
		color: orange;
		/*background: url(pictures/header-bg.png);*/
		background-size: cover;
	}
	
	aside
	{
		display: none;
	}
}

main#full-width
{
	position: relative;
	width: 100%;
	padding: 0%;
	margin-left: 0%;
	margin-right: 0%;
}

article, section
{
	background-color: rgb(255, 165, 0, 0.9);
	padding: 1%;
	margin: 1%;
	border-radius: 20px;
	margin-bottom: 2%;
}

article#blog
{
	background-color: rgb(0, 0, 0, 0.9);
	color: orange;
}

blockquote
{
	background-color: rgb(0, 0, 0, 1);
	font-family: monospace;
	color: white;
	padding: 1%;
	margin: 1%;
	border-radius: 20px;
}

.audio-flex
{
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

.centre
{
	text-align:center;
}

.chatcontainer
{
	width:100%;
}
	
.chat-left 
{
	clear: both;
	float: left;
	text-indent: 0px;
	width: 55%;
	margin: 1% 1% 1% 1%;
	padding: 1%;
	color: black;
	background-color: rgb(255, 165, 0, 0.9);
	border-radius: 20px;
}

.chat-right 
{
	clear: both;
	float: right;
	text-indent: 0px;
	width: 55%;
	margin: 1% 1% 1% 1%;
	padding: 1%;
	background-color: rgb(48, 48, 48, 0.9);
	border-radius: 20px;
}

.chat-me
{
	clear:both;
	text-indent: 0px;
	width: 100%;
	margin: 1% 1% 1% 1%;
	padding: 1%;
	color: rgb(128, 128, 128);
	background-color: rgb(0, 0, 0, 0.9);
	border-radius: 20px;
}

/* used in blog update 211113*/
.flex
{
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

code
{
	color:white;
}

dl
{
	text-indent: 1em;
	margin: 1% 1% 1% 1%;	
}

dt
{
	text-indent: 2em;
	margin: 1% 1% 1% 1%;
	font-style: italic;
}

dd
{
	text-indent: 3em;
	margin: 1% 1% 3% 1%;
}

.flex-item
{
	background-color: rgb(255, 165, 0, 0.9);
	margin: 1%;
	border-radius: 20px;
	width: min-content;
	height: max-content;
	font-size: 1em;
	text-align: left;
}

/*used in blog update 211113*/
.flex-item-img
{
	background-color: rgb(0, 0, 0, 0);
	margin: 1%;
	border-radius: 20px;
	width: min-content;
	height: max-content;
	font-size: 1em;
	text-align: left;
}


.flex-item-lyrics
{
	background-color: rgb(255, 165, 0, 0.9);
	margin: 1%;
	border-radius: 20px;
	width: max-content;
	height: max-content;
	font-size: 1em;
	text-align: left;
	/*flex: 1 0 25%;*/
	flex: 1 1 25%;
}

/* 13/01/2020 Still not sure whether flex-item-lyrics is working properly or if flex-item-variable-width is working/even needed. */

.flex-item-variable-width
{
	background-color: rgb(255, 165, 0, 0.9);
	margin: 1%;
	border-radius: 20px;
	font-size: 1em;
	flex: 1 0 25%;
}

date
{
	font-size: 1.2vw;
}

.floatright 
{
	float: right;
	width: 30%;
	margin: 0 0 1% 1%;
	padding: 1%;
	background-color: rgb(24, 24, 24, 0.9);
	border-radius: 20px;
}

figcaption
{
	font-size: 1.25vw;
	font-style: italic;
	text-align: center;
	margin: 0 0 1% 0%;
}

footer
{
	clear: both;
	color: orange;
	background-color: rgb(255, 165, 0, 0.9);
	margin: 1%;
	padding: 1%;
	border-radius: 20px;
	text-align: center;
}

h1
{
	font-family: impact, sans-serif;
	font-size: 3vw;
	letter-spacing: 0.25vw;
	text-align: center;
	margin-top: 3vw;
	margin-bottom: 3vw;
}

#left-header
{
	margin: 0;
	text-align: left;
}

h2
{
	font-family: impact, sans-serif;
	font-size: 2.5vw;
	letter-spacing: 0.25vw;
	text-align: center;
	margin-top: 2.5vw;
	margin-bottom: 2.5vw;
}

h3
{
	font-family: impact, sans-serif;
	font-size: 2vw;
	letter-spacing: 0.25vw;
	text-align: center;
	margin-top: 2vw;
	margin-bottom: 2vw;
}

h4, h5, h6
{
	font-family: impact, sans-serif;
}

hr
{
	border-top: none; 
	border-bottom: 2px dotted;
}

li
{
	padding-bottom: 1em;
}

p
{
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 1.4;
}

a:link
{
	color: orange;
	background-color: black;
	border-radius: 7.5px;
	padding: 0.1em;
}

a:visited
{
	color: rgb(160, 104, 0);
}

a:hover
{
	color:white;
}

#big-link
{
	padding: 1%;
	margin: 1%;
	border-radius: 20px;
}

#blog-menu p
{
	padding: 1%;
	margin: 1%;
}

img 
{
	background-color: rgb(0, 0, 0, 1);
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;

}

a:empty
{
	color: orange;
	background-color: blue;
	border-radius: initial;
	padding: initial;
}


ul
{
	margin: 1em;
}

.drop-cap
{
	 float: left;
	 font-size: 300%;
	 line-height: 1em;
	 margin-right: 0.1em;
	 margin-bottom:-0.25em;
}

.date
{
	font-family: impact, sans-serif;
	letter-spacing: 0.25vw;
}

table
{
	border-spacing: 0.3em;
}