/* Generelt */
body {
    background-color: #E9E4DC; /* baggrundsfarven på selve body'en */
}
main {
    margin-top: 7rem; /* Add a top margin to avoid content overlay */ 
}

a:link {
    text-decoration: none; /* fjerner stregen under linket */
    color: #000; /* gør teksten sort */
    font-family: "Merriweather Sans", sans-serif; /* skiftypen på link */
}

a:visited {
    color: #000; /* Farve for besøgte links */
}

:root {
    --skriftfarve: #000;
    --primaer-beige: #D9D2C7;
    --sekundaer-beige: #B6A08A;
    --sekundaer-moerk-beige: #8e7d6d;  
  }

/* -------------------------------------------------------------- */
/* HEADER */
header {
    background-color: var(--primaer-beige); /* baggrundsfarven på header */
    display: flex; /* gør header flexibel */
    flex-direction: row; /* gør header-containerne ligger på en række */
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

.header1 {
    width: 20%; /* størrelsen på den første header-container, som er usynlig / tom  */
}

.header2 {
    width: 60%; /* størrelsen på midter header-containeren, som indeholder logo og navbar */
    margin: auto; /* centrer i midten af containeren */
    display: flex; /* gør det muligt at bruge flexbox */
    justify-content: center; /* placere elementet i midten af containeren */
    flex-direction: column; /* gør elementerne inde i header2 containeren er i en kolonne */
}
.header2-logo {
    display: flex; /* gør det muligt at bruge flexbox */
    justify-content: center; /* placere elementet i midten af containeren */
}
.header2-logo img{
    margin: auto; /* Centerer containeren */
    width: 15rem; /* størrelsen af logoet */
    height: auto; /* gør at billedet ikke bliver distorted */
    padding-top: 0.5rem; /* afstand til toppen af skærmen */
}

.navbar {
    margin: auto;
    display: flex; /* gør det muligt at bruge flexbox */
    justify-content: center; /* placere elementerne i midten af containeren */
}
.navbar a {
    padding: 0.8rem; /* giver padding omkring hver link a i navbar-containeren */
}

.vl {
    border-left: 2px solid black; /* danner den vertikale streg i navbar */
    height: 38px; /* højden på stregen */
    margin-top: 2px; /* rykker den 2px ned, så den er i center af linjen */
}

.header3 {
    width: 20%; /* størrelsen af den sidste header-container */
    display: flex; /* gør det muligt at bruge flexbox */
    justify-content: right; /* placere ikonerne til højre */
    align-items: end; /* placere den i det nedereste højrne af containeren. */
    padding-right: 0.7rem; /* rykker ikonerne lidt ind på side */
}
.header3 img {
    height: 2.5rem; /* størrelsen af ikonerne (login og kurv) i header3-containeren */
    padding: 0.5rem; /* giver padding omkring hvert ikon */
}

/* -------------------------------------------------------------- */
/* FOOTER */
footer {
    background-color: var(--primaer-beige); /* baggrundsfarve på footer */
    width: 100%; /* gør at det fylder hele skærmen ud */
    bottom: 0; /* placere footeren i bunden */
}

.footercontainer {
    display: flex; /* gør det muligt at bruge flexbox */
    justify-content: space-between; /* placerer elementerne i hver side af skærmen */
}

.footerlinks {
    display: flex; /* gør det muligt at bruge flexbox */
    flex-direction: column; /* placere elementerne i en kolonne */
    justify-content: center; /* placere elementerne i midten af containeren */
    padding-left: 1.5rem; /* afstand til kant */
}

.footerlinks a {
    padding-top: 0.5rem; /* afstand til element over */
    padding-bottom: 0.5rem; /* afstand til element under */
}

.footersocialemedier ul {
    list-style: none; /* fjerner prikkerne fra list-elementerne */
    padding-right: 1.5rem; /* afstand til kant */
}
/*  */
.footersocialemedier img {
    width: 2.5rem; /* størrelsen af sociale medier ikonerne */
    padding: 0.2rem; /* afstand rundt om ikonerne, så de ikke ligger for tæt */
}
/* -------------------------------------------------------------- */
/* HOVEDFORSIDE */

/* Slideshow container */
.slideshow-container {
    max-width: 1000px; /* max størrelsr på slider-containeren */
    position: relative;
    margin: auto; /* centrer slideshow-containeren */
}

.mySlides img {
    padding-top: 20px;/* giver afstand til headeren */
}

/* Hide the images by default */
.mySlides {
    display: none;
}
  
/* Next & previous buttons */
.prev, .next {
    cursor: pointer; /* ændre musen til at indikere man kan klikke på den  */
    position: absolute;
    top: 50%; /* placere den halvvejs på billedet - ved kanten */
    width: auto;
    margin-top: -22px;
    padding: 16px; /* afstand rundt om */
    color: white; /* farven på pillene */
    font-weight: bold; /* gør pillene tykke */
    font-size: 25px; /* størrelsen på pillene */
    transition: 0.6s ease;
    border-radius: 0 7px 7px 0; /* afrundet hjørner mod billedet - ikke mod kanten */
    user-select: none;
}
  
/* Position the "next button" to the right */
.next {
    right: 0; /* placere helt til højre kant */
    border-radius: 7px 0 0 7px; /* afrundet hjørner mod billedet - ikke mod kanten */
}
  
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8); /* baggrundsfarven til pillene, når man hover over dem */
}
  

/* The dots */
.dot {
    cursor: pointer; /* ændre musen til at indikere man kan klikke på den */
    height: 15px; /* højden på prikkerne */
    width: 15px; /* bredden på prikkerne */
    margin: 0 2px; /* afstand  */
    background-color: #bbb; /* baggrundsfarven */
    border-radius: 50%; /* gør prikkerne helt cirkulære */
    display: inline-block; /*  */
    transition: background-color 0.6s ease; /*  */
}
  
.active, .dot:hover {
    background-color: #717171; /* farve når hover */
}

.dots {
    padding-bottom: 20px; /* giver afstand til næste container */
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
  
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/* Måltidskasser og Madpakker */
.forside-container {
    margin: auto; /* centerer containeren */
    display: flex; /* gør det muligt at bruge flexbox */
    justify-content: center; /* placerer elementerne i midten */
    align-items: baseline; /* gør at elementerne er på sammen linje - bundlinjen */
    flex-direction: row; /* gør elementerne på række */
    text-align: center; /* centrere teksten  */
    padding-bottom: 1rem; /* afstand til elementet under */
}

.forside-container img {
    margin: auto; /* centerer containeren */
    width: 18rem; /* størrelse på billederne */
    padding-bottom: 1rem; /* afstand mellem billedet og teksten */
}

/* Prikker med mission, vision og brugeranvisning */
.prik {
    min-height: 330px; /* højden på prikkerne */
    width: 330px; /* bredden på prikkerne */
    background-color: var(--primaer-beige); /* baggrundsfarven */
    border-radius: 50%; /* gør prikkerne helt cirkulære */
    display: inline-block;
    transition: background-color 0.6s ease;
}

.prikker {
    padding: 20px; /* giver afstand til næste container */
}

.prik h3 {
    font-family: "Merriweather Sans", sans-serif; /* skiftype */
    padding-top: 2rem; /* afstand over teksten */
}

.prik p {
    font-family: "Merriweather", Serif; /* skiftype */
    padding: 0rem 3rem 0rem 3rem; /* afstand 0rem top, 3rem højre, 0rem bund og 3rem venstre. */
}

.prik h2 {
    font-family: "Merriweather Sans", sans-serif; /* skiftype */
    padding: 8.5rem 0rem 8.5rem 0rem; /* afstand over teksten */
    font-size: 20px; /* skriftstørrelse, så den er samme størrelse som de andre */
}

#more {display: none;}

.myBtn {
    cursor: pointer; /* ændre musen til at indikere man kan klikke på den */
    font-family: "Merriweather", Serif; /* skiftype */
    background-color: var(--sekundaer-beige); /* baggrundsfarve */
    border: 0; /* fjerne kantlinjen omkring knappen */
    border-radius: 10px; /* afrunder hjørner */
    padding: 10px; /* afstand mellem tekst og kanten på knappen */
    margin-bottom: 2rem; /* afstand til under knappen */
}

.active, #myBtn:hover {
    background-color: var(--sekundaer-moerk-beige); /* farve når hover */
}

/* -------------------------------------------------------------- */
/* MÅLTIDSKASSER - FORSIDE */

.billede-container-maaltidskasse {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-maaltidskasse img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.maaltidskasse p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 40.4rem; /* Centerer containeren */
    font-family: "Merriweather Sans", sans-serif; /* skrifttype*/
}

.billede-container-maaltidskasse-udvalg {
    margin: 2rem auto; /* Centerer containeren */
    width: 40rem; /* Sætter bredden til 20px */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem; /* Afstand mellem kasserne */
    padding: 0 2rem; /* Indre margin for containeren */
}

.billede-container-maaltidskasse-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
    margin-bottom: -1rem;

}

.billede-container-maaltidskasse-udvalg p {
    width: 3rem; /* Sætter bredden på teksten til 3 rem */
    margin: 0rem 3.1rem; /* Centerer teksten */
}

/* knap brugeranvisning */
.container-knap {
    display: flex; /* Gør det muligt at bruge flexbox */
    justify-content: center; /* Centrerer horisontalt */
    align-items: center; /* Centrerer vertikalt */
    height: 5rem; /* Sætter højden til 100% af viewporten */
}
.button-brugeranvisning {
    display: inline-block;
    padding: 0.3rem 2rem; /* 0.3rem afstand over og under, 2rem afstand i siderne */
    background-color: var(--sekundaer-beige); /* baggrundsfarve */
    color: #000; /* tekstsfarve */
    text-decoration: none; /* fjerner stregen under link og den blå farve */
    border-radius: 0.3rem; /* afrunder hjørner */
    font-family: "merriweather"; /* skrifttype*/
    
  }
  
  .button-brugeranvisning:hover {
    background-color: var(--sekundaer-moerk-beige); /* baggrundsfarve */
  }

/* -------------------------------------------------------------- */
/* MÅLTIDSKASSER - UNDERSIDE KØD */
.billede-container-kod-udvalg {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-kod-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.kod-udvalg p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin: auto; /* Centerer containeren */
    font-family: "merriweather sans"; /* skrifttype*/
}

/* -------------------------------------------------------------- */
/* MÅLTIDSKASSER - UNDERSIDE FISK */
.billede-container-fisk-udvalg {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-fisk-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.fisk-udvalg p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 41.1rem; /* Centerer containeren */
    font-family: "Merriweather Sans"; /* skrifttype*/
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
  }
  
  .product-item {
    padding: 20px;
    text-align: center;
    background-color: var(--primaer-beige); /* baggrund på boksen */
    font-family: "Merriweather Sans", sans-serif; /* skrifttype*/
  }
  
  .product-item img {
    max-width: 100%;
    height: auto;
  }
  
  .product-item h2 {
    font-size: 1.2em;
    margin: 10px 0;
    font-family: "Merriweather"; /* skrifttype*/
  }
  
  .price {
    font-size: 1em;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
    font-family: "Merriweather"; /* skrifttype*/
    font-weight: bold;
  }

  .time {
    font-size: 1em;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
    font-family: "Merriweather"; /* skrifttype*/
  }

  .kurv-udvalg {
    max-width: 10%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
  }

/* -------------------------------------------------------------- */
/* MÅLTIDSKASSER - UNDERSIDE VEGANSK */
.billede-container-veg-udvalg {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-veg-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.veg-udvalg p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 41.6rem; /* Centerer containeren */
    font-family: "merriweather sans"; /* skrifttype*/
}

/* -------------------------------------------------------------- */
/* MADPAKKER - FORSIDE */
.billede-container-madpakke {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden */
}


.billede-container-madpakke img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.madpakke p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 42rem; /* Centerer containeren */
    font-family: "merriweather sans"; /* skrifttype*/
}

.billede-container-madpakke-udvalg {
    margin: 2rem auto; /* Centerer containeren */
    width: 40rem; /* Sætter bredden til 20px */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem; /* Afstand mellem kasserne */
    padding: 0 2rem; /* Indre margin for containeren */
}

.billede-container-madpakke-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
    margin-bottom: -1rem; /* afstand under */

}

.billede-container-madpakke-udvalg p {
    width: 3rem; /* Sætter bredden på teksten til 3 rem */
    margin: 0rem 3.1rem; /* Centerer teksten */
}

/* knap brugeranvisning */
.container-knap {
    display: flex; /* Gør det muligt at bruge flexbox */
    justify-content: center; /* Centrerer horisontalt */
    align-items: center; /* Centrerer vertikalt */
    height: 5rem; /* Sætter højden til 100% af viewporten */
}

.button-brugeranvisning {
    display: inline-block;
    padding: 0.3rem 2rem;
    background-color: var(--sekundaer-beige);
    color: #000;
    text-decoration: none;
    border-radius: 0.3rem;
    font-family: "merriweather"; /* skrifttype*/
    
}

.button-brugeranvisning:hover {
    background-color: var(--sekundaer-moerk-beige);
}

/* -------------------------------------------------------------- */
/* BENTO BOX - UNDERSIDE KØD */
.billede-container-kod-udvalg {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-kod-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.kod-udvalg p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 41.1rem; /* Centerer containeren */
    font-family: "merriweather sans"; /* skrifttype*/
}

/* -------------------------------------------------------------- */
/* BENTOBOX - UNDERSIDE FISK */
.billede-container-fisk-udvalg {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-fisk-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.fisk-udvalg p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 41.1rem; /* Centerer containeren */
    font-family: "merriweather sans"; /* skrifttype*/
}

/* -------------------------------------------------------------- */
/* BENTO BOX - UNDERSIDE VEGANSK */
.billede-container-veg-udvalg {
    margin: auto; /* Centerer containeren */
    margin-top: 9rem; /* Centerer containeren */
    width: 10rem; /* Sætter bredden til 20px */
}


.billede-container-veg-udvalg img {
    max-width: 100%; /* Billederne fylder containerens bredde */
    height: auto; /* Bevarer billedets proportioner */
}

.veg-udvalg p {
    width: 2rem; /* Sætter bredden på teksten til 2rem */
    margin-left: 41.6rem; /* Centerer containeren */
    font-family: "merriweather sans"; /* skrifttype*/
}

/* -------------------------------------------------------------- */
/* HOW TO DO - BRUGERANVISNING */
.HowToDo {
    display: flex; /* gør brugeranvisningen flexibel */
    justify-content: center; /* placere elementet i midten */
    padding: 20px; /* afstand omkring elementet */
}

.HowToDo img {
    width: 50%; /* størrelsen på howtodo - billedet justere bredden efter behov */
}


/* -------------------------------------------------------------- */
/* LOGIN */
.login-box {
    width: 70%; /* Juster bredden efter behov */
    max-width: 30rem; /* Maximal bredde for at forhindre, at boksen bliver for bred på større skærme */
    margin: 10rem auto; /* Centrerer boksen vandret og giver 2rem margin øverst og nederst */
    padding: 2rem 7rem; /* 20px øverst og nederst, 70px i hver side */
    background-color: #f7f7ef; /* Baggrundsfarven for boksen */
    border: 0.12rem solid var(--sekundaer-beige); /* Ramme omkring boksen */
    border-radius: 0.3rem; /* Afrundede hjørner */
    text-align: center;
    font-family: "merriweather"; /* skrifttype*/
}
  
.login-box h2 {
    color: var(--skriftfarve); /* Farven på overskriften */
    font-family: "merriweather"; /* skrifttype*/
}
  
.login-box p {
    color: var(--skriftfarve); /* Farven på brødteksten */
    font-family: "merriweather"; /* skrifttype*/
}

/* img login */
.login-img {
    width: 7rem; /* størrelsen af ikonerne (login og kurv) i header3-containeren */
    padding-bottom: 1.5rem; /* giver padding omkring hvert ikon */
}

/* knap login */
.login-box .button-login {
    display: inline-block;
    padding: 0.3rem 2rem; /* 0.3rem afstand over og under, 2rem afstand til siderne */
    background-color: var(--sekundaer-beige); /* baggrundsfarve */
    color: #000; /* tekstfarve */
    text-decoration: none; /* fjerner streg under link og blå tekstfarve */
    border-radius: 0.3rem; /* afrunder hjørner */
    font-family: "merriweather"; /* skrifttype*/
}
  
.login-box .button-login:hover {
    background-color: var(--sekundaer-moerk-beige); /* baggrundsfarve */
}


/* -------------------------------------------------------------- */
/* KURV */
.kurv-box {
    width: 70%; /* Juster bredden efter behov */
    max-width: 30rem; /* Maximal bredde for at forhindre, at boksen bliver for bred på større skærme */
    margin: 10rem auto; /* Centrerer boksen vandret og giver 2rem margin øverst og nederst */
    padding: 2rem 7rem; /* 20px øverst og nederst, 70px i hver side */
    background-color: #f7f7ef; /* Baggrundsfarven for boksen */
    border: 0.12rem solid var(--sekundaer-beige); /* Ramme omkring boksen */
    border-radius: 0.3rem; /* Afrundede hjørner */
    text-align: center; /* centrer teksten */
    font-family: "merriweather"; /* skrifttype */
}
  
.kurv-box p {
    color: var(--skriftfarve); /* Farven på brødteksten */
    font-family: "merriweather"; /* skrifttype */
}
  
/* img login */
.kurv-img {
    width: 15rem; /* størrelsen af ikonerne (login og kurv) i header3-containeren */
    padding-bottom: 1.5rem; /* giver padding omkring hvert ikon */
}