/*Body som selektor*/
body{
    /*Sätter bakgrundsfärg för allt inom body*/
    background-color: #1F1F22;
    /*Ändrar typsnitt*/
    font-family: sans-serif;
    /*Ändrar färg på texten*/
    color: white;
    /*Sätter bredden till 90%, använder % för att göra sidan mer responsiv*/
    width: 90%;
    /*Sätter margin till auto för att centrera innehållet*/
    margin: auto;
}
/*Centrerar rubriker h1 och ger dem textstorlek 3rem, använder rem för att göra sidan mer responsiv*/
h1{
    text-align: center;
    font-size: 3rem;
}
/*Gäller main elementen */
main{
    /*Lägger till padding i slutet av main elementet för att få mellanrum mellan slutet av innehållet 
    och linjen i slutet av elementet*/
    padding-bottom: 2%;
    /*lägger till en linje i slutet av elementet som är en pixel, hel linje och vit*/
    border-bottom: 1px solid white;
}
/*Centrerar texten i footer elementet och h2 element*/
footer, h2{
    text-align: center;
}



/*HEADER, NAV OCH MENYN*/
/*Gör elementen i header till flex så de hamnar på rad och skapar en vit linje i slutet av headern*/
header{
    display: flex;
    border-bottom: 1px solid white; 
}
/*Gör elementen i nav elementet till flex, centrerar och sätter bredd för nav elementet*/
nav{
    display: flex;
    align-items: center;
    width: 100%;
}
/*Gör så att onumrerade listor (menyn), som är child-element till nav, till flex så de hamnar på rad 
och gör så de placeras ut (space-between)*/
nav> ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
/*Gör att alla element i meny klassen har textstorlek 2rem, tar bort punkten i punktlistelementen*/
.meny{
    list-style-type: none;
    font-size: 2rem;
}
/*Gör att texten mellan a taggarna, som är child element till klassen meny, får vit färg och tar bort understrecket*/
.meny > a{
    color: white;
    text-decoration: none;
}
/*Gör så att bakgrunden och textfärgen ändras när muspekaren är över a element som är barnelement till element med i klass meny*/
.meny > a:hover{
    background-color: grey;

}
.alogo:hover{
    background-color: grey;
}



/*FAQ SIDAN*/
/*Gäller element med i klass question*/
.question{
    font-size: 2rem;
}



/*REGLER SIDAN*/
/*Gör så att paragraferna som är med i klassen reglerna får textstorlek 1.5 rem och att texten centreras*/
p.reglerna{
    font-size: 1.5rem;
    text-align: center;
}
/*Gör så att onumrerade listor med class reglerna vänsterjusteras samt lägger till padding höger och vänster för att få lite mellanrum*/
ul.reglerna{
    text-align: left;
    padding-left: 10%;
    padding-right: 10%;
}
/*Ändrar textstorlek, sätter list style type till disc och ger marginal 2%*/
li.reglerna{
    font-size: 2rem;
    list-style-type: disc;
    margin: 2%;
}



/*NYHETER OCH EVENT SIDORNA*/
/*Gör elementen inom sections och klassen nyheter till flex items
och att de flyttar ned till nästa rad om de inte får plats (wrap)*/
section, .nyheter{
    display: flex;
    flex-wrap: wrap;
}
/*Sätter bredd, marginal för att få mellanrum mellan artiklarna, padding för att få mellanrum mellan innehållet i artiklarna och ramen runt, 
centrerar texten och ger en border runt artiklarna*/
section > article, .nyheter> article{
    width: 30%;
    margin: 1% auto;
    padding: 1%;
    border: 1px solid white;
    text-align: center;
}
/*Vänsterjusterar texten i onumrerade listor som är inom artiklar som är barnelement till sectioner*/
section > article ul{
    text-align: left;
}

/*Gör så att rubriken tar upp 100% av bredden av flex containern så att rubriken hamnar på egen rad*/
.eventrubrik{
    flex-basis: 100%;
}
/*Lägger till en linje under rubriken som tar upp 50% av bredden av fönsterstorleken samt centrerar den och texten
och lägger till padding för att få lite luft mellan de olika elementen*/
#eventrubrik{
    border-bottom: 1px solid white;
    width: 50%;
    margin: auto;
    text-align: center;
    padding: 2%;
}
/*Gör så att max-bredden på bilden är 80% och lägger till padding*/
#diamondimg{
    max-width: 80%;
    padding: 5.5%;
}
/*Ställer in maxbredden på bilderna så de passar in*/
.bilder{
    max-width: 100%;  
}



/*OM OSS SIDAN*/
/*Ändrar bredd till 70% för att texten inte ska gå över hela sidan och centrerar innehållet på alla element i class omosstext*/
.omosstext{
    width: 70%;
    text-align: center;
    margin: 0 auto;
}



/*INDEX SIDAN*/
/*Gör så att bilden på indexsidan bredd är 100% så den är över hela sidan och lägger till marginal högst uppe för att få lite mellanrum*/
.indexbild{
    margin-top: 2%;
    width: 100%;
}
/*Ändrar textstorleken på texten på index sidan, gäller elementet med id introtext*/
#introtext{
    font-size: 1.5rem;
}


/*KONTAKTA OSS SIDAN*/
/*Lägger till padding för att flytta ner linjen till slutet av sidan*/
.kontaktaoss{
    padding-bottom: 30%;
    text-align: center;
}
/*Lägger till marginaler för rubriken för att få mellanrum*/
.kontaktaoss > h1{
    margin-top: 2%;
    margin-bottom: 5%;
}


/*GÖR ATT WEBBPLATSEN ÄNDRAS BEROENDE PÅ SKÄRMSTORLEK*/
/*Gäller för max bredd 1450px*/
@media screen and (max-width: 1450px){
    /*Gör så att textstorleken för menyn är 1.5 rem för att det ska finnas mellanrum mellan meny alternativen*/
    .meny{
        font-size: 1.5rem;
    }
}

/*Maxbredd 1279px*/
@media screen and (max-width: 1279px){
    /*Gör så att padding är 0% för menyn*/
    nav{
        padding-left: 0%;
    }
    /*Gör så att listelementen sprids ut*/
    nav >ul{
        justify-content: space-between;
    }
    /*Ändrar textstorlek och marginal för element i klassen meny*/
    .meny{
        font-size: 1rem;
        margin: 1%;
    }
    /*Sätter loggans bredd till 100%*/
    #logga{
        width: 100%;
        height: auto;
    }
    /*Ändrar textstorlek för list elementen med klassen reglerna*/
    li.reglerna{
        font-size: 1.5rem;
    }
    /*Sätter bredd, marginal och padding på artiklar (som är barnelement till section eller klassen nyheter)*/
    section > article, .nyheter > article{
        width: 45%;
        margin: 2% auto;
        padding: 2%;
    }
    /*Lägger till marginaler vänster, uppe och nere för listor (inom artiklar som är barnelement till sektionelement)*/
    section > article ul{
        margin-left: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
}

/*För skärmar som är 768px eller mindre*/
@media screen and (max-width: 768px) {
    /*Ändrar padding och marginaler på alla element*/
    *{
        margin: 0;
        padding: 0%;
    }
    /*Centrerar innehåll för alla element inom body*/
    body{
        justify-content: center;
    }
    /*Ändrar flex-direction så att elementen i header är i kolumner*/
    header{
        flex-direction: column;
        width: 100%;
    }
    /**/
    nav{
        width: 100%;
        margin: 0 auto;
    }
    /*Gäller ul som är barnelement till nav element*/
    nav > ul{
        width: 100%;
        /*Gör listelementen i kolumner för att menyn ska få plats utan att texten blir för liten*/
        flex-direction: column;
    }
    /*ändrar textstorleken, centrerar texten och lägger till padding för element med i klassen meny*/
    .meny{
        font-size: 1rem;
        padding-bottom: 2%;
        text-align: center;
    }
    /*Ändrar textstorlek, lägger till marginaler uppe och nere för frågorna samt gör dem i fet stil 
    för att göra det lättare att läsa och se frågorna*/
    .question{
        font-size: 1rem;
        margin-bottom: 1%;
        margin-top: 5%;
        font-weight: bold;
    }
    /*ändrar padding till 0 för onumrerade listor i klass reglerna*/
    ul.reglerna{
        padding: 0%;
    }
    /*Ändrar textstorlek och lägger till marginal överst för varje listelement i klass reglerna*/
    li.reglerna{
        font-size: 1rem;
        margin-top: 2%;
    }
    /*Ändrar textstorlek för paragrafen i klassen reglerna*/
    p.reglerna{
        font-size: 1rem;
    }
    /*Ändrar flex-direction från horisontell till kolumn för alla elementen i sektioner och klassen nyheter för att de inte ska bli för små*/
    section, .nyheter{
        flex-direction: column;
    }
    /*Ändrar bredd, marginal och padding för artikelelement som är barnelement till sektioner eller element i klassen nyheter*/
    section > article, .nyheter > article{
        width: 90%;
        margin: 2% auto;
        padding: 2%;
    }
    /*Ändrar marginal för listor i artiklar som är barnelement till sektioner*/
    section > article ul{
        margin-left: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    /*Ändrar textstorlek för alla h1 element*/
    h1{
        font-size: 2rem;
    }
    /*Ändrar textstorlek och centrerar texten för (paragraf) elementet med id introtext*/
    #introtext{
        font-size: 1rem;
        text-align: center;
    }
    /*Lägger till padding för footer elementet*/
    footer{
        padding: 5%;
    }
    /*lägger till marginal överst för datum och event rubrik*/
    .datumnyheter, .eventrubrik{
        margin-top: 2%;
    }
    /*Lägger till marginal för alla h3 och h2 som är barnelement till artiklar*/
    h3, article > h2{
        margin-bottom: 2%;
        margin-top: 2%;
    }
    /*centrerar a elementet för loggan*/
    .alogo{
        display: block;
        text-align: center;
    }
    /*Gör loggan för små skärmar till block, ställer in marginal och max-bredd*/
    #altlogo{
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }
    .omosstext{
        width: 100%;
    }
}