/*Lägger till lite marginaler under h2 på sidan Internets tekniska utveckling.*/
h2 {
    margin-bottom: 20px;
}

article section {
    padding: 10px; /*Lite padding i sektionerna på sidan.*/
}

.internet {
    width: 25%; /*Bilden har bredden 25% av skärmen.*/
    margin: auto; /*Lägger marginalerna till auto runt översta bilden på sidan.*/
}

/*Får varannan artikel att ligga till vänster genom float: left; och 
ta upp halva sidan genom width: 50%;.*/
.left {
    width: 50%;
    float: left;
}

/*Får varannan artikel att ligga till höger genom float: right; och
ta upp havla sidan genom width: 50%;. Lägger även till lite marginaler 
under för att skapa utrymme mellan artiklarna.*/
.right {
    width: 50%;
    float: right;
    margin-bottom: 30px;
}

/*Styling för bild i faktatexten, gör att bilden har bredden 100% av sektionen den finns i.*/
.världen {
    width: 100%; 
}

/*Styling för bild i faktatexten, gör att bilden har bredden 58% av sektionen den finns i.*/
.wikipedia {
    width: 58%;
}

/*Styling för bild i faktatexten, gör att bilden har bredden 39% av sektionen den finns i.*/
.skype {
    width: 39%;
}

/*Styling för bild i faktatexten, gör att bilden har bredden 45% av sektionen den finns i.*/
.sociala-medier {
    width: 45%;
}

/*Styling för bild i faktatexten, gör att bilden har bredden 49% av sektionen den finns i.*/
.spotify {
    width: 49%;
}

/*Styling för bild i faktatexten, gör att bilden har bredden 80% av sektionen den finns i.*/
.coronavirus {
    width: 80%;
}

.analys {
    padding: 30px;/*Lite padding i analys delen.*/
}

/*Responsivitet för mindra skärmar. Gör så att sektionerna hamnar under 
varandra istället för varannan till vänster och varannan till höger.*/
@media screen and (max-width: 768px) {
    .right {
        float: left;
    }
    
    .left, .right {
        width: 100%;
    }
}