article { 
    box-sizing: border-box;
    padding-top: 35px;
    height: 670px;
	background-color: #000;
  color: white;
    text-align: center;  
	}


  article p {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 36px;
    border: solid red;
    border-radius: 30px;
    color: green;
    left: 50%;
    animation: animateRadius 10s infinite;
  }
  
    article h4 {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 36px;
    border: solid white;
    border-radius: 30px;
    color: red;
    left: 50%;
    animation: animateRadius 10s infinite;
  }
  
  article h3 {
		display: block;
		padding-top: 105px;
		width: 100%;
		font-size: 20px;
		color: red;
		text-align: center;
		font-style: italic;
  }
	
  
  @keyframes animateRadius {
    0% { border-radius: 30px red;}
    50% { border-radius: 50px red; }
    100% { border-radius: 30px red; }
  }

.inloggen {
  box-sizing: border-box;
  width: 190px;
  height: 50px;
    position: absolute;
    top: 420px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    border: 2px solid #EBECF1;
    border-radius: 30px;

}
.inloggen a {
text-align: center;
text-decoration: none;
   font-family: Georgia, serif;
  font-size: 30px;
  padding-top: 0px;
  padding-left: 15%;
  position: absolute;
  color:#2375D8;
}

.inloggen a:hover {
text-align: center;
  font-family: Georgia, serif;
  font-size: 30px;
  padding-top: 0px;
  padding-left: 15%;
  position: absolute;
  color:white;

}

  
.container {
 border: 1px solid black;
      padding-top: 0%;
      height: 130px;
      position: relative;     
    }
	
.button {
  border: none;
  color: navy;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Georgia, serif;
  font-size: 50px;
  margin: 100px 2px;
  transition-duration: 3.0s;
  cursor: pointer;
}

.button1 {
  position: absolute;
  right: 55%;
  transform: translateY(-50%);
  background-color: white;
  color: black;
  border: 2px solid red;
  animation: blink 5s infinite;
}

@keyframes blink {
  0% { border-color: red; }
  50% { border-color: white; }
  100% { border-color: red; }
}

.button1:hover {
  transform: translate(0, -45px) rotate(-360deg);
  background-color: red;
  color: white;
  border: 2px solid white;
  animation: blink 5s infinite;
}

@keyframes blink {
  0% { border-color: red; }
  50% { border-color: white; }
  100% { border-color: red; }
}


.button2 {
  position: absolute;
  left: 55%;
  transform: translateY(-50%);
  background-color: white;
  color: black;
  border: 2px solid red;
  animation: blink 5s infinite;
}

@keyframes blink {
  0% { border-color: white; }
  50% { border-color: red; }
  100% { border-color: white; }
}


.button2:hover {
  transform: translate(0, -45px) rotate(360deg);
  background-color: red;
  color: white;
  border: 2px solid white;
  animation: blink 5s infinite;
}

@keyframes blink {
  0% { border-color: white; }
  50% { border-color: red; }
  100% { border-color: white; }
}


article img {
    max-width: 100%;
	margin-left: 400px;
	margin-top: 50px;
}


article ul, #hoofdvak ol {
    list-style-position: outside;
    margin-left: 2em;
	color: yellow;
}

article h1 {
    color: white;
	  margin-top: 150px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 2.5em;
    font-variant: small-caps;
    text-align: center;
}

article h2 {
  	margin-top: 70px;
    color: white;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 2.5em;
    font-variant: small-caps;
    text-align: center;
   
}