@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");

:root {
    --main-bg-color: hsl(32, 16%, 81%);
    --secondary-bg-color: hsl(40, 39%, 92%);
    --main-fg-color: hsl(0, 0%, 0%);
    --nav-bg-color: rgba(0, 0, 0, 0.4); /* hsl(226, 2%, 49%) */
    --image-overlay-bg-color: hsl(40, 39%, 92%);
    --form-bg-color: hsl(40, 39%, 92%);
    --border-color: rgba(0, 0, 0, 0.4);
    --button-color: rgba(0, 0, 0, 0.4);
    --button-hover-color: gray;
    /* John's colors */
    /* --main-bg-color: white;
    --secondary-bg-color: hsl(209, 6%, 90%);
    --main-fg-color: hsl(0, 0%, 0%);
    --nav-bg-color: hsl(209, 8%, 64%);
    --image-overlay-bg-color: white; */
    /* https://graphicmama.com/blog/website-color-schemes/ */
    /* No 1 */
    /* --main-bg-color: #f2f1ef;
    --secondary-bg-color: #d8cfdo;
    --main-fg-color: #413f3d;
    --nav-bg-color: #b1a6a4;
    --image-overlay-bg-color: white; */
    /* No 30 */
    /* --main-bg-color: #2e3047;
    --secondary-bg-color: #3c3f58;
    --main-fg-color: #3bba9c;
    --nav-bg-color: #43455c;
    --image-overlay-bg-color: #707793; */
    /* No 38 */
    /* --main-bg-color: #000000;
    --secondary-bg-color: #212121;
    --main-fg-color: #bfbfbf;
    --nav-bg-color: #212121;
    --image-overlay-bg-color: #212121; */
}

html,
body {
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.4;
}

/* https://typographyhandbook.com/#vertical-spacing */

p {
    font-size: 1.25em;
    margin-bottom: 1.75rem;
}

h1,
.h1 {
    font-size: 3em;
    margin-bottom: 1.75rem;
}

h2,
.h2 {
    font-size: 2em;
    margin-bottom: 1.75rem;
}

h3,
.h3 {
    font-size: 1.5em;
    margin-bottom: 1.75rem;
}

h4,
.h4 {
    margin-bottom: 0.875rem;
}

.container {
    padding: 3.5rem;
}

/* end */

a,
.btn-link {
    color : black;
    /*color: #0366d6*/;
}

.btn {
    padding: 0.375rem 3rem;
}

.btn-primary {
    color: #fff;
    background-color: var(--button-color);
    border-color: var(--border-color);
}

    .btn-primary:hover {
        color: #fff;
        background-color: var(--button-hover-color);
        border-color: var(--border-color);
    }

.btn-minimal {
    padding: unset;
    background-color: none;
    color: var(--main-fg-color);
    border-color: transparent;
}

    .btn-minimal:hover {
        color: var(--main-fg-color);
    }

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.small-text {
    font-size: 1rem;
}

.image-overlay-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 15px;
    margin-right: 15px;
}

    .image-overlay-container:hover .image-overlay {
        opacity: 1;
    }

.image-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 0.5s ease;
    background-color: var(--image-overlay-bg-color);
}

    .image-overlay p {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 80%;
    }

.card {
    background-color: var(--secondary-bg-color);
}

    .card .btn {
        font-size: 1.25rem;
    }

.vqform {
    background-color: var(--form-bg-color);
}

.border {
    border-color: var(--border-color) !important;
}