body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: #000000;
    padding: 10px;
}

.logo {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    grid-column: 1 / span 1;
    align-self: center;
}

.nav-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    grid-column: 2 / span 1;
    display: grid;
    grid-auto-flow: column;
    gap: 20px;
    justify-self: center;
    margin-top: 10px;
    margin-left: 60px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-links li a:hover {
    color: #B80C09;
}

.contactBT {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    grid-column: 12 / span 1;
    align-self: center;
    border: 2px solid #B80C09;
    padding: 7px 20px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #B80C09;
}



.main {
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: minmax(100px, auto);
    background: linear-gradient(to bottom, rgb(184, 12, 9, 0.3),  rgb(12, 11, 11, 1)), #0C0B0B; /* Lineaire gradient van rood naar grijs van boven naar beneden */
    justify-content: center;
}

.text {
    margin-top: 10em;
    margin-bottom: 10em;
    justify-self: center;
}

h1 {
    font-weight: bolder;
    color: rgb(255, 255, 255);
    font-size: 55px;
    margin: 0; 
    margin-top: 20px;
    text-align: center;
}

h3 {
    color: #B80C09;
    font-size: 17px;
    margin: 0;
    margin-top: 1em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}






.cvinfo{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, auto);
    background-color: #1C1C1C;
}

.contactmove{
    grid-column: 12;
    margin-top: 2em;
}
.contactBT2 {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    align-self: center;
    border: 2px solid #B80C09;
    padding: 7px 20px;
    border-radius: 10px;
    cursor: pointer;
    background-color: #B80C09;
}

.Overmij{
    grid-column: 2/ span 4;
    grid-row: 2;
    margin-top: 7em;
}

.Overmij h6{
    font-weight: bold;
    color: #f0f0f0;
    font-size: 30px;
    border-bottom: 2px solid #B80C09;
    padding-bottom: 20px;
    background: linear-gradient(to top, 
  rgb(184, 12, 9, 0.6) 0%, /* Eerste kleurstop op 50% van de hoogte */
  rgb(28, 28, 28, 0.1) 30%, /* Tweede kleurstop op 50% van de hoogte */
  #1C1C1C
)
}


.lijst3{
    margin-top: 1em;
    margin-bottom: 4em;
    grid-column: 2;
    grid-row: 3;
}

.lijst3 h5{
    color: #D0CCD0;
    grid-column: 2;
}

.lijst4{
    margin-top: 1em;
    grid-column: 5;
    grid-row: 3;
}

.lijst4 h5{
    text-align: end;
    color: #D0CCD0;
}



.Talen{
    grid-column: 2/ span 4;
    grid-row: 4;
}

.Talen h6{
    font-weight: bold;
    color: #f0f0f0;
    font-size: 30px;
    border-bottom: 2px solid #B80C09;
    padding-bottom: 20px;
    background: linear-gradient(to top, 
  rgb(184, 12, 9, 0.6) 0%, /* Eerste kleurstop op 50% van de hoogte */
  rgb(28, 28, 28, 0.1) 30%, /* Tweede kleurstop op 50% van de hoogte */
  #1C1C1C
)
}

.lijst1{
    margin-top: 1em;
    grid-column: 2;
    grid-row: 5;
}

.lijst1 h5{
    color: #D0CCD0;
    grid-column: 2;
}

.lijst2{
    margin-top: 1em;
    grid-column: 5;
    grid-row: 5;
}

.lijst2 h5{
    text-align: end;
    color: #D0CCD0;
}



.Profiel{
    grid-column: 8/ span 4;
    grid-row: 2;
    margin-top: 7em;
}

.Profiel h6{
    font-weight: bold;
    color: #f0f0f0;
    font-size: 30px;
    border-bottom: 2px solid #B80C09;
    padding-bottom: 20px;
    background: linear-gradient(to top, 
  rgb(184, 12, 9, 0.6) 0%, /* Eerste kleurstop op 50% van de hoogte */
  rgb(28, 28, 28, 0.1) 30%, /* Tweede kleurstop op 50% van de hoogte */
  #1C1C1C
)
}

.profieltekst{
    margin-top: 1em;
    grid-column: 8 / span 4;
    grid-row: 3 /span 5;
    color: #D0CCD0;
}



.cvbutton{
    margin-top: 8em;
    margin-bottom: 5em;
    grid-column: 6 / span 2;
    grid-row: 6;
    justify-self: center;
}

.cv {
    background-color: #B80C09;
    padding: 12px 30px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    border-radius: 15px;
    font-weight: bold;
    border: 2px solid #B80C09;
    font-size: 15px;
}

.icons {
    color: #9B9B9B;
    grid-column: 8/ span 3;
    grid-row: 5;
}

.icons nav ul {
    padding: 0;
    margin: 0;
}

.icons nav ul li {
    display: inline-block;
    margin-right: 1em;
    list-style-type: none;
}

footer{
    background-color: black;
}


footer .footercards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    gap: 20px;
}

.web{
    margin-top: 20px;
    margin-left: 20px;
}

.web h6{
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 7px;
}

.web ul li{
    margin-bottom: 7px;
}

.web ul li a{
    text-decoration: none;
    color: #9B9B9B;
}

.web ul li a:hover{
    padding-left: 10px;
}



.socials{
    margin-top: 20px;
    margin-left: 20px;
}

.socials h6{
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 7px;
}

.socials ul li{
    margin-bottom: 7px;
}

.socials ul li a{
    text-decoration: none;
    color: #9B9B9B;
}

.socials ul li a:hover{
    padding-left: 10px;
}



.voorwaarden{
    margin-top: 20px;
    margin-left: 20px;
}

.voorwaarden h6{
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 7px;
}

.voorwaarden ul li{
    margin-bottom: 7px;
}

.voorwaarden ul li a{
    text-decoration: none;
    color: #9B9B9B;
}

.voorwaarden ul li a:hover{
    padding: 10px;
}

.footerct{
    margin-top: 20px;
    margin-left: 20px;
}

.footerct h6{
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 7px;
}

.footerct ul li{
    margin-bottom: 7px;
}

.footerbutton{
    background-color: #FFFFFF;
    padding: 7px 70px;
}


/* Originele CSS-regels */

/* Hier staan de regels voor de desktopweergave */


/* Media query voor schermen met een maximale breedte van 600px */
@media only screen and (max-width: 600px) {
    .navbar {
        grid-template-columns: 1fr; /* Zet de navigatiebalk op één kolom voor mobiele weergave */
        grid-template-rows: auto auto; /* Zorg ervoor dat de hoogte zich aanpast aan de inhoud */
        justify-content: center; /* Centreer de items in de navigatiebalk */
    }
    
    .nav-links {
        grid-column: 1; /* Zet de navigatielinks op één kolom */
        grid-row: 2; /* Plaats de navigatielinks onder de logo */
        text-align: center; /* Centreer de tekst van de navigatielinks */
        margin: 0;
    }
    
    .contactBT {
        grid-column: 1; /* Zet de contactknop op één kolom */
        grid-row: 3; /* Plaats de contactknop onder de navigatielinks */
        margin-top: 20px; /* Voeg wat ruimte toe aan de bovenkant */
        justify-self: center; /* Centreer de contactknop */
    }
    
    .main {
        grid-template-columns: 1fr; /* Zet de hoofdinhoud op één kolom voor mobiele weergave */
        grid-gap: 20px; /* Verminder de ruimte tussen de grid-items */
        margin: 0;
    }
    
    .text {
        margin-top: 5em; /* Pas de bovenste marge aan voor mobiele weergave */
        grid-column: 1;
        margin-left: 2em;
    }
    

    .cvinfo {
        grid-template-columns: 1fr; /* Overschrijf de grid-template-columns voor de gewenste viewport-grootte */
        grid-template-rows: auto;
        margin: 0;
    }

    .contactmove{
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }



    .Profiel{
        grid-column: 1;
        grid-row: 2;
        margin-left: 7em;
        margin-right: 7em;
        text-align: center;
    }
    .profieltekst{
        grid-column: 1;
        grid-row: 3;
        margin-left: 4em;
        margin-right: 4em;
        text-align: center;
    }

    .Overmij{
        grid-column: 1;
        grid-row: 4;
        margin-left: 7em;
        margin-right: 7em;
        text-align: center;
    }

    .lijst3{
        grid-column: 1;
        grid-row: 5;
        margin-left: 7em;
        margin-right: 7em;
    }

    .lijst4{
        grid-column: 1;
        grid-row: 5;
        margin-left: 7em;
        margin-right: 7em;
    }

    .Talen{
        grid-column: 1;
        grid-row: 6;
        margin-left: 7em;
        margin-right: 7em;
        text-align: center;
    }

    .lijst1{
        grid-column: 1;
        grid-row: 7;
        margin-left: 7em;
        margin-right: 7em;
    }

    .lijst2{
        grid-column: 1;
        grid-row: 7;
        margin-left: 7em;
        margin-right: 7em;
    }

    .cvbutton{
        grid-column: 1;
        grid-row: 8;
    }

    .icons{
        grid-column: 1;
        grid-row: 9;
        justify-self: center;
        margin-bottom: 2em;
    }






    /* Alle stijlen voor de footer */

    footer {
    background-color: black;
    }

    /* Stijlen voor de footercards */

    footer .footercards {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    width: 100%;
    gap: 20px;
    margin: 0;
    }

}