.titlewebsite {
    display: flex;
    justify-content: center;
    font-size: 3.5rem;
    font-family: "Bangers", cursive;
}
.bodymainpage {
    background-image: url("../afbeeldingen/pikachuachtergrond.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bloglink {

}
.foto_blog2 {
    width: 20rem;
    height: 20rem;
    border:6px solid black;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.w3_ID {
    font-size: 1rem;
}

.headerblog {
    font-size: 2rem;
}
.week_2 {
    font-size: 2rem;
}
.week_3 {
    text-align: center;
    font-size: 2rem;
}
.divblog {

}
.blog {
    text-align: center;
}
.pw2 {
    text-align: center;
}


.w3_idp {
    font-size: 1rem;
    width: 25%;
    background-color: #fece02; /* Blauwe achtergrondkleur */
    color: white; /* Witte tekstkleur */
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
}
.week_4 {
    font-size: 2rem;
}
.week_2 {
    font-size: 2rem;

}
.tekst_4 {
    width: 25%;
    background-color: #3457B8;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1rem;
}

.w3_p1 {
    width: 45%;
    background-color: #3457B8;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;

}
.w3_p2 {
    width: 45%;
    background-color: #D92627;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
}
.pw2_2 {
    width: 45%;
    background-color: #fece02;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
    border:6px solid black;
}
.pw2 {
    width: 45%;
    background-color: #D92627;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
    border:6px solid black;
}
.w1_p1 {
    width: 45%;
    background-color: #3457B8;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1rem;
    display: flex;
    border:6px solid black;
}
.w1_p2 {
    width: 45%;
    background-color: #fece02;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1rem;
    display: flex;
    border:6px solid black;
}
nav {
    background-color: #D92627;
    color: white;
    padding: 0.6rem 1.25rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
}

nav ul li {
    display: inline;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
nav ul li a:hover {
    text-decoration: underline;
}
main {
    margin-top: 3.75rem;
    padding: 1.25rem;

}

 section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Bangers", cursive;
    gap:1rem;
}
header {
    margin-top: 5rem;
}
body {
    font-family: "Bangers", cursive;
}
.wie_ben_ik article  {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.wie_ben_ik p{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem;
    text-align: center;
    width: 25%;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}
.BODY_ABM {
    background-image: url("../afbeeldingen/pokemonbalachtergrond.jpg");
    background-repeat: no-repeat;
    background-size:75%;
    background-position: left;
    background-attachment: fixed;
}


/* Responsieve stijlen */
@media (max-width: 768px) {
    .tekst_4,
    .bodymainpage ,
    .pw2_2,
    .w1_p2,
    .w3_p1,
    .w3_p2,
    .pw2,
    .w3_idp,
    .w5p1,
    .w5p2,
    .w5p3,
    .w5p4,
    .w1_p1 {
        width: 80%; /* Maak elementen breder op kleinere schermen */
        padding: 10px; /* Verminder de padding */
        font-size: 14px; /* Verklein tekstgrootte */
    }
    .wie_ben_ik p {
        width: 50%;

    }
    .bodymainpage h1{
        font-size: 2rem;
    }
    nav ul {
        flex-direction: row; /* Stapel de navigatie-items onder elkaar */
        gap: 10px;
        align-items: center; /* Centreer de items */
        display: flex;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .tekst_4,
    .bodymainpage,
    .w3_p1,
    .w3_p2,
    .pw2,
    .w1_p1,
    .pw2_2,
    .w1_p2,
    .w5p1,
    .w5p2,
    .w5p3,
    .w5p4,
    .week4_testp,
    .w3_idp {
        width: 100%;
        font-size: 0.75rem;
    }

    nav ul li {
        margin-bottom: 0.6rem;
    }
}
.body_blog {
    background-image: url("../afbeeldingen/pokebalpatroon.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.homepage {
    text-align: center; /* Zorg dat de header gecentreerd staat */
}

.titlewebsite {
    margin-bottom: 20px; /* Ruimte onder de header */
}

.homepage p {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 25%;
    padding: 0.6rem;
    text-align: center;
    border-radius: 0.3rem;
    gap: 2rem;
    background-color: #fece02;
}
.week4_testp {
        width: 45%;
        background-color: #3457B8;
        color: white;
        border-radius: 2rem;
        box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 1.25rem;
        display: flex;

}
.w5p1 {
    width: 45%;
    background-color: #fece02;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
}

.w5p2 {
    width: 45%;
    background-color: #D92627;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
}

.w5p3 {
    width: 45%;
    background-color: #3457B8;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
}

.w5p4 {
    width: 45%;
    background-color: #fece02;
    color: white;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.25rem;
}
.hidden {
    display: none;
}
.loginform{
    background-color: #fece02;
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 300px;
}
.inputlogin {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    box-sizing: border-box;
    font-size: 1rem;
}
.buttonlogin {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}
.labellogin{
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #fece02;
}
.loginbody {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-image: url("../afbeeldingen/achtergrondtimeline.jpg");
}

.blog_1_body{
    background-color: #fece02;
}
.body_blog2{
    background-color: #3457B8;
}