/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */

/* Targeting an HTML tag */
h1 {
  color: black;
  background: #ddd;
  border: 1px solid #ababab;
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 10px;
}

/* Overriding inherited styles */
span {
  color: #004578;
}

/* Targeting a class name  */
.tiles {
  display: flex;
}

/* Decendant selector */
.tiles img {
  width: 100%;
}

/* Direct decendant selector */
.tiles > div {
  background: rgb(10, 10, 10);
  color: white;
  flex-basis: 100%;
  padding: 10px 20px 15px;
  margin-right: 20px;
}

/* Qualified selector */
div.links {
  background: #004578;
}

/* Style inheritance only works for unstyled elements */
a {
  color: white;
}

/* Pseudo hover selector */
a:hover {
  color: #ccc;
}

/* Sibling selectors */
a ~ a {
  display: block;
}

/* Positional Pseudo Selectors  */
.tiles > div:last-child {
  margin-right: 0;
}

/* ID and selector lists */
#contact-form label,
#contact-form input {
  display: block;
}

/* Attribute selector */
input[type='submit'] {
  margin-top: 10px;
}