:root {
    /* Main colors (from logo) */
    --indigo: #370159;
    --dodgerblue: #248bf2;
    --deepskyblue: #1cbcfa;
    --whitecapsnow: #fffbff;
    --sapphire: #051962;
    --bondiblue: #0283c5;
    --darkorchid: #b52cc0;
    /* Complementary colors */
    --limegreen: #36c02c;
    --neoncarrot: #fc8e1f;
    --aqua: #1ffcfc;
    --greenyellow: #8efc1f;
    --deeppink: #fc1f8e;
    --lemon: #fcfc1f;
}

.azicheckbox input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}

.azibg-image {
    /*    background: rgba(0,0,0,0.7) url(/images/piqsels.com-id-fsywq.jpg);    */
    background-image: linear-gradient(to top, rgba(0,0,0), transparent), url(/images/backgrounds/piqsels.com-id-fsywq.jpg);
    background-blend-mode: darken;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    height: 100vh;
}

.azibg-blur {
    backdrop-filter: blur(6px) saturate(102%);
    -webkit-backdrop-filter: blur(6px) saturate(102%);
    background-color: rgba(1, 5, 36, 0.45);
    border-radius: 12px;
    border: 1px solid rgba(128, 2, 120, 0.3);
}

.azibg-transparentwhite {
    background: rgba(0,0,0,0.7);
    background-blend-mode: multiply;
    background-size: cover;
    /*//background-color: transparent !important;*/
}

/* This is needed to keep the autofill textboxes transparent in the input forms
    Without it everything looks fine, till you use the autocomplete function in chrome
    The background will revert back to solid white
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

/* shift body content down 100px to accomodate for increased height of navbar */
body {
    padding-top: 100px !important;
}

@media screen and (max-width: 768px) {
    body {
        padding-top: 0px;
    }
}


/* Navbar hovering effects*/

@media only screen and (min-width: 992px) {
    .navbar {
        padding: 0;
    }

        .navbar .navbar-brand {
            padding: 0 0.7em;
        }

        .navbar .navbar-nav .nav-link {
            padding: 1em 0;
        }

        .navbar .navbar-nav .nav-item {
            margin: 0 1em;
        }
}

.navbar .navbar-nav .nav-item {
    position: relative;
}

.navbar .navbar-nav .nav-item::after {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: "";
    background-color: var(--greenyellow);
    width: 0%;
    height: 3px;
    transition: all 0.2s;
}


.navbar .navbar-nav .nav-item:hover::after {
    width: 100%;
}

/*.navbar-nav .active > .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
    color: var(--darkorchid);
}*/


.navbar-nav .nav-link:hover {
    color: var(--greenyellow);
}


/* navbar background solid on scrol */
.navbar-scrolled {
    background-color: var(--sapphire);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.navbar {
    transition: all 0.4s;
}