/*
 * Super basic link style
 */
a { color: blue }
a:hover { background: yellow }


/*
 * Let's combine some style to add slightly different
 * behaviors to two classes:
 */
.btn1, .btn2 {
  padding: 5px;
  border: 1px solid #336699;
  background: #88aadd;
  color: #fff;
  
  /* let's make stuff spicy! */
  /* ... but try to comment this and see what happens */
  transition: all 350ms ease;
}

.btn1:hover { background: #336699 }
.btn2:hover { border-radius: 20px }


/*
 * Lists are perfect candidates for this kind of
 * dynamic effects:
 */

#myList {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  font-family: sans-serif;
}

#myList li {
  border-bottom: 1px solid #ddd;
  padding: 5px 10px;
  transition: all 350ms ease;
}

#myList li:last-child {
  border-bottom: none;
}

#myList li:hover {
  background: #eee;
  padding-left: 20px;
}


/*
 * Inputs have many different pseudo classes
 * and pseudo elements!
 */
.inp1 {
  display: block;
  margin: 20px 0;
  padding: 5px 10px;
  outline: none;
  border: 1px solid #ddd;
}
.inp1::placeholder {
  font-style: italic;
}

.inp1:hover, .inp:focus {
  border-color: #336699;
}

.inp1:focus {
  background: #88aadd;
  color: #fff; 
}

.inp1:focus::placeholder {
  color: yellow;
}