@charset "UTF-8";

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

html {
    font-size: 16px;
}

html, body {
    height: 100%;
    /* Ser till att hela fönstrets höjd utnyttjas i layoutens grid, på sidor med lite innehåll. */
}

/* Ta bort inbyggda marginaler och ändra box-sizing
    för de element som används i layouten. */
html, body, nav, header, main, article, aside, footer, section, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #eeeadd;
    color: #000000;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    /* Skapa en layout med tre kolumner plus marginaler. */
    display: grid;
    grid-template-columns: auto 150px minmax(auto,850px) 200px auto;
    grid-template-rows: min-content auto min-content;
    grid-template-areas:
        "header header header header header"
        ".      nav    main   aside  ."
        "footer footer footer footer footer";
    gap: 1em;
}

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

nav {
    grid-area: nav;
    font-size: 0.8rem;
}

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

nav li {
    margin-top: 1em;
}

nav a {
    background-color: #e9caa8;
    color: #000000;
    text-decoration: none;
    display: block; /* Fyller hela den tillgängliga bredden */
    padding: 4px;
}

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

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

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

header {
    grid-area: header;
    text-align: center;
}

header h1,
header h2 {
    margin: 0.1em 0 0 0;
    /* Övre marginal är 0.1em, övriga är 0 */
}

#frontPageHeader {
    background-image: url(../img/clouds.jpg);
    background-size: cover;
    background-position: bottom;
    height: 220px;
}

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

main {
    grid-area: main;
    padding: 10px;
}

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 {
    color: crimson;
}

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

#map {
    width: 220px;
}

.collage {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Tre lika breda kolumner */
    grid-template-rows: auto; /* Antal rader och deras höjd anpassas efter innehåll */
    grid-template-areas:
        "img1 img2 img3"
        "img4 img4 img3";
    gap: 20px;
}

.collage img:nth-of-type(1) { /* Första img-taggen */
    grid-area: img1;
}
.collage img:nth-of-type(2) { /* Andra img-taggen */
   grid-area: img2;
}
.collage img:nth-of-type(3) { /* Tredje img-taggen */
   grid-area: img3;
}
.collage img:nth-of-type(4) { /* Fjärde img-taggen */
   grid-area: img4;
}
.collage img {
    /* Bilden fyller ut hela rutan */
    width: 100%;
    height: 100%;
    /* Rundade hörn och skugga på bilderna i kollaget */
    border-radius: 15px;
    box-shadow: 8px 8px 12px #999999;
}

/* ------ Stil för sidospalten ----- */

aside {
    grid-area: aside;
}

aside section {
    font-size: 0.7rem;
    border: 1px solid #666666;
    border-radius: 15px;
    padding: 10px;
    margin: 15px;
    background-color: #dfd9c4;
}

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

footer {
    grid-area: footer;
    border-top: 1px solid black;
    margin-top: 20px;
    padding: 10px;
    font-style: italic;
    font-size: 0.8rem;
}

/* ------ Media queries ----- */

@media screen and (max-width:900px) {
    body {
        /* Ändra layouten till två kolumner */
        /* Navigeringen flyttas upp till sidans topp */
        grid-template-columns: auto 200px;
        grid-template-rows: min-content min-content auto min-content;
        grid-template-areas:
            "nav    nav"
            "header header"
            "main   aside"
            "footer footer";
        gap: 0;
    }
    nav {
        font-size: 1.2rem;
        text-align: center;
    }
    nav li {
        display: inline; /* Länkarna på en rad */
    }
    nav a {
        display: inline-block;
        width: 120px;
    }
}

@media screen and (max-width:720px) {
    body {
        /* Ändra layouten till en kolumn */
        /* aside flyttas ner under main */
        grid-template-columns: auto;
        grid-template-rows: min-content min-content auto min-content min-content;
        grid-template-areas:
            "nav"
            "header"
            "main"
            "aside"
            "footer";
    }
}

@media screen and (max-width:600px) {
    /* Minska avståndet mellan bilderna i kollaget och gör skuggan lite mindre */
    .collage {
        gap: 8px;
    }
    .collage img {
        box-shadow: 4px 4px 6px #999999;
    }
}