/* Yleinen huomio mitoista: Melkein joka paikassa käytetään yksikköä "em". Tämä on 
typografian yksikkö, joka tarkoittaa jotakuinkin yhden pienen m-kirjaimen leveyttä. 

Eli käytännössä marginaalit jne. on määritelty suhteessa sivun fonttiin, mikä on
yleensä se sitä tekstipainotteisella sivulla halutaan. Fontin kokoa ei ole
määritelty, vaan käytetään selaimen oletusfonttia, jonka käyttäjä voi määrittää. */

body {
   width: 40em;
   margin: auto;
   font-family: Georgia, serif;
   color: black;
   background-color: #E0E0E0;
   margin-top: 1.2em;
   margin-bottom: 0.5em;
   line-height: 1.4;
}

/* <header> on määritelty siten, että sen sisällä olevat elementit ladotaan sivusuunnassa
vasemmalta oikealle. Jos elementit ovat keskenään erikorkuisia, ne tasataan ylälaitaan. */ 

header {
   margin-left: 1.0em;
   display: flex;
   align-items: flex-start;
   column-gap: 4em;
}

header p {
   margin-top: 1.2em;
   margin-bottom: 0;
}

header p.titles {
   font-size: 1.05em;
   color: #903;
}

header img.flag {
   margin-right: 0.3em;
}

nav {
   margin-top: 2.5em;
   border-bottom: 1px solid #903;
}

nav a {
   font-size: 1.2em;
   font-weight: bold;
   margin-right: 0.3em;
   text-decoration: none;
   color: #903;
}

/* Tämä muuttaa niiden linkkien värin joilla EI ole luokkaa "active"

Eli laita kullakin sivulla class="active" sille <a>-elementille, joka on aktiivinen. */

nav a:not(.active) {
   color: #a67e8b;
}

h1 {
   margin-top: 0;
   font-size: 1.5em;
   font-weight: normal;
   color: #903;
}

h2 {
   margin-top: 1.7em;
   margin-bottom: 1em;
   font-size: 1.0em;
   font-weight: bold;
   color: #903;
}

main {
   margin-top: 1.3em;
}

main p {
   margin-left: 1.0em;
}

/* Nämä tekevät kuvasta "kelluvan", eli teksti jatkuu asettuu sen ympärille.

Laita kuvalle class="floatLeft" tai class="floatRight" riippuen siitä, haluatko
kuvan oikealle vai vasemmalle. */

img.floatLeft {
   float: left;
   margin-right: 1.5em;
   margin-bottom: 0.5em;
}

img.floatRight {
   float: right;
   margin-left: 1.5em;
   margin-bottom: 0.5em;
}

footer {
   margin-top: 3em;
   border-top: 1px solid grey;
   padding-top: 0.5em;
   font-size: 0.8em;
   font-style: italic;
}