header{
    display: grid;
    grid-template-columns: 175px auto 175px;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
        ". t ."
        "d t f"
        ". t .";

    background-image: linear-gradient(darkblue 0%,white 20%);
    border-radius: 30px 30px 0px 0px;
}

#wrapper{
    max-width: 1000px;
    margin: auto;
}

#fylkesLogo img, #skoleLogo img{
    max-width: 100%;
}
#fylkesLogo{
    grid-area: f;
    text-align: center;
}
#skoleLogo{
    grid-area: d;
    text-align: center;
}
#htekst{
    grid-area: t;
    font-size: 6vw;
    color: darkblue;
    padding: 5% 0 5% 20%;

    margin-top: auto;
    margin-bottom: auto;
}

.konteiner{
    display: grid;
    grid-template-columns: 120px auto auto;
}
.konteinerUB{
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 20px;
    row-gap: 40px;
}
.ruteEn{
    background-image: linear-gradient(to right, darkblue ,darkblue 80%,aqua );
    border-radius: 20px;
    height: 3rem;
    line-height: 3rem;
    color: white;
    font-size: x-large;
    padding: 5px;
    display: flex;
    justify-content: center;
    margin: 5px;
}

.ruter{
    background-image: linear-gradient(to right,darkblue 0%,blue 20%,blue 80%,lightcyan 90%, aqua 100%);
    padding: 5px;
    display: flex;
    justify-content: center;
    margin: 10px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    font-size:x-large;
    transition: width 2s;
    height: 3rem;
    line-height: 3rem;
}


.ruter:hover{
    background-image: linear-gradient(to right, darkblue 0%,aqua 20%,aqua 80%, darkblue 100%);
    opacity: 0.3;
    color: black;
}
.konteinerUB a, .konteinerUB a:focus, .konteinerUB a:active {
    color: white;
    text-decoration: none;
}
.konteiner a, .konteiner a:focus, .konteiner a:active {
    color: white;
    text-decoration: none;
}
.konteinerUB a:hover, .konteiner a:hover{
    color: black;
}

footer { 
    background-image: linear-gradient(white 0%,white 80%, blue 100%);
    border-radius: 30px 30px 30px 30px;
    margin-top: 50px;
}


.bildelink:hover img{
    opacity: 0.3;
}
@media only screen and (max-width: 700px){
    header{
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:    "d"
                                "t"
                                "f";
    }
    #htekst{
        font-size: 15vw;
    }
    .konteiner{
        grid-template-columns: auto;
    }
    .konteinerUB{
        grid-template-columns: auto auto;
    }
    #fylkesLogo img, #skoleLogo img{
        max-width: 175px;
    }
    .ruter{
        font-size: small;  
    }
}