/*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;
}


/***************************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;
}

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

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

p{
    font-size: 14pt;
}

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

.linkp:hover{
    font-weight: 700;
}

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

.inlinea{
    color: #1773B0;
    text-decoration: underline;
    font-weight: 700;
}

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

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

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

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

.titelbaggrund{
    background-color: #F5F5F5;
    width: 40vw;
    padding: 1% 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 15px -2px rgba(0, 0, 0, 0.578);
}

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

/*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: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3%;
    max-width: 100%;
}

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

#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;
}

/* Jeg har saat billederne ind i html, som de andre for at 
opnå den bedste responsive layout for laptops, men efter jeg skrev rapporten
#placeholdersatin{
    width: 100%;
    height: 260px;
    background-image: url(images/satin.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.426);
    margin-bottom: 1vh;
}

#placeholderautomat{
    width: 100%;
    height: 15vh;
    background-image: url(images/automatcover.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.426);
    margin-bottom: 1vh;
}*/

.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 -65vh;
}

.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;
    /*gap: 1rem;
    background-color: #1773B0;*/
    
}

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

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

#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;
    padding: 3vh 1.5vw;
}

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

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

.answer{
    background-color: #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;
    background-color: #1773B0;
    width: 23vw;
}

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

.linkpimidten{
    text-align: center;
}

.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;
}