body {
    background-color: #585858;
    padding-bottom: 80px;
}

.uc-banner {
    background-color: rgb(24, 24, 24);
    color: white;
    text-align: center;
}

main.container {
    padding: 15px;
    margin: auto;
    background: #0b1018;
    color: #F0C0C0;
    min-width: 90%;
    border: thin solid #000000;
    border-radius: 5px 30px 5px 30px;
}

nav.navbar.navbar-expand-lg.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: #0b1018 !important;
    border: 1px solid #1a2330;
    border-radius: 14px;
    padding: 12px 16px;
    margin: 10px;
    box-shadow: 0px 5px 10px #af6e77;
}

.navbar-brand {
    color: #993d3d;
    font-weight: 800;
    cursor: pointer;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: #ff0000;
}

.navbar-toggler {
    border-color: #314055;
    background-color: #121924;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
    box-shadow: 0 0 0 3px rgba(120, 140, 170, 0.35);
    outline: none;
}

.navbar-toggler-icon {
    filter: invert(1) brightness(1.2);
}

.navbar-nav .nav-link {
    color: #f4f7fb;
    padding: 7px 14px;
    margin-right: 7px;
    border: 1px solid #2a3546;
    border-radius: 12px;
    text-decoration: none;

    background: linear-gradient(
        135deg,
        #11161d 0%,
        #1b2635 45%,
        #46515f 100%
    );
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible {
    color: #ffffff ;
    border-color: #d67a1c;

    background: linear-gradient(
        135deg,
        #68727e 0%,
        #8a95a3 45%,
        #d67a1c 100%
    );
}

footer.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: auto;
    background: #0b1018;
    border-top: 1px solid #1a2330;
    color: #fab9b9;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0px -10px 20px rgb(0, 0, 0);
}