:root {
    --color-text-basic: #333333;   /* Standaard donkergrijs */
    --color-accent: #3498db;      /* Huisstijl blauw */
    --color-background: #ffffff;    /* Wit */
}


body
{
    background-color: var(--color-background);
    font-family: Arial, sans-serif;
    /*font-family: 'Latin Modern Roman', serif;*/
    /* font-size: 30px; */
    color: var(--color-text-basic);
    margin: 0 auto;
    padding: 0;
}

header, footer
{
    background-color: #2c3e50;     /* Mooie donkerblauwe kleur */
    color: white;                  /* Witte tekstkleur */
    text-align: center;            /* Centreert de tekst */
    padding: 15px;                 /* Ruimte binnenin de balken */
}


main
{
    max-width: 800px;              /* Zorgt dat de site niet te breed wordt */
    margin: 20px auto;             /* Centreert de 'main' doos op de pagina */
    padding: 20px;
    background-color: white;       /* Wit vlak voor de tekst */
    border-radius: 8px;            /* Subtiele ronde hoekjes */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Een zachte schaduw */
}


h1
{
    color: #2c3e50;
    font-size: 32px;
    border-bottom: 2px solid #2c3e50; /* Een lijn onder de hoofdtitel */
    padding-bottom: 10px;
}


h2
{
    color: #16a085;
}



.my_section
{
    background-color: #fafafa;
    padding: 15px;
    margin-bottom: 20px;
}


.accent-kleur
{
    background-color: #ffeaa7;     /* Een zachtgele markeerstift-achtergrond */
    font-weight: bold;             /* Maakt de tekst dikgedrukt */
    padding: 2px 5px;
}


p
{
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: darkgray;
    font-size: 1rem;
    margin: 10px 15px 20px 0px; /* Boven, Rechts, Onder, Links */
}

img
{
    max-width: 100%;               /* Zorgt dat het plaatje nooit buiten het scherm valt */
    height: auto;
    display: block;
    margin-top: 10px;
}

a:link
{
    font-weight: bold;
    text-decoration: none;
    color: #7843e9;
}

a:visited
{
    font-weight: bold;
    text-decoration: none;
    color: #7843e9;
}

a:hover, a:focus, a:active
{
    text-decoration: none;
    /* text-decoration: underline; */
    color: #9685BA;
}


.myClass1
{
    /* color: blue; */
    /* font-size: 18px; */
}


#myId1
{
    color: red;
     border: 1px solid #b3d7f7;
     padding: 15px;
     border-radius: 4px;
}