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

header{
    background:#333;
    color:white;
    padding:20px;
    text-align:center;
}

nav{
    display:flex;
    justify-content:center;
    background:#555;
}

nav a{
    color:white;
    padding:15px;
    text-decoration:none;
}

nav a:hover{
    background:#777;
}

main{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
    padding:20px;
}

.card{
    background:#eee;
    padding: 40px;
    text-align:justify;
    border-radius:20px;
}

footer{
    background:#333;
    color:white;
    text-align:center;
    padding:20px;
}

/* Tablet */
@media (max-width: 900px){
    main{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Telefoon */
@media (max-width: 600px){
    nav{
        flex-direction:column;
        text-align:center;
    }

    main{
        grid-template-columns: 1fr;
    }
}