/* Allmänt */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#navbar{
    height: 10vh;
    border: 0.5vh solid black;
    display: flex;
    justify-content: space-around;
    background-color: white;
    line-height: 10vh;
}

.nav{
    height: 100%;
}

.linktext{
    display: none;
}

.icon{
    position: relative;
    justify-self: center;
    height: 9vh;
    width: 9vh;
}

body{
    background-color: rgb(233,231,215);
    width: 100%;
}

.bildtext{
    color: #14635e;  
}

#foot{
    background-color: #eb7084;
    display: flex;
    justify-content: space-around;
    color: #fac7c3;
    font-size: 120%;
    margin-top: 3vh;
}

.framtext{
    position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);   
    font-size: 250%;    
    color: black; 
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

#hem{
    display: grid;
    grid-template-columns: 5fr;
    grid-template-rows: 0.2fr 1.2fr 0.6fr;
    grid-gap: 1fr;
    grid-template-areas: "tit"
                         "abo"
                         "bisp";
}



#titel{
    position: relative;
    text-align: center;
    color: white;
    grid-area: tit;
    font-family: 'Anton', sans-serif;
}

.hembild{
    width: 100%;
    height: 100%;
}

#bildspel{
    position: relative;
    text-align: center;
    grid-area: bisp;
}

#about{
    height:  60vh;
    text-align: center;
    margin-top: 5vh;
    grid-area: abo;
}

#omoss{
    color: rgb(78,47,52);
    font-size: 250%;
    font-family: 'Kanit', sans-serif;
}

#omosstext{
    color: rgb(78,47,52);
    font-size: 100%;
    margin-left: 7vh;
    margin-right: 7vh;
}

.sida{
    grid-gap: 2vh;
    display: grid;
    grid-template-rows: 1fr 2fr 2fr 2fr 2fr;
    grid-template-columns: 1fr;
    grid-template-areas: "st"
                         "ste"
                         "sb"
                         "ste2"
                         "sb2";
}

.sidatitel{
    position: relative;
    text-align: center;
    color: white;
    grid-area: st;
    font-family: 'Anton', sans-serif;
}

.sidatext1{
    grid-area: ste;
    margin-left: 2vh;
    margin-right: 2vh;
}

.sidabild1{
    grid-area: sb;
    text-align: center;
}

.sidatext2{
    grid-area: ste2;
    margin-left: 2vh;
    margin-right: 2vh;
}

.sidabild2{
    grid-area: sb2;
    text-align: center;
}


@media screen and (max-width: 280px) {
    #omosstext{
        font-size: 80%;
    }
}

@media screen and (min-width: 600px) {
    .framtext{  
        font-size: 450%;    
    }
    #omoss{
        font-size: 450%;
    }
    #omosstext{
        font-size: 150%;
    }
    .sidatext1{
        font-size: 110%;
    }

    .sidatext2{
        font-size: 110%;
    }

    .sida{
    grid-template-rows: 0.1fr 1.1fr 1.1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "st st"
                         "ste sb"
                         "ste2 sb2";
    }
}

@media screen and (min-width: 760px) {
    .hembild{
        width: auto;
        height: auto;
    }

    .sidatext1{
        font-size: 120%;
        margin-left: 20vh;
    }

    .sidatext2{
        font-size: 120%;
        margin-right: 20vh;
    }

    .linktext{
        display: inline-block;
        position: absolute;
        top:0;
        z-index: 2;
    }

    .sida{
        grid-template-areas: "st st"
                             "ste sb"
                             "sb2 ste2";
        }
}