/* Yhteinen tyylitiedosto kaikille mallidokumenteille.
   ===================================================

   Sama tiedosto muotoilee sekä HTML- että XML-dokumentit. Huomaa, että
   HTML-osassa riittää antaa värit ja fontit, koska selaimella on
   HTML-elementeille oletusulkoasu. XML-osassa on kerrottava kaikki
   itse, myös display-ominaisuus. */

/* ---------- 1. HTML- ja XHTML-dokumentit ---------- */

body {
  max-width: 42em;
  margin: 1em auto;
  padding: 0 1em;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #23201c;
  background-color: #fbf7f0;
}

h1 {
  font-size: 1.9em;
  color: #7a3b12;
  border-bottom: 2px solid #7a3b12;
}

p {
  margin: 1em 0;
}

strong {
  color: #b3261e;
}

/* Kaskadi ja spesifisyys: kolme sääntöä osuu samaan kappaleeseen.
   Kokeile vaihtaa sääntöjen järjestystä ja katso, mikä muuttuu.

   p          spesifisyys 0, 0, 1
   .esim      spesifisyys 0, 1, 0   voittaa p-säännön
   #uniikki   spesifisyys 1, 0, 0   voittaa molemmat */

.esim {
  background-color: #ffe9a8;
  padding: 0.6em;
  border-left: 5px solid #e8b45c;
}

#uniikki {
  background-color: #e6f2eb;
  border-left-color: #1f5c46;
}

/* ---------- 2. XML-dokumentit ---------- */

/* XML-dokumentilla ei ole oletusulkoasua, joten jokaiselle elementille
   on kerrottava ainakin display-ominaisuus. Ilman sitä kaikki esitetään
   tekstitason elementteinä yhtenä pötkönä. */

dokumentti {
  display: block;
  max-width: 42em;
  margin: 1em auto;
  padding: 0 1em;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #23201c;
  background-color: #fbf7f0;
}

otsikko {
  display: block;
  font-size: 1.9em;
  font-weight: bold;
  color: #7a3b12;
  border-bottom: 2px solid #7a3b12;
  margin-bottom: 0.5em;
}

kappale {
  display: block;
  margin: 1em 0;
}

korostus {
  color: #b3261e;
  font-weight: bold;
}

/* Attribuuttivalitsin toimii XML:ssä samoin kuin HTML:ssä. */
kappale[laji="esimerkki"] {
  background-color: #ffe9a8;
  padding: 0.6em;
  border-left: 5px solid #e8b45c;
}