styles.css

/*****
Step One
****/

p {
  border-bottom: 1px solid red;
}

.kermit {
	border: 10px solid green;
	border-radius: 25%;
}

#main-div-1 {
	padding: 5%;
}

/*****
Step Type
****/

#main-div-2 .kermit {
  border: 2px dotted purple;
}

h2 ~ p {
  background-color: orange;
}

/*******
Step Three
******/

#li-1 {
	font-size: 30px;
}

#li-2 {
  font-weight: bold;
}

#li-3 {
	text-transform: uppercase;

}

#mystery-ul li:nth-child(2n+1) {
	font-family: 'Mystery Quest', cursive;
}

img {
	width: 200px;
	height: auto;
}

/*******
Step Four: flex-box;
******/

#flexKermit {
  display: flex;
  flex-wrap: wrap;
}

#flexKermit > img {
  width: 30%;
}


input:valid {
  background-color: green;
}

input:invalid {
  background-color: red;
}