/**
 * file: css/css.css
 * purpose: styling
 **/
/* Define variables in the :root */
:root {
  --contrast: rgb(151, 218, 151);
  --backgr: #d9cfab;
  
}

main {
  color: var(--contrast);
  
}


body {
 background-color: var(--backgr)
}



/* Basis styling af navigationsbar */
.navbar {
 background-color: var(--contrast);
 overflow: hidden;
}
.navbar a, .dropdown .dropbtn {
 float: left;
 display: block;
 color: rgb(12, 24, 17);
 text-align: center;
 padding: 14px 20px;
 text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn {
 background-color: #0f100e;
 color: var();
}
/* Dropdown container */
.dropdown {
 float: left;
 overflow: hidden;
}
/* Dropdown knap */
.dropdown .dropbtn {
 font-size: 16px;
 border: none;
 outline: none;
 color: var(--contrast);
 padding: 14px 20px;
 background-color: inherit;
 font-family: inherit;
 margin: 0;
}
/* Dropdown indhold (skjult indtil brugeren hover) */
.dropdown-content {
 display: none;
 position: absolute;
 background-color: var(--contrast);
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
}
.dropdown-content a {
 float: none;
 color: rgb(39, 90, 27);
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 text-align: left;
}
.dropdown-content a:hover {
 background-color: var(--backgr);
}
/* Vis dropdown indhold ved hover */
.dropdown:hover .dropdown-content {
 display: block;
}

.navbar a {
 float: left;
 display: block;
 color: rgb(0, 77, 26);
 text-align: center;
 padding: 14px 20px;
 text-decoration: none;
 margin-right: 50px; 
 justify-content: center;
 gap: 30px;
 width: 100%;
 position: relative;
 background-color: var(--contrast)
 
}
.dropdown .dropbtn {
 font-size: 23px;  
 border: none;
 outline: none;
 padding: 14px 20px;
 background-color: inherit;
 margin-right: 30px; 
}



.dropdown .dropbtn {
 color: #296b31; 
}

.dropdown .dropbtn:hover {
 color: #00ff00; 
}

.kol {
 display: flex;
 justify-content: space-evenly;
}
/* Billeder */
img {
 width: 100%; 
 transition: transform 0.3s ease; /* Tilføjer en glidende overgang for billedets zoom */
}
/* Hover på billeder */
.kol article:hover img {
 transform: scale(1.1); 
}
/* Tekstjustering */
h2, p {
 text-align: center;
 color: #16691b;
 
}
/* Hover på tekst */
.kol article p {
 transition: color 0.3s ease; /* Glidende overgang for farveændring på teksten */
}
.kol article:hover p {
 color: #16691b; 
}

.kol article p {
 font-family: 'Arial', sans-serif; 
 font-size: 1.1em; 
 color: #296b31; 
 font-weight: 600; 
 letter-spacing: 0.5px; 
 line-height: 1.4em; 
 margin-top: 10px; 
}


.kol img {
 width: 100%;  /* Sætter en fast bredde */
 max-width: 250px;
 height: auto; 
 aspect-ratio: 5 / 3;
 object-fit: cover; 
 border-radius: 8px; 
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}
.kol article {
 margin: 10px; 
}


.artikelmad-billede {
 width: auto; 
 max-width: 600px; /* Sætter en maksimal bredde */
 height: auto; /* Beholder proportionerne */
 border-radius: 8px; /* Afrundede hjørner */
 margin: 20px 0; /* Tilføjer lidt luft over og under */

}
.logo-madside {
 float: left;
 padding: 5px;
}
.logo-billigt {
 float: left;
 padding: 5px;
}
.logo-madplan {
 float: left;
 padding: 5px;
}

/* Styling for main and article */
.sparetips-side {
 max-width: 800px; /* Maksimal bredde for artiklen */
 margin: 20px auto; /* Centreret med afstand til toppen */
 padding: 20px; /* Indre afstand */
 background-color: #ffffff; /* Hvid baggrund */
 border-radius: 8px; /* Afrundede hjørner */
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Let skygge for dybde */
}
h1 {
 font-size: 2.5em; /* Større overskrift */
 color: #296b31; /* Overskrift farve */
 margin-bottom: 20px; /* Afstand under overskriften */
}
h2 {
 font-size: 1.8em; 
 color: #296b31; 
 margin-top: 20px; 
}
p {
 margin-bottom: 15px; 
 line-height: 1.6; 
}
.artikelmad-billede {
 max-width: 100%; 
 height: auto; 
 border-radius: 8px; 
 margin: 20px 0; 
}
/* Styling for main and article */
.billigmad-side {
 max-width: 800px; /* Maksimal bredde for artiklen */
 margin: 20px auto; /* Centreret med afstand til toppen */
 padding: 20px; /* Indre afstand */
 background-color: #ffffff; /* Hvid baggrund */
 border-radius: 8px; /* Afrundede hjørner */
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Let skygge for dybde */
}
h1 {
 font-size: 2.5em; /* Større overskrift */
 color: #296b31; /* Overskrift farve */
 margin-bottom: 20px; /* Afstand under overskriften */
}
h2 {
 font-size: 1.8em; /* Størrelse for underoverskrifter */
 color: #296b31; /* Farve for underoverskrifter */
 margin-top: 20px; /* Afstand over underoverskrifter */
}
p {
 margin-bottom: 15px; /* Afstand mellem afsnit */
 line-height: 1.6; /* Øg linjehøjden for bedre læsbarhed */
}
.artikelmad-billede {
 max-width: 100%; /* Sikre at billedet ikke overskrider containeren */
 height: auto; /* Bevarer billedets proportioner */
 border-radius: 8px; /* Afrundede hjørner */
 margin: 20px 0; /* Afstand over og under billedet */
}
.opskrift-billede {

   max-width: 300px; /* Billedet vil ikke være bredere end 600px */
   width: 100%; /* Billedet vil fylde 100% af containerens bredde */
   height: auto; /* Beholder proportionerne */
}

/* Styling for main and article */
.madplan-side {
 max-width: 800px; /* Maksimal bredde for artiklen */
 margin: 20px auto; /* Centreret med afstand til toppen */
 padding: 20px; /* Indre afstand */
 background-color: #ffffff; /* Hvid baggrund */
 border-radius: 8px; /* Afrundede hjørner */
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Let skygge for dybde */
}
h1 {
 font-size: 2.5em; /* Større overskrift */
 color: #296b31; /* Overskrift farve */
 margin-bottom: 20px; /* Afstand under overskriften */
}
h2 {
 font-size: 1.8em; /* Størrelse for underoverskrifter */
 color: #296b31; /* Farve for underoverskrifter */
 margin-top: 20px; /* Afstand over underoverskrifter */
}
p {
 margin-bottom: 15px; /* Afstand mellem afsnit */
 line-height: 1.6; /* Øg linjehøjden for bedre læsbarhed */
}
.madplan-billede {
 max-width: 300px; /* Billedet vil ikke være bredere end 600px */
   width: 100%; /* Billedet vil fylde 100% af containerens bredde */
   height: auto; /* Beholder proportionerne */
   
}
table {
 width: 100%; /* Tabel bredden */
 border-collapse: collapse; /* Slå grænser sammen */
 margin: 20px 0; /* Afstand over og under tabellen */
}
th, td {
 border: 1px solid #ddd; /* Grænsefarve for tabelceller */
 padding: 10px; /* Indre afstand i cellerne */
 text-align: left; /* Venstrestillede tekst */
}
th {
 background-color: #f4f4f4; /* Baggrundsfarve for overskriftsrækker */
 color: #333; /* Farve for overskriftsrækker */
}







.newsletter {
 padding: 40px 20px;
 text-align: center;
 background-color: var(--contrast);
 border-radius: 10px;
 margin: 40px 0;
}
.newsletter h2 {
 font-family: Arial, Helvetica, sans-serif;
 color: rgb(22, 43, 22);
 font-size: 1.8rem;
}



.newsletter form {
 display: flex;
 justify-content: center;
 gap: 10px;
}
.newsletter input[type="email"] {
 padding: 10px;
 border: 1px solid #020202;
 border-radius: 5px;
 width: 300px;
 margin-bottom: 40px;
 font-size: 1rem;
}
.newsletter button {
 padding: 10px 20px;
 background-color: #296b31;
 color: white;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 1rem;
 display: inline-block;
 margin-bottom: 40px;
}
.newsletter button:hover {
 background-color: var(--contrast);
}
.thank-you-message {
 display: none; /* Skjult som standard */
 color: #296b31;
 margin-top: 20px;
 font-size: 1.2rem;
}


header {
 display: flex;
 justify-content: space-evenly;
 background-color: var(--contrast)
 ;
}

.sparetips-side {
font-size: 20px;
img {
 float: right; /* Flytter billedet til højre */
 margin-left: 15px; /* Tilføjer margin til venstre for tekst */
}
h2 {
 text-align: left; /* Flytter teksten til højre */
 color: #296b31;
 
}
p {
 text-align: left; /* Flytter tekst i paragrafen til venstre */
 color: #296b31;
 
}
h1 {
 text-align: center; 
 color: #296b31;
 font-family: Arial, Helvetica, sans-serif;
}

}


.billigmad-side {
 font-size: 20px;
 img {
   float: right; /* Flytter billedet til højre */
   margin-left: 15px; /* Tilføjer margin til venstre for tekst */
 }
 h2 {
   text-align: left; /* Flytter teksten til højre */
   color: #296b31;
 
   
 }
 p {
   text-align: left; /* Flytter tekst i paragrafen til venstre */
   color: #296b31;
 
   
 }
 
 h1 {
   text-align: center; 
   color: #296b31;
   font-family: Arial, Helvetica, sans-serif;
   
 }
 
 
 }


 .madplan-side {
   font-size: 20px;
   img {
     float: right; /* Flytter billedet til højre */
     margin-left: 15px; /* Tilføjer margin til venstre for tekst */
   }
   h2 {
     text-align: left; /* Flytter teksten til højre */
     color: #296b31;
   
     
   }
   p {
     text-align: left; /* Flytter tekst i paragrafen til venstre */
     color: #296b31;
   
     
   }
   
   h1 {
     text-align: center; 
     color: #296b31;
     font-size: larger;
     font-family: sans-serif Arial, Helvetica, sans-serif;
     
   }
   
   
   }



   .skema-plan {
    color: #296b31
   }