/*voor de hele website*/
*{
  margin:0;
  line-height: 1.6;
}

/*voor dropdown menu bij informatie*/
html{
  scroll-behavior: smooth;
}

/*Dit is de lettertype van onze website*/
body{background: #fffafa;
  font-family: system-ui,'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*afstand tussen regels voor hoofdkopjes*/
h3{
  line-height: 3;
}

/*Wat hieronder staat geldt voor alle attributen <p>, en hier staat dat de kleur van de tekst 
zwart is en 20px groot is*/
p{color: rgb(0, 0, 0);
  font-size: 20px;
}

/*Dit is de id van de header*/
#header {
  text-align: center;
  background: #FFB3C6;
  padding: 50px ;
}

/*Navigatiebar*/
#navbar{
  position: sticky;
  top: 0;
  padding-bottom: 40px; 
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffcbd9;
}

#navbar li {
  float: left;
}

/*Dit zorgt ervoor dat de kopjes in de navigatiebalk de goede grootte hebben.*/
span.material-symbols-outlined{
font-size: 25px;
}

li a {
  display: block;
  text-align: center;
  padding:  14px 16px;
  text-decoration: none;
  font-size: 20px;
}

/*Dit is de kleur van de letters van de link op de navigatiebalk*/
li a:link {
  color:rgb(0, 0, 0);
}

/*Dit is als je met je muis over de navigatiebalk gaat, krijg je de kleur die hieronder staat.*/
 li a:hover {
  Background-color: #f4a6bc;
}

/*De dropdown bij "informatie"*/
li.dropdown{
  display: inline-block;
}

.dropdown-content {
 display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*Dit is de id van de telefoon in contact.*/
#telefoon ul {
  list-style-type: none;
}

/*Dit is de id van de tabel bij over ons*/
 td{
  border: 3px #FFB3C6 solid;
  background-color:#FFE5EC ;
  border-radius: 10px;
  padding: 30px;
  
}

/*De tabel instellingen*/
table{
  width: 100%;
  border-spacing: 30px;
  
}

/*De instellingen van de plaatjes van onze leden bij "over ons"*/
#leden img{
  width: 100px;
  height: 150px;
}

/*plaatje en tekst bij home en informatie*/
div.oh h1{
  text-align: center;
  background-color: #fff1f1;
  position: absolute;
  width: 100%;
  
}

div.eh, #vrouw{
  margin-top: 50px;
  border-radius: 50px;
}

/* Bij deze id's zorgt deze instelling ervoor dat er de box roze wordt, met een donkerroze schaduw en ronde hoeken*/
#feminisme, #geschiedenis, #opgericht, #moties, #mail, #telefoon, #adres, #fotograaf, #beleidsmedewerker, #adviseur, #ledenvergaderingen, #form {
  border: solid 2px #FFE5EC;
  padding: 20px;
  margin: 120px 100px;
  border-radius: 25px;
  background-color: #FFE5EC;
  box-shadow: 10px 15px #FFB3C6;
  font-size: 20px;
  text-align: center;
  width: 75% ;
}

/*Dit is de id van quote op de homepage, waardoor het zorgt voor een roze box met schaduw en ronde randen.*/
#quote{
  width: 400px;
  padding: 50px;
  border: solid 2px #ffe5f3;
  margin-left: 350px;
  border-radius: 25px;
  background-color: #ffe5f3;
  box-shadow: 10px 15px #e98bba;
  text-align: center;
  margin-top: 75px;
}

/*Dit is het plaatje van de handen op de homepage*/
#hand{
  height: 200px;
  margin-left: 10px;
  border-radius: 25px;
  margin-top: 75px;
}

/*Dit is de id van het welcome plaatje in de homepage, en het zorgt ervoor dat het plaatje rechts blijft, en ronde randen heeft*/
#welcome{
  float: right;
  border-radius: 25px;
}

/*Hieronder staan de codes voor de tekstboxen voor het formulier bij vacatures*/
input[type=text] {
  width: 70%;
  margin: 5px;
  padding: 5px;
}

input[type=email] {
  width: 70%;
  margin: 5px;
  padding: 5px;
}

input[type=areatext] {
  width: 80%;
  height: 150px;
  padding: 0px;
}

/*Hiermee wordt de tekst in het midden gezet.*/
#tekst, #informatie, #contact{
  text-align: center;
}

/*Hieronder staan de id's van de nieuwsartikelen (met aparte id's), waarbij de grootte is aangepast, een roze rand, en de hoeken zijn rond gemaakt.*/
 #collage-nieuws{
  width: 100%;
  margin-bottom: 100px;
}

 #salarissen, #stem, #kamerlid{
  width: 27%;
  border: 10px solid lightpink;
  padding: 0px;
  border-radius: 25px;
  box-shadow: 10px 15px #e98bba; 
  margin: 5% 1% ;
 }

/*ruimte tussen de regels bij solicitatieformulier*/
#sollicitatie label{
  line-height: 2;
}

/*Dit is voor de poster op de homepagina met de tekst 'join our team'.*/
#join{
  width: 300px; 
  float: right;
  
}

/*Dit is voor de submit button bij het formulier bij vacatures.*/
#submit {
  width: 200px;
  height: 50px;
  background-color:#FFB3C6;
  border: 3px solid #f38ba5
}

/*Dit is voor de tekst 'onze missie' op de homepagina, hierdoor komt het in het midden te staan.*/
#missie {
  text-align: center;
}

/*Dit zijn de plaatjes op de homepage die aangepast worden.*/
#school {
  width: 150px;
}

#rechten {
  float: left;
  width: 150px;
}

#welcome {
  width: 300px;
}

#geweld {
  width: 150px;
  float: right;
}

/*Dit zorgt ervoor dat de tekst bij de poster op de homepagina in het midden komt te staan.*/
#team {
  text-align: center;
}

/*Dit is de id van de footer, waarbij de kleur is aangepast, de randen zijn rond, en de tekst in het midden. */
footer{
  background: #FFB3C6;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  text-align: center;
  margin-top: 100px;

}

/*Hiermee is het tekst in de tabel bij "over ons" in het midden gezet*/
td{
  text-align: center;
}