body {
background-color: #111;
color: white;
font-family: Arial, sans-serif;
}
 
/* Navigatie */
nav {
background-color: #ff1493;
color: black;
text-align: center;
border-bottom: 5px solid #c9ff00;
}
 
nav h2 {
font-size: 28px;
}
 
nav a {
display: inline-block;
color: black;
text-decoration: none;
font-weight: bold;
border-left: 2px solid black;
}
 
nav a:hover {
background-color: #00e5ff;
}
 
/* Algemene hero-opmaak */
.hero {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-bottom: 8px solid black;
overflow: hidden;
}
 
.hero h1 {
font-size: 80px;
line-height: 0.8;
text-transform: uppercase;
color: #c9ff00;
text-shadow: 8px 8px #ff1493;
}
 
.hero p {
background-color: black;
color: white;
border: 4px solid #00e5ff;
font-size: 18px;
}
 
.hero a {
display: inline-block;
background-color: #ff6b00;
color: black;
text-decoration: none;
font-weight: bold;
border: 3px solid black;
}
 
/* Eerste hero */
.hero-een {
background-color: #8a2be2;
transform: rotate(-1deg);
}
 
/* Tweede hero */
.hero-twee {
background-color: #00e5ff;
color: black;
transform: rotate(1deg);
}
 
.hero-twee h2 {
font-size: 70px;
color: #ff1493;
text-shadow: 6px 6px #c9ff00;
}
 
.hero-twee p {
background-color: #ff1493;
color: black;
border: 4px solid black;
}
 
/* Bewegende tekst */
.lopende-tekst {
overflow: hidden;
background-color: #c9ff00;
color: black;
font-size: 28px;
font-weight: bold;
white-space: nowrap;
border-top: 5px solid black;
border-bottom: 5px solid black;
}
 
.lopende-tekst span {
display: inline-block;
animation: bewegen 12s linear infinite;
}
 
@keyframes bewegen {
from {
transform: translateX(100%);
}
 
to {
transform: translateX(-100%);
}
}
 
/* Kaarten */
.kaarten {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 8px solid black;
}
 
.kaart {
min-height: 220px;
color: black;
border: 4px solid black;
font-weight: bold;
transform: rotate(-2deg);
}
 
.kaart h3 {
font-size: 34px;
}
 
.kaart p {
font-family: monospace;
font-size: 15px;
}
 
.kaart:nth-child(1) {
background-color: #ff1493;
}
 
.kaart:nth-child(2) {
background-color: #c9ff00;
transform: rotate(3deg);
}
 
.kaart:nth-child(3) {
background-color: #ff6b00;
transform: rotate(-4deg);
}
 
.kaart:nth-child(4) {
background-color: #00e5ff;
transform: rotate(2deg);
}
 
.kaart:nth-child(5) {
background-color: #8a2be2;
color: white;
transform: rotate(-3deg);
}
 
.kaart:nth-child(6) {
background-color: white;
transform: rotate(4deg);
}
 
/* Grote tekstsectie */
.manifest {
min-height: 400px;
background-color: #ff3030;
color: black;
border-bottom: 8px solid black;
text-align: center;
}
 
.manifest h2 {
font-size: 80px;
line-height: 0.8;
text-transform: uppercase;
transform: rotate(-4deg);
}
 
.manifest p {
display: inline-block;
max-width: 600px;
background-color: white;
border: 5px solid black;
font-family: monospace;
font-size: 18px;
transform: rotate(3deg);
}
 
/* Cijfers */
.cijfers {
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: #c9ff00;
color: black;
border-bottom: 8px solid black;
}
 
.cijfer {
min-height: 150px;
border-right: 4px solid black;
text-align: center;
}
 
.cijfer strong {
display: block;
font-size: 55px;
}
 
.cijfer span {
font-family: monospace;
font-size: 14px;
}
 
/* Footer */
footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
min-height: 200px;
background-color: black;
color: white;
}
 
footer div {
border-right: 2px solid white;
}
 
footer h3 {
color: #00e5ff;
font-size: 25px;
}
 
footer a {
display: block;
color: white;
text-decoration: none;
font-family: monospace;
}
 
footer a:hover {
background-color: #ff1493;
color: black;
}