body > footer {
    background-color: #f7f8f8;
    color: #5b6c6e;
}

@media (max-width: 500px) {
    body > footer {
        height: 110px;
    }
}

@media (min-width: 500px) and (max-width: 768px) {
    body > footer {
        height: 80px;
    }
}

ul.nav.level2 {
    display: none ! important;
}

.navbar-inverse {
    background-color: #fff;
    border-color: #e7e7e7;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: #909090;
    background-color: transparent;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus
{
    background-color: #fff;
    color: #000;
}

.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
    color: none;
    background-color: transparent;
}

.navbar-brand > svg {
    margin-top: 0.5em;
}

.navbar-brand > img.svg {
    height: 2em;
}

.expand-stub + a {
    font-weight: normal;
}

.homepage-banner {
    background-image: url(/images/Workingdevhub.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    color: #fff; 
    padding-top: 2.5em;
    padding-bottom: 2em;
    padding-left: 1.5em;
    font-size: 1.6rem; 
    font-weight: 400; 
    margin-top: -1.6rem;
}

.homepage-banner > .highlight-text {
    color: #205080;
}

.homepage-banner > .btn-outline {
    border-color: rgba(255, 255, 255, 0.8);
    color: rgba(255,255,255,1);
    border-width: 0.1em;
    font-size: 16px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border-radius: 40px ! important;
}
  
@media (min-width: 1200px) {
    .homepage-banner {
      font-size: 52px;
    }

    .homepage-banner > .btn-outline {
        font-size: 28px;
    }
}


.homepage-banner > .btn-outline:hover {
    border-color: rgba(255, 255, 255, 1);
    color: rgba(255,255,255,1);
}

a {
    color: rgba(73, 149, 205, 0.8);
}

a:hover {
    color: rgba(73, 149, 205, 1);
}

.bg-body {
    background-color: rgba(255,255,255,0.8) ! important;
    backdrop-filter: blur(6px) ! important;
    -webkit-backdrop-filter: blur(6px) ! important;
}

.alert-info {
    background-color: rgba(101,189,239,0.5);
    border-color: rgba(101,189,239,1);
}

.btn {
    border-radius: 30px ! important;
}

.btn-outline {
    border-color: rgba()
}

.btn-primary {
    background-color: rgba(101,189,239,1);
    border-color: rgba(101,189,239,1);
}

.btn-primary:hover {
    background-color: rgba(101,189,239,0.75);
    border-color: rgba(101,189,239,1);
}

.btn-secondary {
    background-color: rgba(236,147,55,1);
    border-color: rgba(236,147,55,1);
}

.btn-secondary:hover {
    background-color: rgba(236,147,55,0.75);
    border-color: rgba(236,147,55,1);
}

.light-mode {
    --scalar-color-1: #121212;
    --scalar-color-2: rgba(0, 0, 0, 0.6);
    --scalar-color-3: rgba(0, 0, 0, 0.4);
    --scalar-color-accent: #0a85d1;
    --scalar-background-1: #fff;
    --scalar-background-2: #f6f5f4;
    --scalar-background-3: #f1ede9;
    --scalar-background-accent: #5369d20f;
    --scalar-border-color: rgba(0, 0, 0, 0.08);
}
.dark-mode {
    --scalar-color-1: rgba(255, 255, 255, 0.81);
    --scalar-color-2: rgba(255, 255, 255, 0.443);
    --scalar-color-3: rgba(255, 255, 255, 0.282);
    --scalar-color-accent: #8ab4f8;
    --scalar-background-1: rgb(33, 37, 41);
    --scalar-background-2: #272727;
    --scalar-background-3: #333333;
    --scalar-background-accent: #8ab4f81f;
}