@font-face {
    font-family: signika;
    src:url(typo/Signika/Signika-VariableFont_wght.ttf);

    font-family: nirmala UI;
    src: url(typo/Nirmala.ttf);
}

*{
    color: #362B1C;
    
    
}

h1{
    font-family: signika;
    font-size: 40px;
    font-weight: 500;
    line-height: 60px;
    padding: 190px -10px ;
    margin-top: 20px;
    
    text-align: center;
    
    
}
h2{
    font-family: signika;
    font-size: 23px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
   
    
}

h3{
    font-family: signika;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 20px;
}

h4{
    font-family: signika;
    font-size: 29px;
    font-weight: 350;
}

p{
    font-family: nirmala UI;
    font-size: 18px;
    letter-spacing: 2%;
    line-height: 35px ;

}


.navbar{
    background-color: #FBF3F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 25px;

}

.nav-menu{
   background-color: #F4C0B3;
   padding: 20px 30px;
   border-radius: 20px;
   box-shadow: 2px 2px #726a60;
}

.nav-menu:hover{
    background-color: #EDD3CE;
    

}


.logo{
    padding: 10px 20px;
}

a{
   
   
    font-family: signika;
    font-size: 20px;
    font-weight: 400;
    text-decoration:none;
    
}

li{
    list-style: none;
} 

.header{
    
    padding: 40px 0px 90px 30px; 
    height: 750px; 
    background-color: #f4e7e4;  
}

.mockup_home{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;

}
.bolletje1{
    display: block;
    margin-bottom: 2px;
}

.bolletje2{
    display: block;
    margin-left: 75%;
}

#wat{
    background-color:  #f8f0ef;
    padding: 10px;
    text-align: left;
    padding: 5px 50px 50px 40px;
   
}


.mockup_stem1{
    display: block;
    
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.mockup_stem2{
    display: none;
}

#wie{
    background-color:  #f8f0ef;
    padding: 20px;
    text-align: left;
    padding: 20px 50px;
}

.pregnant{
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

#download{
    background-color:  #f8f0ef;
    padding: 20px;
    text-align: center;
    padding: 20px 70px;
}

.footer{
    background-color: #4a4032;
    padding:  20px 25px 5px 5px;
    display: flex;
    align-items: center;
   
}

.contact{
    color: #FBF3F2;
    font-family: nirmala UI;
    font-size: 18px;
    margin-left: 21px;
    margin-bottom: 5px;
    flex-direction: column;
    
}

.flex2{
   height: -40px;
   margin-left: 23%;
}

.insta{
    margin-left: 5px;  
    
}

.fb{
    margin-left: 30px;
}

.footer-text{
    background-color: #4a4032;
    padding:  10px 25px 5px 20px;
    align-items: center;
}
.website {
    
    color: #FBF3F2;
    text-align: center; 
    font-family: nirmala UI;
    font-size: 13px;
    
}

.balk1{
    color: #efddd9;
    display: block;
    background-color:  #efddd9;
    
}

.balk2{
    color: #726a60;
    display: block;
    background-color:  #726a60;
}

.balk3{
    color: #efddd9;
    display: block;
    background-color:  #efddd9;
}

.balk4{
    color: #726a60;
    display: block;
    background-color:  #726a60;
}


@media(min-width:700px){

  
    .logo{
        width: 250px;
    }

    .bolletje1{
        display: block;
        margin-bottom: 2px;
    }
    .bolletje2{
        display: block;
        margin-top: -5%;
        margin-left: 88%;
    }

    .mockup_home{
        margin-top: -30px;
        margin-left: 30px;
        height: auto;
        width: 30%;
    }

    h1{
        font-size: 42px;
        font-weight: 500;
        line-height: 60px;
        text-align: left;
        padding-left: 50px;
    }

    h2{
        font-size: 19px ;
        text-align: left;
        padding-left: 70px;
    }

    h3{
        font-size: 40px;
    }

    h4{
        font-size: 30px;
    }

    p{
        font-size: 17px;
    }

    .header{
        display: block;
        padding: 40px 20px 90px 50px; 
        height: 520px;
    }

    .head{
        display: flex;
        margin-top: 50px;
    }

    #wat{
        overflow: auto;
    }

    .mockup_stem2{
        display: block;
        float: left;
        margin-right: 40px;
        margin-top: 230px;
    }

    .mockup_stem1{
        display: none;
    }

    .flexbox{
        overflow: hidden;
        margin-right: 0px;
    }

    .pregnant{
        
       
        margin-left: 120px;
        height: auto;
        width: 200px;
    }

    .flex{
        display: flex;
        margin-bottom: 30px;
    }

    .flex2{
        display: block;
        margin-left: 60%;
     }
    

    
}

@media(min-width:1340px){

    h1{
        font-size: 70px;
        font-weight: 500;
        line-height: 100px;
        padding-top: 80px;
        padding-left: 200px;
    }

    h2{
        font-size: 25px ;
        line-height: 40px;
        padding-left: 200px;
    }

    .mockup_home{
        margin-top: -80px;
        margin-left: 10px;
        height: auto;
        width: 24%;
    }

    .bolletje1{
        width: 130px;
        margin-left: 90px;
     }

    .bolletje2{
       width: 130px;
       margin-top: -2%;
       margin-left: 90%;
    }
    .header{
    
        padding: 40px 0px 40px 30px; 
        height: 730px; 
        background-color: #f4e7e4;  
    }

    .head{
        margin-top: -20px;
    }

    #wat{
        padding-top: 30px;
        padding-left: 200px;

    }

    .mockup_stem2{
        
        display: block;
        float: left;
        margin-right: 200px;
        margin-top: 100px;
        width: 340px;

    }

    #wie{
        padding-top: 80px;
        padding-left: 280px;
    }

    .pregnant{
        margin-top: -30px;
        margin-left: 500px;
        width: 250px;
    }

    .contact{
        margin-left: 100px;
    }
    .flex{
        display: flex;
        margin-bottom: 30px;
    }

    .flex2{
        
        width: 100px; 
        margin-left: 53%;
     }

     .apple{
        width: 150px; 
     }

     .playstore{

        width: 150px; 
     }

     .insta{
        margin-left: 5px;  
        
    }
    
    .fb{
        margin-left: 100px;
    }
    

}