@charset "utf-8";
/* CSS Document */


.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
/* reset */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Segoe UI', sans-serif;
  background:#0f1117;
  color:#fff;
}

/* grid achtergrond */
body::before {
  content:"";
  position:fixed;
  width:100%;
  height:100%;
  background-image: radial-gradient(#444 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.08;
  z-index:-1;
}

/* menu */
nav {
  display:flex;
  justify-content:space-between;
  /* padding:20px 60px; */
  padding:20px 0;
  background:#0d0f14;
}

nav h1 { font-size:18px; }

nav ul {
  list-style:none;
  display:flex;
  gap:25px;
}

nav a {
  text-decoration:none;
  color:#aaa;
  font-size:14px;
}

nav a:hover { color:#a855f7; }

/* hero */
.hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* padding:100px 60px; */
  padding:100px 0;
}

.hero h2 {
  font-size:32px;
  margin-bottom:20px;
}

.hero span { color:#a855f7; }

.hero p {
  color:#aaa;
  margin-bottom:20px;
}

button {
  border:1px solid #a855f7;
  background:transparent;
  color:#fff;
  padding:10px 20px;
  cursor:pointer;
}

button:hover {
  background:#a855f7;
}

.btn {
  display: inline-block;
  border: 1px solid #a855f7;
  background: transparent;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;

}

.btn:hover {
  background: #a855f7;
}

/* sections */
section { 
	
	/* padding:60px; */
	padding:60px 0;
}

h2.section-title {
  margin-bottom:30px;
  color:#a855f7;
}

/* projecten */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.card {
  border:1px solid #2a2f3a;
  background:#161922;
  padding:20px;
  transition:0.3s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  border-color:#a855f7;
  transform:translateY(-5px);
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin: 15px 0;
}

.card h3 { margin-bottom:10px; }
.card p { color:#aaa; font-size:13px; }

		
/* skills */

.h3skills{
	margin-bottom: 10px;
	margin-top: 10px;
}

.skills {
  display:flex;
  gap:30px;
  flex-wrap: wrap
}

.skill-box {
  border:1px solid #2a2f3a;
  padding:15px;
}
/* kleur voor de randen */
	.ms365{border:1px solid #00A4EF; padding:15px;}
	.htmlcss{border:1px solid #E34F26; padding:15px;}
	.photoshop{border:1px solid #31A8FF; padding:15px;}
	.illustrator{border:1px solid #FF9A00; padding:15px;}
	.cisco{border:1px solid #1BA0D7; padding:15px;}
	.windows{border:1px solid #0078D6; padding:15px;}
	.linux{border:1px solid #FCC624; padding:15px;}
	.redhat{border:1px solid #EE0000; padding:15px;}
	.python{border:1px solid #3776AB; padding:15px;}
	.c{border:1px solid #A8B9CC; padding:15px;}
	.msoffice{border:1px solid #D83B01; padding:15px;}

	.skill-box, 
	.ms365, 
	.htmlcss, 
	.photoshop, 
	.illustrator, 
	.cisco, 
	.windows, 
	.linux, 
	.redhat, 
	.python, 
	.c, 
	.msoffice {
  		padding: 10px;
  		font-size: 10px;
  		border-radius: 6px;
		width: auto;
		height: auto;
}

	/* kleur voor hover effect */
	.ms365:hover{ background-color: #00A4EF; color: black;}
	.htmlcss:hover{background-color: #E34F26; color: black;}
	.photoshop:hover{background-color: #31A8FF; color: black;}
	.illustrator:hover{background-color: #FF9A00; color: black;}
	.cisco:hover{background-color: #1BA0D7; color: black;}
	.windows:hover{background-color: #0078D6; color: black;}
	.linux:hover{background-color: #FCC624; color: black;}
	.redhat:hover{background-color: #EE0000; color: black;}
	.python:hover{background-color: #3776AB; color: black;}
	.c:hover{background-color: #A8B9CC; color: black;}
	.msoffice:hover{background-color: #D83B01; color: black;}
	
/* over mij */
.about {
  display:flex;
  gap:40px;
  align-items:center;
}

.about img {
  max-width:250px;
}

/* onderaan de pagina */
footer {
  /* padding:20px 60px; */
  padding:20px 0;
  border-top:1px solid #2a2f3a;
  color:#aaa;
  display:flex;
  justify-content:space-between;
}


.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn2 {
  padding: 10px 18px;
  border: 1px solid #a855f7;
  text-decoration: none;
  color: white;
  font-size: 14px;
  transition: 0.3s;
}

/* Hover effect */
.btn2:hover {
  background: #a855f7;
  color: black;
}