/*----------------------------Pinkpasta-siden-------------------------------*/

/*overskriftens layout*/
.overskrift h1{
    font-size: 65pt;
    color: #967147;
    font-family: 'Arima Madurai', cursive;
    text-align: center;
    margin-top: 30px;
}

/*flexbox mellem ingrediensboks og billede*/
.opskrift{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    gap: 15px;
}

/*ingrediensboksens udseende*/
.ingredienser{
    width: 50%;
    background-color: #c2d6f2;
    margin: 30px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 5px;
}

/*billedet skal fylde 50% af flexboxen*/
.billedeafret{
    width: 50%;
}

/*white space rundt om billedet*/
.billedeafret img{
    margin: 30px;
}

/*Layout på "ingredienser" overskriften*/
.ingredienser h2{
    font-size: 25pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 45px;
}

/*brødtekstens layout*/
.ingredienser p{
    font-size: 16pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 45px;
}

/*white space under afsnittet "tilberedning*/
.tilberedning{
    margin-left: 60px;
    margin-bottom: 40px;
}

/*underoverskriftens layout*/
.tilberedning h2{
    font-size: 30pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 45px;
    margin-bottom: 30px;
}

/*layout på brødtekst*/
.tilberedning p{
    font-size: 16pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 40px;
}

/*----------------------------Ompastaen-siden-------------------------------*/

/*placeringen af billedet*/
.indpakning{
    display: flex;
    justify-content: center;
    margin: 20px;
}

/*indledningens layout*/
.overskrift p{
    font-size: 22pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 40px;
     display: flex;
    justify-content: center;
}
 
/*flexboxen under billedet*/
.indhold{
    display: flex;
}

/*billederne i flexboxens placering*/
.indhold img{
    margin-left: 50px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
}

/*brødtekstens layout*/
.indhold p{
    font-size: 20pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 70px;
    margin: 65px;
    margin-top: 15px;
    
}

/*Layoutet på den blå tekst nederst*/
.forhandler h2{
    font-size: 25pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #609acf;
    text-align: center;
    margin: 20px;
}

/*layout på "credit" teksten*/
#creditpc{
    font-size: 14pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #949494;
    text-align: right;
    margin: 20px;
}

/*----------------------------Vælg-opskrift-siden-------------------------------*/

/*flexboxens ved opskrifts cards*/
.opskrifter{
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
    margin-bottom: 100px;
}

.opskrifter :hover{
    filter: brightness(95%);
    transition: 300ms;
}

/*layout til overskriften på siden*/
.valg h2{
    font-size: 30pt;
    font-family: 'Arima Madurai', cursive;
    color: #609acf;
    margin: 30px;
}


/*----------------------------Urtekram-siden-------------------------------*/

/* de to flexboxe på siden*/
.info, .mereinfo{
    display: flex;
}

/*teksten i flexboxen skal fylde 50% og have white space*/
.tekst{
    width: 50%;
    margin: 50px;
}

/*billedet i flexboxen skal fylde 50% og have white space*/
.groensager{
    width: 50%;
    margin: 50px;
    justify-content: center;
}

/* logobilledets placering*/
.urtekram {
    width: 50%;
    margin: 50px;
    margin-left: 150px;
    justify-content: center;
}

/*brødtekst layout*/
.info p, .mereinfo p{
    font-size: 22pt;
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 60px;
    margin: 30px;
    margin-top: 15px;
    
}

/*underoverskriftens layout*/
.info h2, .mereinfo h2{
    font-size: 30pt;
    font-family: 'Arima Madurai', cursive;
    color: #6ea06f;
    margin-left: 30px;

}

/*placering af tekst*/
.mereinfo p, .mereinfo h2{
    margin-left: -30px;
}

/*----------------------------Konkurrence-siden-------------------------------*/

/*farven på siden*/
.konkurrencen{
    background-color: #9bc1f4;
}

/*typografiernes layout og placering*/
.konkurrencen h1{
    font-size: 80pt;
    color: white;
    font-family: 'Arima Madurai', cursive;
    text-align: center;
}

.konkurrencen h2{
    font-size: 26pt;
    color: white;
    font-family: 'Arima Madurai', cursive;
    text-align: center;
    margin-bottom: 60px;
    margin-top: 40px;
}

.konkurrencen h3{
    font-size: 18pt;
    color: white;
    font-family: 'Arima Madurai', cursive;
    text-align: center;
}

.konkurrencen p{
    font-size: 22pt;
    color: white;
    font-family: 'Arima Madurai', cursive;
    text-align: center;
    margin-bottom: 50px;
}

/*flexboxens på siden*/
.flex{
    display: flex;
    justify-content: space-evenly;
    
}

/*---------------KONKURRENCE TILMELDT SIDEN------------------------------*/

/*baggrundsfarve til siden*/
.konkurrencetilmeldt
{
    background-color: #9bc1f4;
}

/*billedets placering*/
.konkurrencetilmeldt img
{  
    margin-top: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}

/*tekstens layout*/
.konkurrencetilmeldt h1
{
    color: #967147;
    font-size: 50pt;
    font-family: 'Arima Madurai', cursive;
}


.emailcontainer
{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 30px;
    background-color: #e6dfd6;
    width: 500px;
    height: 250px;
}


#tekstmail
{
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #764207;
}

/*tekstens layout*/
#tekstmail p
{
    font-family: myriad-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 17pt;
    white-space: nowrap;
    padding-bottom: 20px;
}

/* "tilbage til forsiden" knappens udseende*/
.konkurrencetilmeldt button
{
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    color: black;
    border: none;
    outline: none;
    width: 150px;
    height: 40px;
}



/*--------------------------------------------------------------------*/
/*LAPTOP RESPONSIVE*/
@media screen and (min-width: 768px)
{   
    /*placeringen på mobil størrelse er ikke den samme som på computer, derfor skal dette ikke vises på computer*/
    .afsnitmobil, .groensagermobil, #creditmobil{
        display: none;
    }

}
/*--------------------------------------------------------------------*/



/*---------------------MOBIL RESPONSIVE------------------------------*/


/*MOBIL RESPONSIVE*/
@media only screen and (max-width: 767px)
{
    /*---------------Ompastaen-siden-----------------------*/
    *{
        margin: 0;
        padding: 0;
    }

    /*tekstens størrelse skal følge enhedens størrelse*/
    .overskrift h1{
        font-size: 10vw;
    }

    .overskrift p{
        font-size: 3vw;
        margin-left: 3.5px;
        margin-right: 3.5px;
    }

    /*billedet skal være i column i midten, og må max fylde 100%*/
    .indpakning{
        flex-direction: column;
        max-width: 100%;
        margin-bottom: 60px;
    }

    /*skal være i column*/
    .indhold{
        flex-direction: column;
       
    }

    /*der skal være white space rundt om billederne*/
    .indhold img{
        max-width: 80%;
        
    }

     /*tekstens størrelse skal følge enhedens størrelse*/
    .indhold p{
        font-size: 3vw;
        margin-top: 40px;
        line-height: 40px;
        
    }

    .forhandler h2{
        font-size: 3.5vw;
        text-align: left;
    }

/*---------------Urtekram-siden-----------------------*/

    /*skal være i column*/
    .info{
        flex-direction: column;
    }

    /*Må kun fylde 100%*/
    .groensagermobil img, .urtekrammobil img{
        max-width: 100%;
    }

    /*Skal være i midten*/
    .groensagermobil, .urtekrammobil{
        margin: auto;
    }

    .tekst{
        width: 100%;
        margin: 0px;
    }

     /*tekstens størrelse skal følge enhedens størrelse*/
    .info h2, .afsnitmobil h2{
        font-size: 5vw;
        margin: 0px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .info p, .afsnitmobil p{
        font-size: 3vw;
        line-height: 60px;
        margin: 0px;
        max-width: 100%;
        margin-bottom: 30px;
        margin-left: 20px;
        margin-right: 20px;
    }

    /*dette afsnit fra laptop skal ikke vises på telefon*/
    .mereinfo, .groensager{
        display: none;
    }

    /*skal være i column*/
    .afsnitmobil{
        display: flex;
        flex-direction: column;
    }

    /*brødtekst layout*/
    .afsnitmobil p{
        font-size: 3vw;
        font-family: myriad-pro, sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    /*underoverskriftens layout*/
    .afsnitmobil h2{
        font-size: 5vw;
        font-family: 'Arima Madurai', cursive;
        color: #6ea06f;
        margin-top: 30px;
    }

    /*layout på "creditmobil" teksten*/
    #creditmobil{
        font-size: 2.5vw;
        font-family: myriad-pro, sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #949494;
        text-align: right;
        margin: 20px;
    }

    /*placerigen af credit på laptop, skal ikke vises på telefon*/
    #creditpc{
        display: none;
    }

    /*---------------Opskrifter-siden-----------------------*/

    /*skal være i column og i midten*/
    .opskrifter{
        flex-direction: column;
        align-items: center;
    }

    /*white space mellem billederne*/
    .opskrifter img{
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /*---------------Konkurrence-siden-----------------------*/

    /*tekstens størrelse skal følge enhedens størrelse*/
    .konkurrencen h1{
        font-size: 12vw;
    }

    .konkurrencen p{
        font-size: 4vw;
        margin: 0px;
    }

    .konkurrencen h2{
        font-size: 5vw;
    }

    /*skal være i column og i midten*/
    .flex{
        flex-direction: column;
        align-items: center;
    }

    /*må max fylde 100%*/
    .flex img{
        max-width: 100%;
    }

    /*white space*/
    .konkurrencen #indtastmail{
        margin-bottom: 100px;
    }

    /*---------------Pinkpasta-siden-----------------------*/

    /*skal være i column og i midten*/
    .opskrift{
        flex-direction: column;
        align-items: center;
    }

    /*white space*/
    .ingredienser{
        width: 90%;
        margin: auto;
    }

    /*billedet må max fylde 100% og skal sidde i midten*/
    .billedeafret img{
        max-width: 100%;
        margin: auto;
    }

    /*Layout på "ingredienser" overskriften*/
    .ingredienser h2{
        font-size: 5vw;
    }

    /*brødtekstens layout*/
    .ingredienser p{
        font-size: 3vw;
        line-height: 35px;
    }

    /*underoverskriftens layout*/
    .tilberedning h2{
        font-size: 5vw;
        line-height: 40px;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    /*layout på brødtekst*/
    .tilberedning p{
        font-size: 3vw;
        margin-right: 60px;
    }

}