@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Raleway:ital,wght@0,100;0,200;0,300;0,500;1,100;1,300;1,400&display=swap');


/*Copyright Kris Merckx 2022 - https://www.booksandbags.be*/

/*CROWL COLORS*/
:root{

    /*Color scheme*/
    --scheme0: rgba(0,130,166,1);
    --scheme1: rgba(0,78,99,1);
    --scheme2: rgba(230,249,255,1);
    --scheme3: rgba(102,222,255,1);
    --scheme4: rgba(255,114,0,1);
    --scheme5: rgba(153,68,0,1);
    --scheme6: rgba(255,241,230,1);
    --scheme7: rgba(255,170,102,1);
    
    /*Color palette*/
    --cp0: rgba(150,178,155,1);
    --cp1: rgba(162,151,125,1);
    --cp2: rgba(163,129,105,1);
    --cp3: rgba(158,112,93,1);
    --cp4: rgba(150,101,89,1);
    --cp5: rgba(142,95,92,1);
    --cp6: rgba(134,96,102,1);
    --cp7: rgba(128,104,118,1);
    --cp8: rgba(123,118,141,1);
    --cp9: rgba(121,140,171,1);
    --cp10: rgba(123,170,207,1);
    --cp11: rgba(133,210,251,1);
    
    /*Image palette*/
    --ip0: rgba(226,208,167,1);
    --ip1: rgba(189,81,57,1);
    --ip2: rgba(4,4,4,1);
    --ip3: rgba(205,113,67,1);
    --ip4: rgba(79,38,50,1);
    --ip5: rgba(99,58,63,1);
    --ip6: rgba(83,44,60,1);
    --ip7: rgba(152,141,118,1);
    --ip8: rgba(219,170,99,1);
    --ip9: rgba(211,132,87,1);
    --ip10: rgba(79,72,62,1);
    --ip11: rgba(130,121,116,1);
    
    /*Inputfield colors*/
    --ic0: rgba(121,159,175,1);
    --ic1: rgba(0,93,114,1);
    --ic2: rgba(56,110,121,1);
    --ic3: rgba(204,143,72,1);
    --ic4: rgba(150,178,155,1);
    --ic5: rgba(177,64,33,1);
    --ic6: rgba(65,58,91,1);
    --ic7: rgba(133,210,251,1);
    --ic8: rgba(150,178,155,1);
    --ic9: rgba(177,64,33,1);
    --ic10: rgba(65,58,91,1);
    --ic11: rgba(133,210,251,1);
    --ic12: rgba(150,178,155,1);
    --ic13: rgba(177,64,33,1);
    --ic14: rgba(65,58,91,1);
    --ic15: rgba(133,210,251,1);
    }
    
    .example{
    background-color:var(--scheme0);
    color:var(--cp0);
    }

/*instellen van de lettertypes*/
*{
    font-family: 'Raleway', sans-serif;
    /*alle marges op 0 zetten*/
    margin:0;
    padding:0;
}

/*uitzondering voor titels*/
h1,
h2,
h3,
h4,
h5,
h6{
    font-family: 'Playfair Display', serif;
}

/*afbeeldingen maximum 100% breed*/
img{
    max-width:100%;
}

/*opmaak navigatiebalk*/
nav{
    height:10vh;
    width:80%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content: flex-start;
}

nav a{
    /*tekstkleur*/
    color:black;
    /*geen lijn onder de links*/
    text-decoration: none;
    height:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    padding-right:20px;
    padding-left:20px;
}

/*als je met muis beweegt over knop*/
nav a:hover{
    color:white;
    background-color:black;
}


#logo{
    background-image:url(../images/booklogo.jpg);
    height:90px;
    width:80%;
    margin:auto;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: left center;
}

/*de header ziet er altijd zo uit... */
header{
    background-color:black;
    color:white;
    height:30vh;
    /*de inhoud flexibel maken*/
    display:flex;
    /*horizontaal en verticaal uitlijnen*/
    justify-content: center;
    align-items:center;
    /*de flexibele elementen onder elkaar plaatsen*/
    flex-direction: column;
    /*achtergrondafbeelding*/
    background-image: linear-gradient(rgba(65,58,91,0.5), rgba(0,0,0,0.7)), url(../images/achtergrond.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*uitzonderingen*/
#splash{
    height:80vh;
}


#usps{
    width:80%;
    margin:auto;
    display:flex;
    margin-top:39px;
    justify-content: space-between;
}

#usps article{
    flex: 0 0 28%;
}

.readmore{
    /*achtergrondkleur*/
    background-color:var(--scheme0);
    /*tekstkleur*/
    color:white;
    /*geen lijn onder de links*/
    text-decoration: none;
    /*afstand tussen tekst en achtergrondkleur*/
    padding:13px;
    padding-left:20px;
    padding-right:20px;
    /*maak een "blokje" van de tekst*/
    display:inline-block;
    margin-top:20px;
    border-radius:16px;
}

.readmore:hover{
    color:var(--scheme0);
    background-color:white;
    border:1px solid var(--scheme0);
}


/*indeling van het main gedeelte*/
.row{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

.small{
    width:80%;
    margin:auto;
    margin-top:26px;
    margin-bottom:26px;
}

.banner{
    height:30vh;
    background-color:black;
    color:white;
    justify-content: center;
    align-items:center;
    background-image:cover;
    background-position:center;
    background-attachment: fixed;
}

#banner1{
    background-image:url(../images/product1.jpg);
}
#banner2{
    background-image:url(../images/product2.jpg);
}

.third{
    width:30%;
    padding:13px;
    min-width:300px;
}

.half{
    width:45%;
    padding:13px; 
    min-width: 500px;
}

.row article h3{
    margin-bottom:13px;
    border-bottom:1px dotted var(--cp0);
    padding-bottom:6.5px;
}

footer{
    height:200px;
    display:flex;
    justify-content: center;
    align-items:center;
}

footer a{
    color:black;
    padding-left:10px;
    padding-right:10px;
}