/* Header */
  header {
    text-align: center;
    padding: 0.2rem 1rem;
  }


a{
    /* text-decoration:underline; */
    color: #FF8FEA;
    font-family: 'Poppins';
}

a:hover{
    color: #000000;
}

.togglemenu {
    width: 9rem;
    height: 20.8125rem;
    flex-shrink: 0;
    border-radius: 0rem 5rem 5rem 0rem;
    border: 3px solid #FF8FEA;
    background: #FFF;
    position: fixed;
    display: flex;
    align-items: center;
    top: 25%;
      text-decoration: none;

}

.togglemenu ul{
padding: 0rem; /* Verwijdert de standaard marge/padding */
  margin: 1rem; 
  display: flex;
    flex-direction: column;
  justify-content: space-evenly;
  height: 15rem;
  color: #FF8FEA;
  text-decoration: none;
  font-size: 25px;
  font-family: 'yeseva one';
}

svg{
    position: absolute;
}

.togglemenu ul li:hover{
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.togglemenu ul li a{
    color: #FF8FEA;
    text-decoration: none;
    padding: 8px 5px;
    font-family: 1rem;
}

.togglemenu ul li a:hover{
    color: #000000;
    text-decoration: none;
    padding: 8px 5px;
}

.togglemenu ul li a.active {
    color: rgb(10, 6, 6);
    font-weight: bold;
     border-left: 5px solid #FF8FEA;
}

@media (max-width: 800px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li a {
        width: 100%;
        text-align: center;
    }

    .title {
        font-family: "Yeseva one", serif;
        font-size: 2.5rem;
        color: #ff8fea;
        margin-bottom: 1rem;
        display: flex;
        justify-content: center;

    }

    .subtitle {
        color: #FF8FEA;
        font-family: 'yeseva one';
        font-weight: 100;
        font-size: 1.30rem;
        display: flex;
        justify-content: center;
        margin-top: 3rem;

    }

    .togglemenu {
        /* height: auto;
        position: static;
        border-radius: 0;
        margin-bottom: 1rem; */
        display: none;
    }

    .writebox {

        background-color: #b71f1f;
        background-image: radial-gradient(#aaa 2px, transparent 2px);
        background-size: 100px 100px;
        background-attachment: fixed;

        width: 30.5rem;
        height: 100%;
        flex-shrink: 0;
        border-radius: 42.9375rem 42.375rem 0rem 0rem;
        /* border: 3px solid #FF8FEA; */
        border-top: 3px solid #FF8FEA;
        border-left: 3px solid #FF8FEA;
        border-right: 3px solid #FF8FEA;
        border-bottom: none;
        background: #FFF;

        /* Nieuw toegevoegd */
        padding: 2rem;
        /* Binnenruimte zodat tekst niet tegen de rand plakt */
        box-sizing: border-box;
        /* Zorgt dat padding niet de box vergroot */
        overflow: auto;
        /* Zorgt dat inhoud scrollt als het groter wordt */
        color: black;

    }


}

img{ 
    width: 25rem;
}