:root {
    --main-color: rgb(15, 117, 188);
}

#home {
    --bg-opacity: 0.65;
    --filter-color-opaque: rgba(255, 255, 255, 1);
    --filter-color-transparent: rgba(255, 255, 255, var(--bg-opacity));

    background-image: linear-gradient(var(--filter-color-transparent) 75%, var(--filter-color-opaque) 95%, var(--filter-color-opaque)), url(images/grayBG.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    min-height: 100vh;

    position: relative;
}

#home #darkModeBtn {
    position: absolute;
    top: 16px;
    right: 16px;

    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

#home a,
#services a,
#home button,
#services button,
#modalSubmit {
    background-color: var(--main-color);
    color: white;
}

#services h1 {
    color: var(--main-color)
}

#tableOfServices>div {
    border-color: var(--main-color) !important;
}

.brand-logo {
    /* button height + #home padding + bottom div margin + middle div margin */
    max-height: calc(100vh - 48px - 32px - 48px - 32px) !important;
    max-width: calc((100vh - 48px - 32px - 48px - 32px) * 2006 / 1013) !important;
    width: 100%;
}