/***************************************
1. Universal Styles
2. Font styles and size
3. Media Queries
****************************************/

/***************************************
****************************************
COLOR GUIDE:



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


/***************************************
****************************************
1. Universal Styles
****************************************
****************************************/
body {
    background: linear-gradient(darkslategrey, #556B2F);
    margin: 0 auto;
    max-width: 75%;
}
li {
    list-style: none;
}
#profilePicture {
    width: 370px;
    height: 280px;
}
.bordertest {
    border:red solid 1px;
}

/***************************************
****************************************
2. Font styles and size
****************************************
****************************************/
.bg-button-color {
    background-color: darkslategrey;
}




/***************************************
****************************************
3. Styles and captions
****************************************
****************************************/
h4 {
    font-family: 'Cairo', sans-serif;
    font-size: 1.8em;
}
li, p, a, img {
    font-family: 'Inter', sans-serif;
}

/***************************************
****************************************
3. Media Queries
****************************************
****************************************/
/** Media query till 449 pixels**/
@media (max-width: 449px){  
    body {
        max-width: 90%;
    }
    ul {
        padding-left: 0%;
    }
    #profilePicture {
        width: 280px;
        height: 220px;
        margin: 0 auto;
    }
    #talen, #skills {
        font-size: 0.8em;
}
    .wider-col {
        padding-left: 0.5em;
    }
    #linkedin-certificaat {
        visibility: hidden;
    }
}
/** Media query after 450 pixels**/
@media (min-width:450px) { 
    body {
        max-width: 75%;
    }
    #profilePicture {
        width: 325px;
        height: 225px;
        margin: 0 auto;
}
    #talen, #skills {
        font-size: 1em;
}
    .wider-col {
        padding-left: 3em;
    }
}
/** Media query till 650 pixels**/
@media (max-width: 650px) {
    #linkedin-certificaat {
        visibility: hidden;
    }
}
/* Responsive till 15.6 inch laptop*/
/** Media query after 1200 pixels**/
@media (min-width:1200px){ 
    #profilePicture {
        width: 300px;
        height: 220px;
        margin: 0 auto;
    }
    .wider-col {
        padding-left: 1em;
    }
    #talen, #skills {
        font-size: 1em;
    }
}

/* Responsive till 23 inch Monitor*/
/** Media query after 1600 pixels**/
@media (min-width:1600px){ 
    #profilePicture {
        width: 370px;
        height: 280px;
        margin: 0 auto;
    }
}