/* lettertype*/
@font-face {
    font-family: "coolvetica";
    src: url(../fonts/Coolvetica\ Rg.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}

/*  achtergrondkleur */
body {
    background-color: #e0f2f1; 
    margin: 0;
    height: 100vh; 
}

/*header en navigatie */
header{
    background-color: #ffffff;
    color: white;
    padding: 10px;
    text-align: right;
}
body {
    font-family: "coolvetica"; 
}
nav ul{
    list-style-type: none; 
    padding: 0;
}

nav ul li {
    display: inline; 
    margin: 5px; 
}

nav ul li a {
    color: #c0b8b8; 
}

nav ul li a:hover {
    text-decoration: underline; 
}

/* home page tekst */ 
.text-box {
width: 90%;
color: #3d3a3a;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 40px;
color: #3d3a3a;
transform: translate( 50%, 50%);
text-align: center;
}


/* projecten*/
.projecten {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(2000px, 1fr)); 
    gap: 20px; 
    padding: 20px; 
    width: 100%;
    margin: 0%;
}

.projecten img {
    width: 100%; 
    height: auto; 
    border-radius: 5px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s;
}

.projecten img:hover {
    transform: scale(1.05); 
}
    /* over mij */

    .overmij {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 20px; 
    }
    
    img {
        max-width: 20%; 
        height: auto; 
    }
    
    p {
        max-width: 50%; 
        text-align: left; 
        font-size: 2rem; 
    }
/* contactformulier */
    .contact-form {
        background-color: #ffff;
        border: 0px solid #ddd; 
        border-radius: 20px;
        padding: 20px;
        max-width: 600px; 
        margin: 20px auto; 
    }
    
    .contact-form h2 {
        margin-top: 0px; 
    }

.contact-form label {
    display: block; 
    margin: 5px 0 5px; 
}

.contact-form input,
.contact-form textarea {
    width: 100%; 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 10px; 
}

.contact-form button {
    background-color: #e0f2f1; 
    color: white; 
    border: none; 
    padding: 10px 15px; 
    border-radius: 20px; 
    cursor: pointer; 
}

.contact-form button:hover {
    background-color: #5533bc;
}