* {
    font-family: "Open Sans", sans-serif;
}

.main__text--background {
    background-color: #2090BF;
    padding: 0.75em;
    box-shadow: 0px 5px #00000077;
    text-shadow: 0px 1px #000000AA;
}

body {
    margin: 0px;
    padding: 0px;
    background-image: url("../images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: auto 100%;
    min-height: 100vh;
    height: 100vh;
}

header {
    width: 100vw;
    box-shadow: 0px 10px #00000077;
}

a{
    color: white;
    text-decoration: none;
}

    a:hover {
        color: #2090BF;
    }

.header-overskrift { 
    text-align: center;
    margin: 0px;
    padding: 0.5em;
    font-size: 75px;
    color: white;
    font-weight: bold;
}

    .header-overskrift img {
        display: flex;
        justify-content: center;
        width: 90vw;
        margin: auto;
    }

ul {
    margin: 0px;
    padding: 0px;
    background-color: #20BF9E;
    font-size: 50px;
    list-style-type: none;
    text-shadow: 0px 2px #000000AA;
}

li {
    color: white;
    padding: 0.5em;
}

.flex-container {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

main {
    width: 100vw;
}

.main-text-container {
    display: flex;
    flex-flow: column-reverse wrap;
    align-content: center;
    margin: 30px;
}

.main-about-text {
    display: flex;
    flex-flow: column wrap;
    box-sizing: border-box;
    padding: 15px;
    font-size: 30px;
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    background-color: #2090BF;
    color: white;
    box-shadow: 0px 10px #00000077;
    margin-bottom: 15px;
    text-shadow: 0px 1px #000000AA;
    text-align: center;
    justify-content: center;
}

.main-about-text__overskrift {
    font-weight: bold;
    font-size: 40px;
}

.main__read-more {
    text-decoration: underline;
}

    .main__read-more:hover {
        color: #20BF9E;
    }

.main-about-img {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
    margin-bottom: 10px;
}

.main-text2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 25px;
    text-align: center;
}

.main__skills--overskrift {
    box-sizing: border-box;
    padding: 10px;
    font-weight: bold;
    font-size: 30px;
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    background-color: #2090BF;
    color: white;
    box-shadow: 0px 10px #00000077;
    text-shadow: 0px 1px #000000AA;
    text-align: center;
}

.main__skills {
    display: grid;
    grid-template-areas:
        "a b"
        "c d"
        "e f"
        "g h"
        "i i";
    justify-content: space-evenly;
    font-weight: normal;
}

.main__skills--box {
    
}

    .main__skill--box img {
        width: 25vw;
        max-width: 100%;
        max-height: 100%;
    }

.main__skill--box p {
    margin-block-start: 0.15em;
    margin-block-end: 1.25em;
}



footer {
    position: absolute;
    width: 100vw;
    margin-top: 100px;
}

.footer-main {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    height: 125px;
    background-color: #20BF9E;
    color: white;
    text-align: center;
    text-shadow: 0px 1px #000000AA;
}

.kontakt__space-to-footer {
    height: 35vh;
}

.om_mig__space-to-footer {
    height: 10vh;
}

/*projekter side*/

.grid__container {
    display: grid;
    grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e"
        "f";
    justify-content: center;
}

.grid__items {
    padding: 50px;
    text-align: center;
    color: white;
}

.grid__items a{
    text-decoration: underline;
}

    .grid__items a:hover {
        color: #20BF9E;
    }

.grid__item1 {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
}

.grid__item2 {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
}

.grid__item3 {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
}

.grid__item4 {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
}

.grid__item5 {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
}

.grid__item6 {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
}

/*om mig side*/

.om_mig__flex {
    display: flex;
    flex-flow: column-reverse wrap;
    align-content: center;
    margin: 30px;
}

.om_mig__text {
    box-sizing: border-box;
    padding:  15px;
    font-size: 30px;
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    background-color: #2090BF;
    color: white;
    box-shadow: 0px 10px #00000077;
    margin-bottom: 15px;
    text-shadow: 0px 1px #000000AA;
}

.om_mig__img {
    width: 90vw;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0px 10px #00000077;
    margin-bottom: 15px;
}

/*kontakt side*/

.kontakt__flex-container{
    margin: 35px;
    display:flex;
    flex-flow: column wrap;
    align-content: center;
    color: white;
}

.kontakt__text-box {
    margin-top: 15px;
    height: 20px;
}

.kontakt__text-box--stor {
    margin-top: 15px;
    height: 125px;
    width: 90%;
}

.kontakt__flex-container button {
    background-color: #2090BF;
    color: white;
    border: 0px;
    padding: 10px;
    text-shadow: 0px 1px #000000AA;
    box-shadow: 0px 5px #00000077;
}

    .kontakt__flex-container button:hover {
        background-color: #20BF9E;
        margin-top: 2px;
        box-shadow: 0px 3px #00000077;
    }


/*media query*/
@media only screen and (min-width: 828px) {
    .flex-container {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
    }

    .header-overskrift img {
        width: 30vw;
    }

    .main-text-container {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        margin: 0px;
        margin-top: 30px;
    }

    .main-about-text {
        width: 35vw;
    }

    .main-about-img {
        width: 35vw;
    }

    ul {
        margin: 0px;
        padding: 0px;
        font-size: 30px;
    }

    .header-overskrift {
        font-size: 50px;
        margin-right: auto;
        text-align: left;
    }

    .main__skills--overskrift {
        width: 80vw;
    }

    .main__skills {
        grid-template-areas:
            "a a b c d"
            "e f g h i"
    }

    .main__skill--box img {
        width: 5vw;
    }

    /*projekter side media*/

    .grid__container {
        display: grid;
        grid-template-areas:
            "a b"
            "c d"
            "e f";
        grid-template-columns: 1fr 1fr;
        justify-content: space-evenly;
    }

    .grid__item1 {
        width: 30vw;
    }
    
    .grid__item2 {
        width: 30vw;
    }   
    
    .grid__item3 {
        width: 30vw;
    }
    
    .grid__item4 {
        width: 30vw;
    }
    
    .grid__item5 {
        width: 30vw;
    }
    
    .grid__item6 {
        width: 30vw;
    }

    /*om mig side media*/

    .om_mig__flex {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
        margin: 0px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .om_mig__text {
        width: 45vw;
    }

    .om_mig__img {
        width: 35vw;
    }

    /*kontakt side media*/

    .kontakt__text-box {
        width: 50%;
    }

    .kontakt__text-box--stor {
        width: 50%;
    }

}