* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: #F0F8FF;
    font-family: sans-serif;
}

h1, h2, p, label, input, #resultaten {
    margin: 0.5rem;
}

nav {
    ul {
        background-color: #C67C78;
        padding: 0.4em 0;

        li {
            display: inline;

            a {
                color: white;
                font-weight: bold;
                padding-left: 0.5em;
                text-decoration: none;
                vertical-align: middle;

                &:hover {
                    color: #F7FFCC;
                }
            }
        }
    }
}

a, img, table {
    margin: 0.5rem;
}

nav {
    padding: 0.5rem;
}

.titles {
    font-weight: bold;
    margin-bottom: -0.5rem;
}

input, button {
    display: block;
    font-size: 1.1em;
    margin-bottom: 1em;
    margin-top: 0.2em;
}

button {
    margin: 1rem 0.5rem;
    background-color: #4CAF50;
    border: none;
    color: white;
    cursor: pointer;
    font-weight: bold;
    outline: 0;
    padding: 8px 16px;

    &:hover, &:focus {
        background-color: #3e8e41;
    }

    &:active {
        background-color: #3ecc41;
    }

    &:disabled {
        background-color: #808080;
        cursor: not-allowed;
    }
}

table,
td,
th {
    border: 1px solid silver;
    border-collapse: collapse;
    padding: 5px 5px;
}

table {
    th {
        color: white;
        background-color: #4CAF50;
    }

    td {
        padding-left: 0.2em;
        padding-right: 0.2em;
    }

    tr {
        &:nth-child(even) {
            background-color: #FAFABA;
        }

        &:nth-child(odd) {
            background-color: #FAFAFA;
        }
    }

    .links {
        display: inline;
    }
}

.fout {
    background-color: red;
    color: white;
    font-weight: bold;
    padding-left: 0.5em;
    padding-right: 0.5em;
}