/**
 * file: css/css.css
 * purpose: styling
 **/

/* Define variables in the :root */
 :root {
  --beskrivelsesTekst: rgb(35, 31, 32);
  --tilgaengeligIkon: rgb(101, 193, 121); 
  --color-yellow: #ffe600;
  --color-secondary-light: #9bb0a4;
 }

/* Use your variables on elements */
 main {
   
 }

 .header {
  display: flex;
  justify-content: space-between; /* Elementer fordeles lige - start, midt, slut */
  padding: 16px 100px 20px; /* top, right, bottom, left */
 }

 #sallingLogoId {
  width: 150px;
  height: 62px;
 }

 #soegebarId {
  width: 475px;
  height: 62px;
 }

 #loopId {
  display: none; /* Billedet med loop vises ikke ved stor skærm */
  width: 200px;
  height: 40px;
  margin-top: 10px;
 }

 #favoritterId { /* Skal forståes som øverste højre hjørne med favoritter, log in og kurv */
  width: 220px;
  height: 62px;
 }

 #menuUnderHeader {
  display: flex;
  justify-content: space-evenly;
  font-family: Poppins, sans-serif; /* Kan denne angives som variable */
  font-size: 16px;
 }

 a {
  text-decoration: none;  /* Fjerner underline fra links */ 
  color: black; /* Gør skriftfarven sort, så den ikke bliver lilla */
 }

 a:hover {
  font-weight: 500;  /* Gør skiften federe når man holder musen over */
 }

 #oplevSalling { /* HEP!!!! Dette link skal have en let skygge over sig ved hover */
   font-weight: 350;
 }

 #produktmaerkeId {
    font-family: Playfair Display, sans-serif; /* ROYAL COPENHAGEN */
    font-size: 17px;
    color: rgb(123, 121, 121)
 }

 #beskrivelseAfProduktId {
   font-family: Poppins, sans-serif;
   font-size: 26px;
   color: var(--beskrivelsesTekst);
   margin: 8px 0px 40px; /* top, right, bottom, left */
   font-weight: 350; /* Hvor tyk skriften skal være - er mere specifik end lighter, bold og bolder */
 }
 
 p { /* Skal gøre koden simpel, så alle paragraphs har samme font */
   font-family: Poppins, sans-serif;
 }

 #groenPletId { /* Plet ved lagerstatus, der er grøn ved en postitiv lagerstatus */
  color: var(--tilgaengeligIkon); /* Gør pletten grøn */
  font-size: large;
 }

 #butikkerId { /* Laver underline under tekst */
  text-decoration: underline;
 }

 #prisId {
  font-family: Poppins, sans-serif;
  font-size: 35px;
  font-weight: 600;
  color: #231F20;
 }

 #laegVareIKurvId {
  width: 78%;
  height: auto;
 }

 /* Her skal klik&hent-knappens funktioner være */

 #leveringsmulighederId {
  width: 40%;
  height: auto;
  margin-top: 25px;
  margin-bottom: 50px;
 }

 #produktbeskrivelseId {
  width: 50%;
  height: auto;
 }

 .container { /* Indeholder alt det, der ikke står i header eller er menulinjen */
  margin-top: 65px; /* Afstanden fra menulinjen ned til teksten Royal Copenhagen og billedet  */
  display: flex;
  justify-content: space-center;
  gap: 80px; /* Mellemrummet mellem billede og information */
 }

 #varebilledeId {
  margin-left: 200px; /* 200 */
 }

/* KNAP */
  #buttonId {
    background-color:#9bb0a4;
    color: black;
    padding: 10px 20px; /* Sørger for knappens størrelse */
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    bottom: 40px; /* Afstand fra bunden af skærmen */
    right: 40px; /* Afstand fra højre side af skærmen */
    cursor: pointer; /* Ændrer musen over knappen, så det er tydeligt, at det er et link */
  }

#tekstIKnapId {
  display: block;
  width: 100%;
}

.flexContainer {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 14%;
  }

/* METODER */
 /* Nedstående får searchbar til at forsvine og et loop vises ved skærme mindre end 1100px */
 @media only screen and (max-width: 1100px) {
  #soegebarId {
    display: none;
  }

  #favoritterId {
    display: none;
  }

  #loopId {
    display: block;
  }

  }

  /* Metode-slut */

  /* KURVEN */

  #kurvMedKrusId {
    margin-top: 4%;
    width: 100%;
    height: auto;
  }



 
/* BRUGT TIL AT LAVE BILLEDET LEVERINGSMULIGHEDER
 #test {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 300;
 }
 */