*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Här skriver du design för mobil */

/*main page*/
#horizontalAccorion{
    height: auto;
}

#slide1, #slide2, #slide3, #slide4{
    height: 250px;
}

.secAccord{
    width: 24%;
    margin: 0.5%;
    height: 100px;
    transition: width 0.5s, height 0.5s ease;
    cursor: pointer;
    float: left;
}

#themeNav{
    clear: left;
    width: 100%;
}
#accNav{
    height: 100px;
    transition: height 0.5s ease;
}
p{
    font-size: 1em;
    font-family: sans-serif;
}
.hAccp{
    display: none;
}
#tButtDiv{
    align-content: center;
    text-align: center;
}
#dropDiv{
    align-content: center;
    text-align: center;
}
#themeButt{
    height: 90%;
    width: 100px;
}
.dropdown-item{
    cursor: pointer;
}

header{
    text-align: center;
}
a{
    color: green;
    font-size: 2em;
}
a:visited{
    color: red;
}

/*sub page*/
#subMain{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "subHeader subHeader"
                         "subNav1 subNav1"
                         "subNav2 subNav2"
                         "subSection1 subSection1"
                         "subSection2 subPic"
                         "subFooter subFooter";
}
#subHeader{grid-area: subHeader;}
#subSection1{grid-area: subSection1;}
#subSection2{grid-area: subSection2;}
#subNav1{grid-area: subNav1;}
#subNav2{grid-area: subNav2; width: 100%; height: auto;}
#subPic{grid-area: subPic; text-align: center;}
#subFooter{grid-area: subFooter;}
@media only screen and (min-width: 576px) {
    /* Här skriver du design för tablet */
    #subMain{
        display: grid;
        grid-template-columns: 1fr 3fr 3fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: "subHeader subHeader subHeader subHeader"
                             "subNav1 subSection1 subSection1 subNav2"
                             ". subSection2 subPic . "
                             "subFooter subFooter subFooter subFooter";
    }
}