/*Der er elementer som er ændret i styles i sidste øjeblik for
i det mindste at opnå et responsive design til laptops. 
Det har jeg gjort, så I kan modtage et design, som nogenlunde ligner mit i figma.
Hovedesagetligt er det små ændringer på størrelsesværdier og deres enheder, men ellers har jeg skrevet kommentarer
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    font-family: "DM Sans", sans-serif;
    scroll-behavior: smooth;
}


/***************************generelle styles******************************/
/***************************generelle styles******************************/
/***************************generelle styles******************************/
header{
    height: 13vh;
    display: flex;
    align-items: center;
    padding-left: 4%;
    background-color: white;
}

header img{
    height: 8.5vh;
}

main { 
    background-color: #F1F3F9;
}

h1{
    color: #1773B0;
    text-align: center;
    font-size: 2.4rem;
}

h2{
    color: #1773B0;
    font-size: 2rem;
}

h3{
    color: #1773B0;
    font-size: 1.8rem;
}

h4{
    font-size: 1.2rem;
    color: #1773B0;
}

.h4cover{
    font-size: 1.2rem;
    color: #1773B0;
}

h5{
    text-align: center;
    font-size: 1rem;
}

h6{
    color: #1773B0;
    font-size: 14pt;
}

p{
    font-size: 14pt;
    line-height: 20pt;
}

.linkp{ /*links i teaser*/
    color: #1773B0;
    text-decoration: underline;
    font-weight: 700;
}

.linkp a:visited{
    color: #1773B0;
}

/*links i opslag*/
.inlinea{
    color: #1773B0;
    text-decoration: underline;
}

.inlinea:hover{
    font-weight: 600;
}

.inlinea:visited{
    color: #1773B0;
}

.linkpimidten{
    text-align: center;
}

.lillemellemrum{
    width: 100%;
    height: 3vh;
    /*
    background-color: rgb(255, 128, 0);*/
}

.stormellemrum{
    width: 100%;
    height: 8vh;
    /*
    background-color: rgb(255, 128, 0);*/
}

.laptopmellemrum{
    width: 100%;
    height: 8vh;
}

.skyggeikolonne{
    box-shadow: 2px 2px 7px -0.5px rgba(0, 0, 0, 0.299);
    width: 100%;
}

.titelbaggrund{
    background-color: #F5F5F5;
    width: 40vw;
    padding: 2.5% 0;
    box-shadow: 3px 3px 15px -0.3px rgba(0, 0, 0, 0.426);
}

.ctaknap{
    background-color: #1773B0;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    width: 50%;
    max-width: 150px;
    padding: 0.8rem 0;
    border-style: none;
    box-shadow: 5px 5px 10px -2px rgba(0, 0, 0, 0.482);
}

.ctaknap:hover{
    box-shadow: 0.2px 0.2px 15px -2px rgba(0, 0, 0, 0.186);
}

/*generelle styles*/

/****************************Styles til forsiden********************************/
/****************************Styles til forsiden********************************/
/****************************Styles til forsiden********************************/

#forsidebanner{
    background-image: url(images/forsidebanner.webp);
    background-repeat: no-repeat;
    background-position: center;
}

.bannerbillede {
    height: 55vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3%;
    max-width: 100%;
}

.bannerp{
    text-align: center;
    width: 80%;
    max-width: 35vw;
}

#søgefelt{
    width: 45vw;
    height: 7vh;
    padding-left: 2%;
    font-size: 14pt;
    font-style: italic;
    border-style: none;
    background-color: white;
}

.content{
    padding: 5% 8vw 5% 8vw;
}


#alleopslag{
    display: grid;
    grid: auto auto auto / 26vw 26vw 26vw;
    gap: 3vw;
    padding: 2% 0 4% 0;
}


.coverbillede{
    display: flex;
    flex-direction: column;
}


.forsidelinks{
    text-decoration: none;
}

.forsidelinks:hover{
    text-decoration: underline;
    color: #1773B0;
}

.forsidelinks img{
    box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.426);
    width: 100%;
}

#antalsider{
    display: flex;
    justify-content: center;
    gap: 1.5%;
}

#antalsider h4{
    font-weight: 400;
}

#valgtside{
    border-bottom-style: solid;
}
/*Styles til forsiden*/

/**********************Styles til Ordensbånd***********************/
/**********************Styles til Ordensbånd***********************/
/**********************Styles til Ordensbånd***********************/


#ordensbanner{
    background-image: url(images/ordensbåndbanner.webp);
    background-repeat: no-repeat;
    background-position: 0 -15vh;
}

.teaserbg{
    background-color: white;
    padding: 2% 4%;
    box-shadow: 7.5px 7.5px 20px 3px rgba(0, 0, 0, 0.201);
    height: auto;
    display: flex;
    flex-direction: column;
}

.teaser{
    width: 65%;
    /*
    background-color: rgb(159, 89, 173);*/
}

.fremhæve{
    font-weight: 700;
}

.forfattersektion{
    display: flex;
    align-items: end;
    gap: 1.5rem;
    margin: 2rem 5%;
}
    
.forfattersektion img{
    border-radius: 50%;
    box-shadow: 3px 3px 15px -0.3px rgba(0, 0, 0, 0.426);
}
    
.byline h4:first-child{
    text-decoration: underline;
}

.langbg{
    background-color: white;
    padding: 3% 4%;
    box-shadow: 7.5px 7.5px 20px 3px rgba(0, 0, 0, 0.201);
    height: 33vh;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.tokolonneriopslag{
    display: flex;
    justify-content: space-between;
    /*
    background-color: #1773B0;*/
    
}

.kolonne1{
    /*background-color: rgb(255, 128, 0);*/
    width: 45vw;
}

.kolonne2{
    /*background-color: rgb(34, 182, 21);*/
    width: 26vw;
}

#kongenogdronningen{
    width: 100%;
}

.kilde {
    font-size: 12pt;
    font-style: italic;
}

.kilde a{
    color: #1773B0;
}

.kilde a:hover{
    font-weight: 700;
}

.kilde a:visited{
    color: #1773B0;
}

.pogknap{
    display: flex;
    align-items: center;
    gap: 5%;
}

.bestilbg{
    background-color: #D4D2D2;
    background-image: -webkit-linear-gradient(#E0E0E0, #D4D2D2);
    padding: 3vh 1.5vw;
}

.toknapper{
    display: flex;
    justify-content: space-between;
}

.question{
    background-color: #E8EEF6;
    padding: 3vh 1.5vw;
}

.answer{
    background-color: #D4D2D2; /*for browsers that does not support gradient*/
    background-image: -webkit-linear-gradient(#E0E0E0, #D4D2D2);
    padding: 3vh 1.5vw;
}

.answer p{
    font-size: 12pt;
}

.uxwritting{
    font-size: 12pt;
    color: #1773B0;
    font-style: italic;
}

.trekort{
    display: flex;
    justify-content: space-between;
}

.produkt{
    display: flex;
    flex-direction: column;
    width: 23vw;
}

.produktikolonne{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.produkttitel{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5%;
    background-color: #E8EEF6;
}

.kommentarsektion{
    padding: 0 15vw;
    display: flex;
    flex-direction: column;
}

.kommentarsektion input{
    color: #1773B0;
    background-color: #E8EEF6;
    border-style: none;
    border-style: solid;
    border-width: 0.3vh;
    border-color: #1773B0;
    padding-left: 2%;
    height: 7vh;
    font-style: italic;
}

.toinput{
    display: flex;
    justify-content: space-between;
}

.toinput input{
    width: 24vw;
}

#kommentar {
    color: #1773B0;
    background-color: #E8EEF6;
    border-style: none;
    border-style: solid;
    border-width: 0.3vh;
    border-color: #1773B0;
    padding: 2%;
    font-style: italic;
    height: 15vh;
}

/************************Styles til madbilletter**********************/
/************************Styles til madbilletter**********************/
/************************Styles til madbilletter**********************/
#madbanner {
    background-image: url(images/madbilletbanner.webp);
    background-repeat: no-repeat;
    background-position: 0 -24vh;
}

.toprodukter{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.toprodukter img{
    width: 21vw;
}

#madbilletsplit {
    width: 100%;
}

.trekort .coverbillede{
    width: 23vw;
}
/*Styles til madbilletter*/


/**************************Styles til papirarmbånd***********************/
/**************************Styles til papirarmbånd***********************/
/**************************Styles til papirarmbånd***********************/
#papirbanner{
    background-image: url(images/papirbanner.webp);
    background-repeat: no-repeat;
    background-position: center;
}

/*fordi der var nogle billeder, som ikke vil justeres efter containeren uden om*/
.alleBilleder{
    height: -webkit-fill-available;
}

.mobilversion{
    display: none;
}
/*Styles til papirarmbånd*/


/**************************Styles til nøglesnore***********************/
/**************************Styles til nøglesnore***********************/
/**************************Styles til nøglesnore***********************/
#nøglesnorbanner{
    background-image: url(images/nøglesnorbanner.png);
    background-repeat: no-repeat;
    background-position: center;
}

.tokolonnerikolonne1{
    display: flex;
}

.tokolonnerikolonne1 div{
    width: 50%;
}

.tokolonnerikolonne1 img{
    width: 50%;
    height: 100%;
}

.mobilmellemrum{
    display: none;
}

ul{
    padding-left: 2vw;
}

ul li{
    font-size: 14pt;
    line-height: 20pt;
}

/************Media queries til de første ting, der bryder layoutet************/
/************Media queries til de første ting, der bryder layoutet************/
/************Media queries til de første ting, der bryder layoutet************/
@media only screen and (max-width: 1200px) {
    .ctaknap {
        max-width: 100px;
        font-size: 0.8rem;
    }

    .tokolonnerikolonne1{
        flex-direction: column;
    }
    
    .tokolonnerikolonne1 div{
        width: 100%;
    }
    
    .tokolonnerikolonne1 img{
        width: 100%;
        height: auto;
    }

    .mobilmellemrum{
        display: block;
    }

    .pogknap{
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0%;
    }

  }
  /*Media queries 1 slut*/

  /************Media queries til mobilversion************/
  /************Media queries til mobilversion************/
  /************Media queries til mobilversion************/

  @media only screen and (max-width: 900px) {
    /********Generelt til mobil**********/
    
    .titelbaggrund{
        background-color: #F5F5F5;
        width: 85dvw;
    }

    header{
        height: 10dvh;
        
    }
    
    header img{
        height: 7.5dvh;
    }

    .content{
        padding: 5% 6dvw 5% 6dvw;
    }


    h1{
        font-size: 2rem;
    }

    h2{
        color: #1773B0;
        font-size: 1.6rem;
    }

    h3{
        font-size: 1.4rem;
    }

    h4{
        font-size: 1rem;
    }

    .h4cover{
        font-size: 0.8rem;
    }

    p{
        font-size: 10pt;
        line-height: 18pt;
    }

    .lillemellemrum{
        height: 2dvh;
    }

    .teaserbg{
        background-color: rgba(255, 255, 255, 0);
        padding: 0%;
        box-shadow: none;
    }
    
    .teaser{
        width: 100%;
        /*
        background-color: rgb(159, 89, 173);*/
    }
        
    .forfattersektion img{
        width: 20dvw;
    }

    .langbg{
        background-color: rgba(255, 255, 255, 0);
        padding: 0%;
        box-shadow: none;
    }
    
    .tokolonneriopslag{
        display: flex;
        flex-direction: column;
    }
    
    .kolonne1{
        /*background-color: rgb(255, 128, 0);*/
        width: 100%;
    }
    
    .kolonne2{
        /*background-color: rgb(34, 182, 21);*/
        width: 100%;
    }

    .laptopmellemrum{
        display: none;
    }

    .ctaknap {
        max-width: 120px;
        font-size: 0.8rem;
    }

    .bestilbg{
        padding: 3% 5%;
    }

    .question{
        padding: 3% 5%;
    }

    .question h6{
        max-width: 80%;
        font-size: 1rem;
    }
    
    .answer{
        padding: 3% 5%;
    }
    
    .answer p{
        font-size: 10pt;
    }

    .kommentarsektion{
        padding: 0;
    }

    .toinput{
        flex-direction: column;
        gap: 2dvh;
    }

    .toinput input{
        width: 100%;
    }

    .trekort{
        flex-direction: column;
        align-items: center;
        height: 132dvh;
    }

    .produkt{
        width: 100%;
    }
    

    /***********mobil forside***********/

    .bannerbillede {
        height: 40dvh;
    }

    .bannerp{
        text-align: center;
        max-width: 90dvw;
    }

    #søgefelt{
        width: 75dvw;
        font-size: 12pt;
    }

    #alleopslag{
        grid: auto auto / 42dvw 42dvw ;
    }

    /*********mobil Ordensbånd************/
    #ordensbanner{
        background-position: -200dvw -15vh;
    }

    .kilde{
        font-size: 10pt;
    }

    /*********mobil Papirarmbånd**********/

    #papirbanner{
        background-position: -220dvw -24dvh;
    }

    .mobilversion{
        display: flex;
    }

    .laptopversion{ 
        display: none;
    }

    /*********mobil Madbillet*************/
    #madbanner {
        background-position: 0 0;
    }

    .toprodukter{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 58dvh;
    }
    
    .toprodukter img{
        width: 100%;
    }

    .trekort2{
        height: 145dvh;
    }

    /*********mobil Nøglesnore************/

    ul{
        padding-left: 5dvw;
    }
    
    ul li{
        font-size: 10pt;
        line-height: 18pt;
    }

  }