/*Här är stilar för hela webbsidan*/

/*Tar bort alla marginaler, all padding och alla borders.*/
* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    text-align: center; /*Centrerar all text i body på alla sidor*/
    line-height: 1.5em; /*Ställer in radavståndet på texten på alla sidor*/
}

/*Lägger till lite marginaler till vänster och höger på main*/
main {
    margin: 0 50px 0 50px;
}

/*Lägger till lite padding runt alla paragrafer*/
p {
    padding: 10px;
}

/*Lägger till bakgrundsbild för startsidan och kontaktsidan och får den att täcka hela sidan*/
.hero-image {
    background-image: url(images/keyboard-70506_1280.jpg);
    background-size: cover;
}

/*Lägger till en bakgrundsbild för resterande sidor och får den att täcka hela sidan*/
.background-image {
    background-image: url(images/background-213649_1280.jpg);
    background-size: 100%;
}

/*Lägger till padding runt headern/rubriken överst på sidan*/
.header {
    padding: 15px;
}

/*Stilar artiklarna så att dem lägger sig under varandra genom flex-direction: row;.
Lägger till lite marginaler och padding. Rundar hörnen med border-radius.
Lägger till en mörkblå färg på dem.*/
article {
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    background-color: rgb(2, 81, 160);
}

/*Här gör jag så att sektionerna hamnar bredvid varandra i artiklarna genom
flex-direction: column;. Lägger till lite marginaler så att det blir som en ram 
runt sektionerna genom att artiklarna bakom blir lite större. Rundar även hörnen här
med border-radius och lägger till en ljusblå färg som bakgrund*/
article section {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 50px;
    margin: 5px;
    border-radius: 10px;
    background-color: rgb(231, 240, 250);
}

/*Härn stilar jag menyn och ger den två olika blå färger som bakgrund som mjukt övergår till varandra*/
.topnav {
    display: flex;
    background: linear-gradient(to right, rgb(2, 81, 160), rgb(149, 202, 255)); /* Färgen bakom menyn.*/
    overflow: hidden;
}

.topnav a {
    float: left; /*Får menyn att starta från vänster.*/
    color: black; /*Färgen på texten i menyn.*/
    text-align: center;
    padding: 14px 16px; /* Storleken på menyns bakgrund.*/
    text-decoration: none;/*Tar bort understreck på texten.*/
    font-size: 17px; /* Textens storlek i menyn.*/
}

/*Stilar för när man hovrar över länkarna i menyn.*/
.topnav a:hover {
    color: white; /*Ändrar textens färg.*/
}

/*Här nedan bestäms hur det aktuella menyvalet ser ut.*/
.topnav a.active {
    text-decoration: underline; /*Texdekoration med underlinje för den aktuella sidan i menyn.*/
    color: white; /*Färgen på texten för den aktuella sidan i menyn.*/
}

/*Stilar för footern. lägger till lite marginal ovanför footern så att den inte ligger 
så nära innehållet på sidan. Får den att täcka hela vidden av sidan och får den att ligga 
så långt ned och så långt till vänster på sidan som möjligt.*/
footer {
    margin-top: 60px;
    position: static;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*Lägger till bakgrundsfärg på footern och ger den lite padding och inga marginaler.*/
.container {
    background-color: rgb(2, 81, 160);
    padding: 20px;
    margin: 0;
}

footer a, footer h4 {
    text-decoration: none; /*Tar bort text-decoration för att slippa linjer under texten på länkarna.*/
    color: white; /*Färgen på texten i footern.*/
    margin: 10px; /*Lite marginaler runt länkarna och headern.*/
}

footer a:hover {
    text-decoration: underline; /*Ger länkarna i footern underlinje vid hovring*/
}

/*Här tar jag bort padding och bottenmarginaler för paragraferna för mina refesenser för 
att dem inte ska ta lika mycket plats.*/
.referenser p {
    padding: 0;
    margin-bottom: 0;
}

/*Här nedan kommer responsiviteten för webbsidan.*/

/*För mindre skärmar lägger sig menyn från toppen till botten istället för från 
vänster till höger för att lättare se och kunna trycka på länkarna. Byter även så 
att bakgrundsfärgen går från toppen till botten istället för från vänster till höger.
Får även artiklarna att lägga sig lodrätt istället för horisontellt. Länkarna i footern 
hamnar här under varandra istället för bredvid varandra.*/
@media screen and (max-width: 768px) {
    .topnav {
        flex-direction: column;
        background: linear-gradient(to bottom, rgb(2, 81, 160), rgb(149, 202, 255)); 
    }

    article {
        flex-direction: column;
    }

    article section {
        width: auto;
    }

    footer .genvägar {
        display: flex;
        flex-direction: column;
    }
    
    footer a {
        margin: 0;
    }
}

/*För skärmar men en max bredd på 992px.*/
@media screen and (max-width: 992px) {

    footer {
        margin-top: 190px;
    }

    footer .genvägar {
        display: flex;
        flex-direction: column;
    }

    footer a {
        margin: 0;
    }
}

/*För större skärmar ger jag texten en större storlek och ändrar vissa 
marginaler och padding.*/
@media screen and (min-width: 1200px) {
    .topnav a {
        font-size: 20px;
        padding: 20px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 26px;
    }

    h4 {
        font-size: 22px;
        margin-bottom: 50px;
    }

    p {
        font-size: 18px;
        line-height: 1.5em;
    }

    a {
        font-size: 18px;
    }

    footer a {
        font-size: 18px;
    }
}