/*  Algemene pagina-instellingen  */
body {
    font-family: Arial, Helvetica, sans-serif; /* Standaard lettertype voor de hele site */
    line-height: 1.6;                          /* Regelafstand voor betere leesbaarheid */
    color: #333;                               /* Donkergrijze tekstkleur */
    background-color: #fdfdfd;                 /* Lichtgrijze achtergrond */
}

/*  Navigatiebalk  */
.navbar {
    padding: 0.8rem 1rem; /* Binnenruimte rondom de navbar */
}

.navbar .nav-link {
    color: #333;                 /* Tekstkleur van navigatielinks */
    transition: color 0.3s;      /* Zachte overgang wanneer kleur verandert */
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #0d6efd;              /* Blauwe kleur bij hover of actieve link */
    font-weight: 600;            /* Iets dikkere tekst voor nadruk */
}

/*  Knoppen met hover-effect */
.btn-hover {
    transition: all 0.3s ease;   /* Alle veranderingen verlopen vloeiend */
}

.btn-hover:hover {
    background-color: #0056b3;   /* Donkerdere blauwe kleur bij hover */
    box-shadow: 0 0.25rem 0.375rem #00000026; /* Subtiele schaduw (diepte-effect) */
}

/* Extra ruimte voor vaste navbar  */
.pt-navbar {
    padding-top: 6.25rem; /* Zorgt dat content niet onder navbar valt */
}

/* Titels en tekst */
.container h1,
.container h2 {
    margin-bottom: 1rem; /* Ruimte onder titels */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;     /* Alle koppen iets dikker */
}

p {
    margin-bottom: 1rem; /* Ruimte onder alinea’s */
}

/* Fade-in animatie */
.fade-in {
    opacity: 0;                     /* Element start onzichtbaar */
    transform: translateY(1.25rem); /* Start iets lager dan normale positie */
    animation: fadeInUp 1s forwards;/* Animatie speelt 1 seconde en blijft eindstand */
    animation-delay: 0.3s;          /* Kleine vertraging voor subtiel effect */
}

/* Definitie van de fade-in animatie */
@keyframes fadeInUp {
    to {
        opacity: 1;                 /* Element wordt volledig zichtbaar */
        transform: translateY(0);   /* Element gaat terug naar originele plek */
    }
}

/* Cards / Projecten */
.card {
    border: none;                   /* Verwijdert standaard rand */
    border-radius: 0.75rem;         /* Ronde hoeken */
    transition: transform 0.3s, box-shadow 0.3s; /* Vloeiende hover-animatie */
}

.card:hover {
    transform: translateY(0.3125rem); /* Card beweegt iets omhoog */
    box-shadow: 0 0.625rem 1.25rem #4528ec1a; /* Schaduw voor diepte */
}

/* Badges / skills  */
.badge {
    display: inline-block;    /* Gedraagt zich als inline + block */
    vertical-align: middle;   /* Netjes verticaal uitlijnen */
}

/* Badge voor skill level */
.skill-badge {
    width: 1.25rem;        /* 20px ≈ 1.25rem (1rem = 16px) */
    height: 1.25rem;       /* zelfde als breedte */
    display: inline-block;  /* hierdoor kunnen ze naast elkaar en blijven ze rond */
    border-radius: 50%;     /* maakt het een perfecte cirkel */
    text-align: center;     /* centreert de inhoud horizontaal */
}

/*  Formulieren */
form input,
form textarea {
    border-radius: 0.5rem;           /* Afgeronde hoeken */
    border: 0.0625rem solid #ced4da; /* Dunne lichtgrijze rand */
    padding: 0.5rem;                 /* Binnenruimte voor tekst */
    width: 100%;                     /* Vult volledige breedte */
}

/* Focus-styling bij invoervelden */
form input:focus,
form textarea:focus {
    border-color: #0d6efd;           /* Blauwe rand bij focus */
    box-shadow: 0 0 0.3125rem #0d6efd4d; /* Blauwe gloed */
    outline: none;                   /* Verwijdert standaard browser-outline */
}

/* Verplichte velden  */
.required-star {
    color: red; /* Rood sterretje voor verplichte velden */
}

/* Footer */
footer {
    background-color: #f8f9fa; /* Lichtgrijze achtergrond */
    color: #333;               /* Tekstkleur */
    padding: 1rem 0;           /* Ruimte boven en onder */
    font-size: 0.9rem;         /* Iets kleinere tekst */
}

/*  Responsive aanpassingen */
@media (max-width: 48rem) { /* Tablets en mobiel */
    .pt-navbar {
        padding-top: 7.5rem; /* Extra ruimte voor navbar */
    }

    .btn-lg {
        font-size: 1rem;      /* Kleinere tekst */
        padding: 0.5rem 1rem; /* Compactere knoppen */
    }
}

/*  Project-afbeeldingen  */
.card-img-top {
    border-radius: 15%;        /* Maakt afbeelding rondachtig */
    object-fit: cover;         /* Vult het kader zonder vervorming */
    width: 70%;                 /* Vaste breedte */
    height: 70%;                /* Vaste hoogte */
    margin: 0 auto;            /* Centreert afbeelding */
    display: block;            /* Nodig voor margin auto */

    opacity: 0;                /* Start onzichtbaar */
    transform: translateY(1.25rem); /* Start iets lager */
    animation: fadeInUp 1s forwards; /* Fade-in animatie */
}