:root {
    /*--clr-one: #CAEBF2; /* "sky" */
    --clr-one: #99C7D2;
    /*--clr-two: #A9A9A9; /* "carbon" */
    --clr-two: #CCCCCC; /* light gray ish. */
    --clr-three: #82ddb0; /* Greenish. */
    --clr-four: #EFEFEF; /* "neutral" */

    --clr-warning: #FFA3A3; /* Light red. */
}

body {
    background-color:var(--clr-two);
}


/* Heading */
body .heading {
    background-image: linear-gradient(var(--clr-three), var(--clr-one));
    border-bottom:solid;
    border-width:1px;
    font-family: 'Darker Grotesque';
    font-size:300%;
    padding-bottom:.5em;
}

body .heading a {
    color:black;
    text-decoration:none;
}

#account-links {
    margin:.5em 1em .5em 0;
}

#account-links a {
    color:black;
    text-decoration:underline black;
}

body .main {
    margin-top:1em;
    width:100%;
}

#ad-space {
    border-style:solid;
    border-width:1px;
    clear:both;
    min-height:80px;
    margin:auto;
    width:80%;
    z-index:999;
    padding:1em;
    text-align:center;

    /* mobile first */
    /*position: -webkit-sticky;*/
    /*position:sticky;*/
    top:0;
    left:0;
}


/* Common UI elements. */
.card {
    border-radius:0;
    border-style:solid;
    border-width:1px;
    border-color:black;
}

.card-header {
    background-image: linear-gradient(var(--clr-two), var(--clr-four));
}

.card-body {
    background-image: linear-gradient(var(--clr-two), var(--clr-four));
}

.btn {
    border-color:black;
    /*border-radius:0;*/
}

.btn-primary {
    background-color:var(--clr-four);
    background-image:linear-gradient(var(--clr-four), var(--clr-two));
    color:black;
}

.btn-secondary {
    background-image:linear-gradient(var(--clr-four), var(--clr-warning));
    color:black;
}

.row {
    margin-bottom:1em;
}


.modal {
    border-style:solid;
    border-width:1px;
}

.modal-header {
    background-image: linear-gradient(var(--clr-two), var(--clr-four));
}

.modal-footer {
    background-image: linear-gradient(var(--clr-two), var(--clr-four));
}

/* Without an href, need to add stylized to a classes. */
a.trad-link-style {
    cursor:pointer;
    text-decoration:underline black !important;
    color:black;
}

/* Navigation tab stuff. */
.nav-tabs .nav-item .nav-link {
    border-color:black;
    border-bottom:none;
    color:black;
}

.nav-tabs .nav-item .active {
    background-color:var(--clr-one);
}

.nav-tabs .nav-item :not(.active) {
    background-color:var(--clr-four);
}


/* Messages. */

.warning-msg {
    background-color:var(--clr-warning);
    background-image:none;
}

.notice-msg {
    background-color:var(--clr-three);
    background-image:none;
}

.warning-txt {
    color:var(--clr-warning);
}

/* Mobile and destop-specific classes. */

/* Note: Never apply block to row. */
.wide-only {
    display:none;
}

.narrow-only {
    display:block;
}

@media (min-width: 768px) {
    .wide-only {
        display:block;
    }

    .narrow-only {
        display:none;
    }

    body .main {
        width:80%;
    }

}