/* impotering af fonte fra Googlefonts*/
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Signika:wght@300..700&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Variabler til farver og fonte*/
:root {
    --sort: #172442;
    --hvid: #fdfdeb;
    --gron:#c5d27f;
    --orange: #f39c45;
    --blaa:#89b9cf;
    --lysrod: #f3a0b9;
    --lilla: #5d4aa1;
    --brun: #57341c;
    --graa: #5e6b7f;

    /*De to skifttyper vi har brugt*/
    --fatface:"Abril Fatface", serif;
    --signika: "Signika", sans-serif;
}
/* *************************************************************************** */


/*Styling af det generale, som baggrundsfarve, størrelse og fonte på overskrifter og tekst*/
body {
    background-color: var(--hvid);
}

/*hvilken skifttype h1 har og hvor fed skriften er*/
h1 {
    font-family: var(--fatface);
    font-weight: 400;

}

/*Hvilken font h2 har, hvor stor den er, og hvor fed skrifttypen er*/
h2 {
    font-family: var(--fatface);
    font-size: 40px;
    font-weight: 400;
}

/*Hvilken font h3 har, hvor stor den er, og hvor fed skrifttypen er*/
h3 {
    font-family: var(--fatface);
    font-weight: 400;
    font-size: 20px;
}

/*Hvilken font a har*/
a {
    font-family: var(--fatface);

}

/*Hvilken font p har*/
p {
    font-family: var(--signika);
}
/* ************************************************************************************ */

/*Her starter styling af header*/
header {
    width: 100%;
    background: var(--hvid);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: 20px 4%;
    display: flex;
    z-index: 1000;
    text-transform: none;
    position: sticky;
}

header .navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

/*Størrelse på logo*/
#headlogo {
    width: 170px;
}

/*Størrelse på kurv, profil og søgeikon*/
.headikon {
    width: 60%;
}

/*kurv, profil og søgeikon er flexet for at sætte dem på linje*/
.headikoncontainer {
    display: flex;
    justify-content: space-between;
    width: 15%;
    align-self: center;
    padding-top: 20px;

}


/*Styling af drop downmenu*/
header .navbar ul {
    list-style: none;
    width: 60%;
    padding: 0%;
    display: flex;
    justify-content: space-between;
    align-self: center;
}

header .navbar ul li {
    text-decoration-color: var(--hvid);
    position: relative;
    width: 120%;
    text-align: center;

}

header .navbar ul li a {
    text-decoration: none;
    font-size: 25px;
    padding: 15px;
    padding-bottom: 0px;
    color: var(--sort);
    display: block;

}

header .navbar ul li a:hover {
    background: var(--grå);
    color: var(--orange);

    
}

header .navbar ul li ul {
    position: absolute;
    width: 100%;
    background: var(--hvid);
    display: none;
}

header .navbar ul li ul li {
    width: 100%;

    /*border-top: 1px solid var(--sort);*/
}

header .navbar ul li ul li a{
    width: 100%;
    font-size: 20px;
    padding: 10px;

    /*border-top: 1px solid var(--sort);*/
}

header .navbar ul li ul li ul {
    left: 100px;
    top:0;   
}

header .navbar ul li:focus-within > ul,
header .navbar ul li:hover > ul {
    display: block;
}

/*Label til dropdownmenuen bliver skjult*/
header label {
    font-size: 15px;
    color: var(--grå);
    cursor: pointer;
    display: none;
}

#menu-bar {
    display: none;
}
/*Styling af header slutter*/

/* ******************************************************************************************** */





/*styling af forside */
/*størrelse på forsidebillede, så den fylder hele siden*/
#skaal {
    width: 100%;
}

/*Styling af bestsellere - Hvor meget padding, hvor teksten skal stå og hvilken farve teksten har, under bestseller teksten*/
#bestsell {
    padding: 30px;
    text-align: center;
    color: var(--sort);
}

/*Hvordan billederne står under bestseller*/
#bestsellere {
    margin: auto;
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*størrelse på billede af bestsellere*/
.brew {
    height: auto;
    width: 150px;
}

/*størrelse på den grønne bestseller - skal være større end de to andre*/
#gronbrew {
    height: auto;
    width: 200px;
}


/*ikonserien vises på en mørk baggrund, som får en padding og den mørke farve*/
.smagskendere {
    padding: 30px;
    background-color: var(--sort);
}

/*styling af overskriften til ikonerne*/
.smagskendere h2 {
    text-align: center;
    color: var(--hvid);
    margin-bottom: 15px;
}

/*ikoner bliver flexet og står på række*/
.smagskendere figure {
    display: flex;
    justify-content: space-evenly;
    height: 250px;
}

/*beskrivelserne på ikonerne får en størrelse på 90% af ikonet*/
.smagskendere figure p {
    width: 90%;
    margin: auto;
}

/*styling af vende metoden - lånt fra w3s: https://www.w3schools.com/howto/howto_css_flip_card.asp
- vi lader bare deres kommentering stå*/
.card {
    text-align: center;
    color: var(--hvid);
    padding: 5px;
}

.flip-card img {
    width: 100%;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 200px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: var(--sort);
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: var(--sort);
    color: var(--hvid);
    transform: rotateY(180deg);
    align-content: center;
  }

  .flipcards {
      display: flex;
      justify-content: space-between;
      gap: 20px;
}

/* ****************************************************************************************** */


  /* #ølletsRejse referere til styling af ny sektion med inforgraphic på forsiden
     #ølletsRejse-produktion referer til siden Vores øl*/
  #ølletsRejse,  #ølletsRejse-produktion {
    text-align: center;
    padding: 30px;
    color: var(--sort);
}

/*herfra begynder styling af vores øl siden*/
  #ølletsRejse-produktion {
    color: var(--hvid); 
    background-color: var(--sort);
}

  .produktion {
    padding: 30px;
    color: var(--sort);
}

.overskriftproduktion {
    text-align: center;
    padding: 22px;
}

/*tekst er sat i et grid, så de står ved siden af hinanden*/
.produktiontekst {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 80%;
    line-height: 1.6;
    margin: auto;
}

/*our beer (vores øl) nederste sektion */
.produktiontekst1 {
    text-align: center;
}

/*styler denne section, med små facts om frimaet, med en sort baggrund og en padding */
.facts {
    justify-self: center;
    padding: 100px;
    background-color: var(--sort);
}
/*Sætter de tre ikoner og tekst i et grid, der lægger dem ved siden af hinanden (vandret)*/
.gridfacts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    line-height: 1.6;
    gap: 40px;
    color: var(--hvid);
}
/*Styling underside om ølletsrejse slutter*/

/*Styling underside om os starter*/
.facts img, .factsmork img, .kontaktoplysninger img {
    width: 80px;
    height: 80px;
    margin: 20px;
}
/* ***************************************************************************************************/

/*Start på styling af Om Os*/
/*factsmork bruges på Om os siden og laver denne section med hvidbaggrund*/
.factsmork {
    padding: 100px;
    background-color: var(--hvid);
}

/*gør tekst sort*/
.factsmork p {
    color: var(--sort);
}

/*kontaktoplysninger er en ny sektion der skal være hvis i stedet for sort*/
.kontaktoplysninger {
    padding: 100px;
    background-color: var(--sort);
    color: var(--hvid);
}

/*bestemmer størrelse på billedet på om os siden af øl produktion*/
.produktiontekst3 img {
    height: 400px;
}

/*lægger tekst og billede ind i et grid, så de står ved siden af hinanden (vandret) på siden*/
#produktiontekst2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 85%;
    line-height: 1.6;
    padding-top: 3%;
    margin: auto;
}
/* *********************************************************************************************/


/*Styling fejl404 starter*/
.fejl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 70%;
    line-height: 1.6;
    padding-top: 3%;
    margin: auto;
    align-items: center;
    color: var(--sort);
}

/*størrelse på overskrift og tekst*/
#fejltekst h1 {
    font-size: 4.5rem;
}

#fejltekst p {
    font-size: 30px;
}

/*centerer teksten på fejl404*/
#fejltekst {
    text-align: center;
}

/*størrelse på smeltende is billede*/
#fejlbillede img {
    width: 360px;
}

/*Styling af knap der dirgere tilbage til forside*/
.tilbageforsideknap {
    border: none;
    color: var(--hvid);
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
  }
  
  .tilbageforsideknap {
    background-color: var(--sort); 
    color: var(--hvid); 
    border: 2px solid var(--sort);
    border-radius: 24px;
  }

  /*Hover effekt på tilbageTilForside knappen*/
  .tilbageforsideknap:hover {
    background-color: var(--graa);
    color: var(--sort);
  }
/* *********************************************************************************** */
/*Styling fejl404 slutter*/


/*Styling af oversigt side*/
/*størrelse og farve på h2 overskriften*/
#oversigth2 {
    color: var(--sort);
    text-align: center;
    padding: 30px;
}

/*alle billeder bliver flexet så de står vandret på siden, de wrappes hvis der er for "mange"*/
#oversigt {
    width: 70%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

/*størrelse på ølbilleder*/
#oversigt .varianter img {
    width: 40%;
}

/*alle øl har kun 33% af kassen, så de lægger sig over og under hinanden, pga. flex-wrap:wrap*/
#oversigt .varianter  {
    width: 33%;
    padding: 20px;
}

/*alle navne tekster til øllene er links, så de er stylet til at ligne tekst og ikke links*/
#oversigt a  {
    text-decoration: none;
    color: var(--sort);
}
/* ************************************************************************************************/


/*Styling af lys Ale side*/
/*Billede og beskrivelse af øl lagt ved siden af hinanden*/
.produkt {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
    margin: auto;
    padding: 40px;
    gap: 80px;
    color: var(--sort);
}


.beskrivelse {
    width: 40%;
    padding-top: 20px;
}

.beskrivelse img {
    width: 40px;
}

/*mindre fontstørrelse på tekten*/
.beskrivelse p {
    font-size: 20px;
}

/*prisen står med fed skrift*/
.beskrivelse .pris {
    font-weight: bold;
    padding-top: 20px;
}

/*ikonerne, hjerte, plus og minus, bliver flextet og lagt vandret*/
.kobsIkoner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

/*ikonerne der er indsat som billeder får en størrelse på 25px*/
.kobsIkoner .mindre {
    width: 25px;
}

/* styling at knap til at lægge i kurv*/
.kobsIkoner button {
    width: 100px;
    height: 40px;
    font-family: var(--signika);
    font-size: 16px;
    background-color: var(--gron);
    color: var(--sort);
    border-radius: 10px;
    border: 0px;
}

/*hoverfunktion ved læg i kurv*/
.kobsIkoner button:hover {
    background-color: var(--orange);    
}

/*størrelse på billedet af øllen*/
.billedeAfDase {
    width: 40%;
}

.billedeAfDase img {
    width: 70%;
}

/*Sektion med information om øllen*/
.information {
    color: var(--sort);
    width: 70%;
    margin: auto;
    padding: 50px;
}

/*størrelse på overskrift*/
.information h2 {
    text-align: center;
    padding-bottom: 20px;
}

/*information er flexet for at lave to kollonner til teksten*/
.information .tekstInformation {
    display: flex;
    gap: 50px;
}

.information .tekstInformation div {
    width: 50%;
    font-size: 20px;
}

/*ny sektion med varedekleration*/
.specifikationer {
    background-color: var(--sort);
    color: var(--hvid);
    text-align: center;
    padding: 30px;
}

.specifikationer h2 {
    padding: 20px;
}

/*kasserne med tekst er fordelt vandret på skærmen*/
.varedeklartion {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
    margin: auto;
}

/*hvert tekstkasse bliver stylet til hvid med sort tekst med præcis 100x100px i størrekse - teksten inden i er lavet som block, så de står lodret på hinanden*/
.speciKasse {
    background-color: var(--hvid);
    color: var(--sort);
    width: 100px;
    height: 100px;
    display: block;

}

/*styling af h4, som bruges som overskrift i kassen*/
.speciKasse h4 {
    font-family: var(--signika);
    font-weight: bold;
    font-size: 25px;
    height: 80%;
    width: 100%;
    align-content: center;
}

/*styling af tekst i kassen*/
.speciKasse p {
    font-size: 13px;
    height: 20%;
}
/* **********************************************************************************************'*/


/*Styling af footer*/
/*mørk baggrund og hvid tekst, flyder 1005 af skærmen og flexer indholder så det står vandret*/
footer {
    background-color: var(--sort);
    color: var(--hvid);
    padding: 5%;
    line-height: 1.6;
    display: flex;;
    width: 100%;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    width: 100%;  
}

/*overskriften styles, og der sættes en hvid linje over "Kontakt Os", ved brug af border-top*/
.footer h1 {
    border-top: 1px solid var(--hvid);
    width: 120%;
    padding-top: 20px;
}

/*Styling af links i en stak*/
#footerlinks {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: space-between;
    align-self: flex-end;
}

/*links styles med signika font*/
footer a {
    font-family: var(--signika);
    color: var(--hvid);
}
  
/* mouse over link giver grå farve */
footer a:hover {
    color: var(--graa);
  }
  
  /* selected link bliver blå */
footer a:active {
    color: var(--blaa);
  }

/*section1 flexer tekst og links ved siden af hinanden*/
#section1 {
    display: flex;
    gap: 10%;
    width: 50%;
}

/*socialemedier flexet i deres boks*/
#socialmedier {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
}

/*størrelse på socialemedier ikoner*/
#socialmedier img {
    width: 60px;
    height: 60px;
}