/*Below are the body colors and div colors for the page's aesthetic*/

body {background-color: hotpink;}

div {
	background-color: pink; 
	opacity: 1;	
}

div {
	background-color: pink; 
	opacity: 1;	
}

img {
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 300px;
}

img:hover {
  box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
}

/*This code renders the five gray dots on the top of the page between the hr elements*/

.dot {
  height: 20px;
  width: 20px;
  background-color: #bbb;
  border-radius: 60%;
  display: inline-block;
}

/*These are the link controls and color-coordinations.*/

/* unvisited link */
a:link {
  color: red;
}
/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: gray;
}

/* mouse over link */
a:hover {
  color: yellow;
}

/* selected link */
a:active {
  color: red;
}

/*These are re-tooled lines of code for the colors of the p elements and the singular paragraph emphasized in red*/

p {
	color: black;
}

#pg1 {
	color: red;
}