header{
	background-color: transparent;
}

nav,article,aside,section{
	background-color:transparent;
}

header,footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

/* header {
	position: fixed;
	z-index: 1000;
} */

header h1 {
    padding: 0;
    margin: 0;
	font-size: 2.4em;
	text-shadow: 1px 2px 2px rgba(51, 51, 51, 1);
}

.topnav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.topnav li {
	margin: 0 20px 0 0;
}

article,aside{
	float:left;margin:0 0 1.5em 0;
}

article {
	width:60%;
}

aside {
	width:28%;margin-left:1em;
}

section {
	margin: 0;
	padding: 0;
}

footer {
	clear:both;
}

.identifier {
	background-color:#C5256B;
	font-style:italic;
}

/* Box Shadows */
.box-shadow{
	box-shadow:0 0 18px rgba(0,0,0,0.3);
}
.inner-box-shadow{
	box-shadow:inset 0 0 64px rgba(0,0,0,0.1);
}

/* Container for flexboxes */
.flex-container{
	display: flex;
	flex-flow:row wrap;
	justify-content:flex-start;
}

a {
	background:rgba(107,19,107,1);
	color:#f7f7f7;
}

a:hover{
	background:#f7f7f7;
	color:rgba(107,19,107,1);
}


/* // Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } */



/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
	.article--flex-item,.aside--flex-item {
		width: 50%;
	}
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.topnav a {
		width: 100%;
		padding: 0.5em 0.5em;
		margin:0 0 0.25em 0;
	}
  
	.article--flex-item,.aside--flex-item {
		width: 100%;
	}
  
	#main--flex-container {
		flex-flow: column wrap;
	}
  
	aside {
		margin:0;
	}
}