@charset "UTF-8";

/* ------ Grundstilen för sidorna ----- */

html {
    font-size: 16px; /* "Rotens font", den storlek som gäller för 1rem */
}

body {
    background-color: #eeeadd;
    color: #000000;
    max-width: 800px; /* Sidorna begränsas till max 800 pixlar ... */
    margin: 0 auto; /* ... och centreras. */
                    /* Övre/undre marginal är 0 och vänster/höger marginal bestäms lika av webbläsaren. */
    padding: 8px; /* Inre marginal är 8px runtom */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* ------ Stil för navigeringen ----- */

nav {
    font-size: 1.5rem;
    text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline; /* Länkarna på en rad */
    margin: 2px;
}

nav a {
    background-color: #e9caa8;
    color: #000000;
    text-decoration: none;
    display: inline-block; /* Används för att kunna sätta en bredd med width */
    padding: 4px;
    width: 150px;
}

nav a:hover {
    background-color: #783c08;
    color: #eeeadd;
}

nav a.thisPage {
    background-color: #deaa5e;
}

/* ------ Stil för sidhuvudet ----- */

header {
    text-align: center;
}

header h2 {
    font-family: cursive;
}

#frontPageHeader { /* Används endast på den första sidan i index.html */
    background-image: url(../img/clouds.jpg);
    background-size: cover;
    background-position: bottom;
    height: 220px;
}

/* ------ Stil för sidans huvudinnehåll ----- */

main ul {
    list-style-type: square;
}

main a:link,
main a:visited {
    color: #000000;
}

main a:hover,
main a:active {
    color: #ab5c18;
}

h1,
h2,
h3 { /* Gäller alla rubriker, både dem i header och main */
    color: crimson;
}

img { /* Flexibel storlek på bilderna, om fönstret är smalare än bilden */
    max-width: 100%;
}

#map {
    width: 220px;
}

.collage {
    text-align: center;
}

.collage img {
    max-height: 250px; /* Alla bilder i kollaget blir lika höga */
}

/* ------ Stil för sidfoten ----- */

footer {
    border-top: 1px solid black; /* Övre kantlinje i sidfoten */
    margin-top: 20px;
    padding: 10px;
    font-style: italic;
    font-size: 0.8rem;
}