/* https://www.w3schools.com/howto/howto_css_image_responsive.asp */

.responsive {
  width: 50%;
  height: auto;
}

/* https://www.w3schools.com/html/html_responsive.asp */


body {background-color: lightgreen;}


div {

	background-color: lightgreen; 

	opacity: 1;	

}


div {

	background-color: lightgreen; 

	opacity: 1;	

}


img {

  border: 1px solid #ddd;

  border-radius: 1px;

  padding: 1px;

  width: 80px;

}


img:hover {

  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}


.dot {

  height: 20px;

  width: 20px;

  background-color: #bbb;

  border-radius: 60%;

  display: inline-block;

}

/* 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;

}


.p {

  font-family: "Times New Roman", Times, serif;

}

p {
	color: black;
} 

h1 {
	color: black;
}

https://icc.instructure.com/courses/4658/pages/6-dot-3-%7C-review-these-articles-and-examples?module_item_id=285353

/* Media Queries */

/* Small phones */

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

body {background-color: green;

}

}

/* Larger phones */

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

body {background-color: yellow;

}

 

}

/* Tablets */

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

body {background-color: pink;

}

 

}

/* Desktop */

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

body {background-color: lightblue;

}

}

/* Large Monitors */

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

body {background-color: lightgreen;

}

}