/* baggrund og font på siden generelt */
body{
    background-color: #fff4e8;
    font-family: "Poppins", sans-serif;
    padding-bottom: 60px; /* gør plads til bundnavigation */
   }

/* centrering af logo forside */
.logo-header {
    display: flex; /* Gør containeren til en flexbox */
    justify-content: center; /* bliver centreret på siden */
}

/* Logoet laves responsivt */
.logo-img {
    max-width: 300px; /* Billedets max bredde 300px */
    width: 100%; /* Fylder 100% af containeren */
    height: auto; /* Bevarer billedets proportioner, så det ikke ændrer sig */
}

/* Navigationen i bunden */
.bundnav{
    background-color: #FA4E8A;
    display: flex; /* Brug flexbox til at placere knapperne på linje */
    gap: 10px; /* Lidt luft mellem knapperne */
    position: fixed; /* Navbar er låst */
    width: 100%; /* fylder hele bredden */
    bottom: 0;        /* Placerer den helt nede i bunden */
    left: 0;          /* Fra venstre kant */
}

/* Billederne inde i navigationen */
.nav-item img{
    border-radius: 10px; /* Runding af kanterne på billederne */
}

/* De fire cards på forsiden */
.card-row {
    display: flex; /* Gør at de fire cards ligger på en række */
    justify-content: space-between; /*Mellemrum mellem dem*/
    margin-bottom: 20px; /* Afstanden imellem cards */
}

/*Udseendet på cards*/
.Quiz-card,
.video-card,
.sandtelfalsk-card,
.Anbefalinger-card {
    width: 48%; /* Hver card fylder ca halvdelen af rækken */
    height: 100px; /* højden på cards */
    border-radius: 30px; /* runding af kanter */
    padding: 5px; /* mellemrum/afstand fra kanterne */
}

.Quiz-card img, .Anbefalinger-card img{
    border: 2px solid #FA4E8A;
}

/*Billederne inde i cards*/
.Quiz-card img,
.video-card img,
.sandtelfalsk-card img,
.Anbefalinger-card img {
    /*Billederne fylder hele bredden og højden af cards*/
    width: 100%;
    height: 100%;
    border-radius: 30px; /* runding af kanterne */
    object-fit: cover; /* billedet bliver ikke strukket */

}
    .card-row {
        flex-direction: row; /*Vandret*/
        gap: 20px; /* Mellemrummet mellem cards*/
    }


/*Bredde og fylde af cards i mobiltilstand*/
.Quiz-card,
.video-card,
.sandtelfalsk-card,
.Anbefalinger-card {
    width: 100%; /* fylder hele skræmbredden */
    height: 290px;
}

.profilbillede img{
    width: 300px;
    height: 250px;
    margin-left: 45px;
    object-fit: cover; /*billedet bliver ikke strukket */
}

.Hej{
    color: #FA4E8A;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 28px;
}

.navneboks{
    color: white;
    background-color: #FA4E8A;
    border-radius: 30px; /* runding af kanter */
    margin-top: 5px; /* afstand til elementen ovenover */
    width: 200px; /* bredden */
    font-weight: bold;
    font-size: 18px;
    margin-left: 100px;
    display: block; /* fylder hele linjen */
    text-align: center; /* centrerer teksten i boksen */
}


.beskrivelsesboks{
    background-color: #FA4E8A;
    color: white;
    border-radius: 20px;
    width: 300px;
    height: 200px;
    margin-left: 45px;
    margin-top: 20px;
    padding: 10px; /* afstand fra kanterne */
}

.navnogalder{
    margin: 0; /* fjerner alt den ydre afstand rundt om den */
    text-align: left; /* teksten er fra venstreretning */
}


.Oliviasgemte{
    background-color: #FA4E8A;
    color: white;
    border-radius: 20px;
    font-weight: bold;
    width: 300px;
    padding: 10px;
    display: block;
    margin-left: 45px;
    margin-top: 20px;
    text-align: center;
    justify-content: center; /* centrerer teksten i midten i boksen */
}



.Likede-cards{
border-radius: 30px;
    height: 200px;
    justify-content: space-between; /*Mellemrum mellem dem*/
    margin-bottom: 0; /* fjerner alt den ydre afstand rundt om den */
}

.Likede-cards img{
    width: 100%;
}

.Produkt1{
    padding: 10px;
}

.Produkt2{
    padding: 10px;
}

.Produkt3{
    padding: 10px;
}


.Sandt{
    background-color: #FA4E8A;
    color: white;
    padding: 15px;
    border-radius: 30px;
    font-weight: bold;
    width: 300px;
    margin-left: 90px;
    margin-top: 20px;
    text-align: center;
}

.Quiztid{
    background-color: #FA4E8A;
    color: white;
    padding: 15px;
    border-radius: 30px;
    font-weight: bold;
    width: 300px;
    margin-left: 45px;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    display: block;
}

.Quizboks{
    padding-top: 20px;
    background-color: #E0D3ED;
color: black;
    height: 630px;
    border-radius: 30px;
    text-align: center;
}

.spørgsmålet{
    margin-bottom: 10px;
    text-align: center;
}

.svarene{
    padding: 10px;
    display: flex;
    flex-direction: column; /* står lodret under hinanden */
    gap: 1rem; /* mellemrum */
}

.spf{
border-radius: 30px;
    height: 200px;
    width: 200px;
    margin-top: 20px;
}

.serum{
    background-color: #FA4E8A;
    color: white;
    padding: 15px;
    border-radius: 30px;
}

.pimplepacthes{
    background-color: #FA4E8A;
    color: white;
    padding: 15px;
    border-radius: 30px;
}

    .solcreme{
        background-color: #FA4E8A;
        color: white;
        padding: 15px;
        border-radius: 30px;
    }

.FALSK{
    font-weight: bold;
}

.Videoboks img{
border-radius: 30px;
    width: 300px;
    height: 500px;
    object-fit: cover; /* billedet bliver ikke strukket */
}

.Videoboks{
    display: flex; /* kan placeres fleksibelt */
    justify-content: center; /* centrerer i midten */
    margin-top: 60px;
}

.sandtelfalskboks{
display: flex;
    justify-content: space-between; /* afstand mellem dem */
    align-items: center;
    background-color: #fff4e8;
    border-radius: 30px;
    padding: 20px;
    border: 3px solid #1EC9C1;
    margin-top: 60px;
    height: 200px;
}

.Sandt{
    display: flex;
    margin-left: 45px;
    justify-content: center;
}

.Tekstserum{
    font-size: 18px;
    color: black;
    width: 400px;
}

.serumbillede{
display: flex;
    width: 150px;
}

.serumbillede img{
width: 150px;
}

    .Falskboks{
        background-color: #E0D3ED;
        border-radius: 30px;
        height: 280px;
        margin-top: 50px;
        text-align: center;
    }

.falsktekst{
color: #FA4E8A;
font-size: 40px;
    padding: 10px;
}

.Forklaringen{
font-size: 20px;
    font-weight: normal;
    text-align: left;
    font-size: 18px;
    padding: 10px;
}


.card-anbefaling{
display: flex; /* kan rykkes fleksibelt */
    flex-direction: row;
flex-wrap: wrap; /* tillader at indholdet kan gå på en ny linje, hvis ikke der er plads */
max-width: 700px;
gap: 20px; /* Giver 20px mellemrum mellem kortene */
justify-content: center;
    margin: 10px auto; /* Giver 40px luft op og ned, og centrerer containeren horisontalt */
}

/* udseendet på de enkelte cards i anbefaling containeren*/
.card-anbefaling > div {
width: 45%; /*to rækker, ca halvelen af containeren*/
height: 300px;
border-radius: 30px;
display: flex;
align-items: center; /* centrerer det lodret */
justify-content: center; /* centrerer det vandret */
}

.card-anbefaling img{
max-width: 100%; /* sørger for at den ikke overstiger containerens bredde*/
max-height: 100%; /* sørger for at den ikke overstiger containerens højde*/
    height: 250px;
    border-radius: 20px;
}


.Oliviasanbefalinger{
background-color: #FA4E8A;
color: white;
padding: 10px;
border-radius: 30px;
font-weight: bold;
width: 300px;
margin-left: 45px;
margin-top: 20px;
    display: flex;
text-align: center; /* centrerer tekst i boksen */
    justify-content: center; /*centrerer tekst på siden */
}


    /*Bredde og fylde af cards i mobiltilstand*/
    .solcremer-card, .decubal-card, .tretips-card, .ecookingto-card, .ecookingcream-card, .decubalto-card {
        width: 100%;
        height: 380px;
    }

.Videoertildig{
    background-color: #FA4E8A;
    color: white;
    padding: 12px;
    border-radius: 30px;
    font-weight: bold;
    width: 300px;
    margin-left: 45px;
    margin-top: 20px;
    display: flex;
    text-align: center;
    justify-content: center;
}

/* søgefeltet */
.d-flex{
    display: flex;
    justify-content: center;
    padding: 20px;
    margin-top: 200px;
    width: 300px;
    margin-left: 45px;
    background-color: #FA4E8A;
    border-radius: 20px;

}

/* knappen i søgefeltet */
.btn{
    background-color: white;
    color: #FA4E8A;
    border-color: #FA4E8A;
    border-radius: 15px;
}




/* --- Media Queries --- */

/* Tablet (min-width: 768px) */
@media screen and (min-width: 768px) {
    /* Cards på forsiden */
    .card-row {
        flex-direction: column;
        justify-content: space-between;
    }

    .Quiz-card,
    .video-card,
    .sandtelfalsk-card,
    .Anbefalinger-card {
        width: 48%;
        height: 240px;
    }

    /* Centrering af blokke */
    .profilbillede img,
    .navneboks,
    .beskrivelsesboks,
    .Oliviasgemte,
    .Søgefeltet,
    .Sandt,
    .Quiztid,
    .Videoertildig,
    .Oliviasanbefalinger,
    .d-flex {
        /*centrerer dem vandret */
        margin-left: auto;
        margin-right: auto;
    }

    /* Anbefalingsbilleder */
    .card-anbefaling > div {
        width: 45%;
        height: 320px;
    }

    .solcremer-card,
    .decubal-card,
    .tretips-card,
    .ecookingto-card,
    .ecookingcream-card,
    .decubalto-card {
        height: 360px;
    }

    .Videoboks img {
        width: 400px;
        height: 600px;
    }

    .spf {
        height: 220px;
        width: 220px;
    }
}


/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
    .card-row {
        max-width: 900px;
        display: flex;
        flex-direction: row;
    }

    .card-anbefaling {
        max-width: 1000px;
    }

    .profilbillede img {
        width: 350px;
        height: 300px;
    }

    .navneboks,
    .beskrivelsesboks,
    .Oliviasgemte,
    .Søgefeltet,
    .Sandt,
    .Quiztid,
    .Videoertildig,
    .Oliviasanbefalinger,
    .d-flex {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .Videoboks img {
        width: 500px;
        height: 700px;
    }

    .spf {
        height: 250px;
        width: 250px;
    }

    .solcremer-card,
    .decubal-card,
    .tretips-card,
    .ecookingto-card,
    .ecookingcream-card,
    .decubalto-card {
        height: 400px;
    }

    .sandtelfalskboks {
        padding: 40px;
    }
}