:root {
    --bg-color: #ffffff;
    --text-color: #555555;
    --heading-color: #333333;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #202020;
        --text-color: #e0e0e0;
        --heading-color: #ffffff;
    }
}
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    background-color: var(--bg-color);
}
body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    line-height: 1.5;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Nunito Sans', sans-serif;
}

h1, h2, h3, h4, strong {
    margin-top: 1em;
    line-height: 1.25;
    color: var(--heading-color);
}

/**********************************************************************************************************************/
/* Services                                                                                                           */
/**********************************************************************************************************************/
.card {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.card:hover {
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.form-column input,
.form-column textarea,
.form-column select:required:invalid {
    background-color: var(--bg-color) !important;
    color: gray;
}