/* Kleurschema: https://visme.co/blog/website-color-schemes/ ("Natural and earthy") */

:root {
    --kleur-bg: #fbeec1;
    --kleur-bg-element: white;
    --kleur-bg-highlight: yellow;
    --kleur-tekst: black;
    --kleur-rand: black;
    --kleur-headers: brown;
    --kleur-subheaders: brown;
    --kleur-tabelrij-oneven: #fbeec1;
    --kleur-tabelrij-even: #daad86;
    --kleur-tekstlink: #659dbd;
    --kleur-knop: #659dbd;
    --kleur-knoptekst: white;
}


*,
*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    hyphens: auto;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: sans-serif;
    background-color: var(--kleur-bg);
    max-width: 100%;
    overflow-x: hidden;
    /* om horizontaal scrollen te voorkomen */
}


/* MAIN */

main>* {
    margin-left: 15px;
    margin-right: 15px;
    border: 5px double var(--kleur-rand);
    border-radius: 10px;
    padding: 5px;
    background-color: var(--kleur-bg-element);
    margin-bottom: 15px;
}

main #samenvatting {
    text-align: center;
    line-height: 150%;
}

main #samenvatting>small {
    font-size: 60%;
}

main #samenvatting>strong {
    font-size: 120%;
    font-weight: bold;
}

main {
    margin-bottom: 30px;
}

main form {
    padding-top: 15px;
    overflow: hidden;
}

main>* h2 {
    color: var(--kleur-headers);
    font-size: 120%;
    margin-top: 5px;

}

main>* h3 {
    color: var(--kleur-subheaders);
    font-size: 100%;
    margin-top: 8px;
}

main>* a {
    color: var(--kleur-tekstlink);
}

main>* .huidig {
    color: var(--kleur-headers);
    font-weight: bold;

}

#soort>ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#totalenPerMaand td {
    padding-left: 5px;
    padding-right: 5px;
}

#details {
    overflow: scroll;
}

#details table {
    width: 100%;
    border-collapse: collapse;
}

#details table tbody td, #details table thead th {
    padding: 5px;
}

#details table tbody tr:nth-child(odd) {
    background-color: var(--kleur-tabelrij-oneven);
}

#details table tbody tr:nth-child(even) {
    background-color: var(--kleur-tabelrij-even);
}

#details tbody tr:hover {
    background: var(--kleur-knop) !important;
    color: var(--kleur-knoptekst);
    cursor: pointer;
}

section {
    overflow-y: scroll;
}

section p {
    margin-bottom: 10px;
}

section p:last-child {
    margin-bottom: 0;
}

.totalen table, .totalen tr, .totalen td, .totalen th {
    border: 1px solid grey;
    border-collapse: collapse;
    margin: 0;
    padding: 3px;
    text-align: right;
}

ul.fout, .fout {
    color: red;
    list-style-type: square;
    padding: 5px 5px 5px 20px;
    margin: 15px;
    border: 1px dashed red;
    background: var(--kleur-tabelrij-oneven)
}

/* HEADER */

nav {
    z-index: 1;
}

#logo {
    margin-left: 55px;
    margin-top: -20px;
    position: sticky;
    font-size: 2.8rem;
    margin-bottom: 0.1rem;
    font-family: 'Ostrich Sans';
    z-index: 100;
    color: var(--kleur-headers);
}

#logo a {
    text-decoration: none;
    color: var(--kleur-headers);
}

:target {
    animation: highlight 4s ease-in-out;
}

@keyframes highlight {
    from {
        background-color: var(--kleur-bg-highlight);
    }
    to {
        background-color: var(--kleur-bg-element);
    }
}

.weekhighlight {
    color: var(--kleur-headers);
    font-weight: bold;
}

/*** AANPASSEN IN PORTRAIT-STAND ***/
#roteermelding {
    display: none;
}

@media (max-width: 768px) and (orientation: portrait) {
    /* #burndownchart {
      transform: rotate(90deg) translateX(50%);
      transform-origin: top;     
    } */

    #roteermelding {
        display: block;
    }
}