@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('./fonts/MYRIADPRO-REGULAR.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Condensed'), url('./fonts/MYRIADPRO-COND.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Condensed Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Condensed Italic'), url('./fonts/MYRIADPRO-CONDIT.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Light';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Light'), url('./fonts/MyriadPro-Light.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Semibold'), url('./fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Semibold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Semibold Italic'), url('./fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Bold Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold Condensed'), url('./fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold'), url('./fonts/MYRIADPRO-BOLD.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold Italic'), url('./fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}
@font-face {
    font-family: 'Myriad Pro Bold Condensed Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold Condensed Italic'), url('./fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

/*ALT OVER DENNE LINJE ER TIL FONT*/

body {          /*giver alle "body" elementer (altså hele hjemmesiden) padding 0 og margin 0, hvilket gør at der ikke er en hvid linje i toppen i i siderne*/
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(54, 54, 54);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 30px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: rgb(37, 37, 37);
}

.active {
    background-color: rgb(92, 92, 92);
}

.intro {    /*styling for alle elementer med "class=intro"*/
    background-size: cover; /*gør så at baggrunden kun er 1 billede der fylder det hele*/
    background-position: top center; /*positionere billedet så det er i midten*/
}

#frontpage.intro {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(./images/backgroundgreen.jpg); /*sætter elementet der har class=intro til at have virus som baggrund og indstiller den til at fulde hele skærmen, og at være statisk så den ikke følger med når man scroller.*/
    background-attachment: fixed; /*gør så billedet ikke følger med scroll.*/
}

#motion.intro {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/motion.jpg); /*sætter elementet der har class=intro til at have virus som baggrund og indstiller den til at fulde hele skærmen, og at være statisk så den ikke følger med når man scroller.*/
    background-position-y: 50%;
    background-attachment: fixed; /*gør så billedet ikke følger med scroll.*/
}

#kostogmad.intro {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/kostogmad.jpg); /*sætter elementet der har class=intro til at have virus som baggrund og indstiller den til at fulde hele skærmen, og at være statisk så den ikke følger med når man scroller.*/
    background-size: 100vw;
    background-position-y: 45%;
    background-attachment: fixed; /*gør så billedet ikke følger med scroll.*/
}

.main { /*styling for alle elementer med "class=main"*/
    width: 100%;        /*sætter bredden til 100% af elementet den er inden i*/
    height: 60vh;      /*sætter højden til 60% af skærmen*/
    position: relative; /*sørger for at teksten inden i .main ikke ender alle mulige forskellige steder*/
    z-index: 4;
}

html {  /*styling for "html" elementet*/
    font-family: 'Myriad Pro Light';
    color: rgba(0, 0, 0, .87);  /*skriftfarve*/
    margin: 0; /*afstand mellem elementer*/
    overflow-x: hidden; /*så tekst ikke går ind over andre ting*/
    max-width: 100%;    /*så hjemmesiden ikke kan være bredere end skærmen, da det ikke ser godt ud*/
}

.main .title {     /*laver css styling for alle elementer med class="title" som er inden i et element med class="intro"*/
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);   /*normalt er den i nederste højre hjørne. Jeg skærer 50% af pladsen fra så den er i midten.*/
    color: #fff;              /*farven på tekst*/
    text-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}

.main .heading {
    font-size: 4vw;
    text-align: center;
    font-weight: 100;
    
}

.main .subheading {
    font-size: 1vw;
}

.section {
    width: 50%;
    min-height: 200px;
    overflow: hidden;
    margin: 20px auto;
    padding: 0 10px;
    border-bottom: solid 2px rgba(63, 63, 63, 0.452);
}

.link {
    color: rgb(32, 119, 163);
    text-decoration: none;
}

.button {
    background-color: #1E6C93;
    border: none;
    color: white;
    padding: 6px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
}

.footer {
    text-align: center;
    width: 60%;
    margin: auto;
    margin-bottom: 30px;
}