:root {
    --bioval-green-light: #62b92c;
    --bioval-green-dark: #0a8137;

}

*, *::before, *::after {
    box-sizing: border-box; /* Padding doesn't break width */
    margin: 0;
    padding: 0;
}
body { margin: 0;
    font-family: sans-serif;
    background: #fff;
    color: #444;
    line-height: 1.5;
    min-width: 180px;
    font-size: 1.1rem;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; display: block; }

html {background-color: var(--bioval-green-light);}

body {
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    body {
        padding: 0 10px;
    }
}


h1, h2 {
    color: var(--bioval-green-dark);
    margin-bottom: 10px;
}

h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2.5rem;
    text-align: center;
}
h3 {
    color: #111;
    font-size: 1.5rem;
}

.grid-col2 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-auto-flow: row;
    gap: 20px;
}

.grid-col2 > .row2 {
    grid-row: span 2;
}

@media (max-width: 900px) {
    .grid-col2 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-col2 > .row2 {
        grid-row: span 1;
    }
}


@media (max-width: 700px) {
    .grid-col2 {
        grid-template-columns: 1fr;
    }
    .grid-col2 > .img {
        grid-row: 3;
    }
}

.grid-col2 > h2 {
    grid-column: 1 / -1;
}

section {
    margin: 25px 0;
}

section.sep {
    background: url('/img/background.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    padding-bottom: 50px;
}


section ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 40px;
}

section ul li {

}
section ul li::marker {
    color: var(--bioval-green-dark);
}

div.img {
    margin: 0 20px 10px 20px;

    object-fit: cover;
}

div.img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 10px solid var(--bioval-green-light);
    border-radius: 50px;
    padding: 10px;
}

header img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px 0;
}

/*

div.img-left {
    float: left;
    margin: 0 20px 20px 0;
    border: 10px solid var(--bioval-green-light);
    border-radius: 20%;
    padding: 3%;
    object-fit: cover;
}


div.img-left img {
    width: 40vw;
    max-width: 400px;
    min-width: 200px;
    height: auto;
    object-fit: cover;
}
*/



/*
header {
    padding: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    grid-gap: 10px;
}

@media (max-width: 600px) {
    header {
        grid-template-columns: 1fr;
    }
}

header > div {
    min-width: 200px;
}

header img {
    min-width: 200px;
}
*/
footer {
    padding: 10px 0 40px 0;
    margin-bottom: 50px;
}

footer p {
    font-size: 0.9rem;
}

div.hline {
    background-color: var(--bioval-green-light);
    width: 120%;
    height: 10px;
    margin: 0 -20px 0 -20px;
}