/* Ik gebruik voor iedere pagina een andere CSS! Omdat iedere pagina een andere lengte heeft, heb ik voor iedere pagina voor de aside tags een andere height */

/* het gebruiken van deze soort commentaar heb ik geleerd van w3 schools */
body { 
  background-image: url("../images/WebsiteAchtergrond3.jpg"); 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-size: 100% 100%; 
} 

/* de instellingen voor hoe alle imgs eruit zien */
img {
  border-radius: 15px;
  border: 3px solid black;
}

/* dit is de balk zelf */
nav { 
  width: 1330px; 
  padding-top: 20px; 
  padding-bottom: 20px; 
  background-color: #FFFFFF; 
  border-radius: 15px; 
  border: 3px solid black; 
  margin: 0 auto; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 

/* ik heb voor de balk en knop ChatGPT gevraagt, hoe ik het precies in het midden kon krijgen. ChatGPT wees aan welke tags handig zou zijn om toe te voegen, en legde uit hoe het werkt en ook waarom het zo werkt */

nav ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  gap: 50px; 
} 

nav li { 
  display: inline-block;  
} 

/* dit is voor de knoppen */
nav a:link, 
nav a:visited { 
  font-weight: bold; 
  color: black; 
  background-color: #B3D8F7; 
  border: 2px #033 ridge; 
  border-radius: 10px; 
  width: 180px; 
  text-align: center; 
  padding: 4px; 
  text-decoration: none; 
} 

/* dit is voor wanneer de cursor, hovered boven de knoppen */
nav a:hover, 
nav a:active { 
  background-color: #5F9ED2; 
  color: white; 
} 

/* hieronder de instellingen voor alle tekstsoorten */
p { 
  font-family: "DejaVu Sans Mono", monospace; 
}

h1 { 
  font-family: "FreeMono", monospace; 
}

h2 { 
  font-family: "FreeMono", monospace; 
}

li {
	font-family: "DejaVu Sans Mono", monospace; 
}

footer {
	font-family: "DejaVu Sans Mono", monospace; 
}

/* dit is voor de bovenste balk, de header */
#logo {  
             height: 64px;
             float: right;
}
#kop {  
            background: white;
            height: 64px;
            text-align: center;
            padding-top: 1px;
			border-radius: 15px;
			border: 3px solid black;
}

/* dit is voor de formulier */

form {
    font-family: "DejaVu Sans Mono", monospace;
}

label {
    font-family: "DejaVu Sans Mono", monospace;
}

input {
    font-family: "DejaVu Sans Mono", monospace;
}

textarea {
    font-family: "DejaVu Sans Mono", monospace;
}

select {
    font-family: "DejaVu Sans Mono", monospace;
}

/* in plaats van één aside te gebruiken, gebruik ik er twee als een class */
aside.left {  
			background: silver;
			float: left;
			width: 15px;
			height: 900px;
			margin-left: 10px;
			padding: 5px;
			opacity: 0;
}

aside.right {  
			background: silver;
			float: right;
			width: 150px;
			height: 900px;
			margin-right: 10px;
			padding: 5px;
			opacity: 0;
}

/* en dit is de footer */
footer {  
		   background: white;
           height: 50px;
           clear: both;
		   border-radius: 15px;
	       border: 3px solid black;
}