/*<!-- sorry, had me css perongeluk verwijderd dus ik heb het meeste code terug moeten halen met ai, mijn excuus het is wel gelukt om alles bijna hetzelfde te hebben-->*/ 
body{
margin:0;
font-family:Arial,sans-serif;
background:linear-gradient(to right,#000000,#ffffff);
}

/* Headers */
h1{
color:black;
text-shadow:2px 2px;
}
h2{
color:white;
}

/* Header en navigatie */
header{
background:black;
height:120px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 10%;
}
.logo{
font-size:50px;
font-weight:bold;
color:white;
text-decoration:none;
display:inline-block;
transition:transform 0.3s;
}
.logo:hover{
transform:scale(1.2);
cursor:pointer;
}
.logo:active{
transform:scale(1.3);
}
nav a{
text-decoration:none;
margin-left:20px;
}
.navbtn{
background:white;
color:black;
padding:10px 20px;
border-radius:20px;
font-weight:bold;
text-decoration:none;
}
.navbtn:hover{
background:black;
color:white;
}

/* Hero sectie */
.hero{
height:80vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}
.hero h1{
font-size:48px;
margin-bottom:20px;
}
.hero p{
font-size:18px;
margin-bottom:30px;
}
.button{
background:white;
color:black;
padding:12px 25px;
text-decoration:none;
border-radius:25px;
font-weight:bold;
cursor:pointer;
display:inline-block;
transition:0.3s;
}
.button:hover{
background:black;
color:white;
}

/* Secties */
.section{
padding:60px 10%;
text-align:center;
background:#111;
color:white;
}

/* Features / Boxes */
.features{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
margin-top:30px;
}
.box{
background:linear-gradient(to right,#acacac,#ffffff);
padding:25px;
width:250px;
margin:15px;
border-radius:10px;
color:black;
}

/* Portfolio */
.portfolio-container{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:40px;
margin-top:20px;
margin-bottom:40px;
}
.portfolio-text{
flex:1 1 300px;
text-align:center;
color:white;
}
.portfolio-text ul{
list-style:none;
padding:0;
}
.portfolio-text li{
margin:10px 0;
}
.portfolio-image img{
width:600px;
height:auto;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,0.5);
}

/* Video */
.video-container{
text-align:center;
margin:30px 0;
}
.video-container video{
width:90%;
height:90%;
max-height:700px;
max-width:400px;
border-radius:15px;
box-shadow:0 5px 25px rgba(0,0,0,0.6);
}

/* Tables */
table{
width:100%;
border-collapse:collapse;
margin:20px 0;
color:white;
}
th, td{
border:1px solid white;
padding:10px;
text-align:center;
}
th{
background:black;
}

/* Footer */
footer{
text-align:center;
padding:20px;
background:black;
color:white;
}
video{
max-width:100%;
display:block;
margin:auto;
border-radius:10px;
}