body {
  background-image: url("assets/dots.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  padding-top: 671px;

background-size:auto;
}

section {
  background: #fff;
  padding-top:15px; 
}
.navigate{
	background-color: gray
}
header h1, header h2 {
	color: #fff;
	margin: 0;
	padding: 0;
}

article {
  margin: auto;
  width: 75%;
  font-family: Arial;
  font-size: 24px;
  color: #666;
  line-height: 1.5em;
  /* Needed to position the header
  relative to this parent element */
  position: relative; }

header{
	/* Changes the postioning of this element */
	position: absolute;
	
	/* Moves the element up on top of the image */
	top: -500px;
	left: 0;
	
	/* Need to set the width, otherwise the element
	shrink wraps around the content */
	width: 100%;
	background: rgba(0,0,0,0.5);
	padding: 20px;
	
	/* Needed to include the padding as part of
	the width of the element */
	box-sizing: border-box;
	
}
footer {
  background: #333;
  padding: 50px 0;
  text-align: center;
  font-family: Arial;
  color: #fff; }

footer a {
  color: #FFADF2;
  font-weight: bold;
  text-decoration: none; }

.navbar{
	box-sizing: border-box;
	list-style:none;
	background-color:turquoise;
	font-size: 25px;
	text-decoration: none;
	}
#navigation{
	
}
a{
text-decoration: none;
}

/******a:links styles******/
a:link{
	display:block;
	text-transform:uppercase;
	text-decoration: none;
	font-size:24px;
	padding:10px;
}

a:link, a:visited {
	color:black;
}
a:hover, a:active {
	color:#D81414;

}
img {
  border: thick groove #e0585a;
  border-radius: 40px;
  align-self: center;
  width: 500px;
  margin: auto;
  display: block; }
.lorem{
	margin-bottom: 45px;
}

/************ Responsive Media Queries ***************/
@media only screen and (min-width: 600px){
	body{padding-top: 671px;
		background-size:auto;
	}
	img {
		align-self: center;
		align-items: center;
	}
}

@media only screen and (min-width: 970px) {
  img {
  border: thick groove #e0585a;
  border-radius: 40px;
  align-self: center;
  width: 500px;
  margin: auto;
  display: block;
	}
	.lorem{
	margin-bottom: 45px;
}
	header{
	/* Changes the postioning of this element */
	position: absolute;
	
	/* Moves the element up on top of the image */
	top:-700px;
	left: 0;
	}
}