body {
    padding: 0;
    margin: 0;
}

#Navbar {
    list-style-type: none;
    padding: 5px;
    margin: 0;
    display: flex;
    background-color: #888888;

    li {
        a {
            color: #000000;
            text-decoration: none;
        }

        padding: 5px;
        margin: 5px;
        border-style: solid;
        border-width: 2px;
        border-color: #FFFFFF;
        background-color: #FFFFFF;
        height: min-content;
    }

    /* The div element has a 2px border, this fixes it */
    li:has(div) {
        padding: 2.4px;
    }

    li:hover:not(:has(div)) {
        transition: border-color 200ms;
        border-color: #000000;
        background-color: #EEEEEE;
    }
}

#ContactMenu {
    padding: 0;
    display: flex;
    flex-direction: column;
    list-style-type: none;

    > * {
        margin: 0;
        padding: 1px;
        margin-top: 5px;
        display: none;
        border-width: 2px;
        border-style: solid;
        border-color: #FFFFFF;
    }

    p {
        margin-top: 0;
        display: block;
    }
}

#ContactMenu:hover > * {
    display: block;
}

#ContactMenu > *:hover {
    border-width: 2px;
    border-color: #000000;
    transition: border-color 200ms;
}