/* Universele instellingen voor rustige animaties en lichte kleuren */
* {
    color: #333333; /* Grijs voor de tekst overal */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Achtergronden en tekststijlen */
body {
    background-color: #ffffff; /* Witte achtergrond voor rust */
    color: #333333; /* Grijze tekst overal, behalve titels */
    font-family: "Times New Roman", Times, serif;
    line-height: 1.6;
    animation: fadeOut 5s ease-in-out forwards; /* De animatie dat de site langzaam wit wordt na 5 seconden */
}

/* Stijlen voor kopteksten (h1-h4) in wit */
h1, h2, h3, h4 {
    font-weight: 400; /* Lichtgewicht voor een serene uitstraling */
    color: white; /* Witte kleur voor belangrijke koppen */
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Stijlen voor paragraaftekst */
p {
    font-size: 16px;
    color: #7a7a7a; /* Zachte grijs tint voor minder prominente tekst */
    margin-bottom: 20px;
}

/* Achtergrond en opmaak voor secties en artikelen */
section, article {
    background-color: #ffffff; /* Witte achtergrond voor alle contentblokken */
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtiele schaduw voor diepte */
    border-radius: 8px;
}

/* Links met rustige interactie */
a {
    color: #7a7a7a; /* Grijze kleur voor links */
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    color: #333333; /* Donkergrijs bij hover */
    opacity: 0.5; /* Verminderde helderheid voor rust */
}

/* Stijlen voor afbeeldingen: zwart-wit en wazig */
img {
    filter: grayscale(100%) blur(2px); /* Zwart-wit en een zachte blur */
    transition: filter 0.3s ease;
}

img:hover {
    filter: grayscale(100%) blur(1px); /* Iets minder blur bij hover voor subtiele interactie */
}

/* Aanpassing voor divs, subtitels en minder prominente elementen */
div, span {
    color: #b3b3b3; /* Lichtgrijze kleur voor minder belangrijke tekst */
}

/* Specifieke instellingen voor een rustige laadanimering */
html {
    scroll-behavior: smooth; /* Rustige scroll-ervaring */
}


*{
animation: load 60s;
color: gray;
}

@keyframes load {
  from {opacity: 0;}
  to {opacity: 1;}
  
}

/* Voeg de tekst toe die zichtbaar moet zijn tijdens de animatie */
body::before {
    content: "ssssshhhhh"; /* De tekst die je wilt tonen */
    position: absolute;
    font-size: 10em; /* Pas de grootte van de tekst aan naar wens */
    color: black; /* Witte tekstkleur */
    opacity: 1; /* Begin met de tekst onzichtbaar */
    animation: fadeInText 6s forwards; /* De animatie die de tekst zichtbaar maakt */
    text-align: center; /* Centreer de tekst op het scherm */
    top: 50%; /* Zet de tekst in het midden van de pagina (verticale positie) */
    left: 50%; /* Zet de tekst in het midden van de pagina (horizontale positie) */
    transform: translate(-50%, -50%); /* Verplaats de tekst precies naar het midden */
  
}

/* Animatie voor het inladen van de tekst */
@keyframes fadeInText {
    0% {
        opacity: 1; /* Begin de tekst onzichtbaar */
    }
    100% {
        opacity: 2; /* Maak de tekst zichtbaar */
    }
}