/* variabele voor maximale breedte van de tekstregels definiëren*/
:root {
    --max_page_width: 45em;
} 

/* grootte van html-elementen specificeren op basis van border */
*,
::before,
::after {
    box-sizing: border-box;
}

/* gewenst lettertype */
body {
    font-family: arial, calibri ;
}

/* maximale breedte van de tekstregels instellen;
   tekst centreren op brede schermen */
.center_strip {
    max-inline-size: var(--max_page_width);
    margin:0 auto;
}

.center_wide_70em {
    max-inline-size: 70em;
    margin:0 auto;
}

/* items in lijst horizontaal scrollen */ 
.flexcontainer_scroll {
    display: flex;
    overflow-x: auto;
    }

/* voor plaatje dat te breed is om in zijn geheel te tonen
   en je horizontaal wilt kunnen scrollen */
.picture_scroll {
    overflow-x: auto;
}

/* voor plaatje dat gecentreerd moet blijven */
.picture_center {
    text-align: center;
} 

.flexcontainer {
    display: flex;
    overflow-x: auto;
    }

.text_code {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-width: thin;
    border-style: solid;
    border-color: black;
}

.python_code {
    font-family: Courier New, Courier;
    font-size: 16px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-width: thin;
    border-style: solid;
    border-color: black;
}

.python_code_sidebar {
    font-family: Courier New, Courier;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.python_output {
    font-size: 0.8rem;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-width: thin;
    border-style: solid;
    border-color: black;
}

.red_color {
    color: red;
}

.green_color {
    color: green;
}

.blue_color {
    color: blue;
}