:root {
    --bd-violet-rgb: 29,45,58;
    --primary-color: #212121;
    --background-color: #111;
    --font: sans-serif;
    --bg-complimentary: #b4d455;

    --color1: #DBD8CB;
    --color2: #66849A;
    --color3: #1D2D3A;
    --bg-marker: #FCE88E;
}

.background1 {
    background-color: var(--color1);
}
.background2 {
    background-color: var(--color2);
}
.background3 {
    background-color: var(--color3);
}
.color1 {
    color: var(--color1);
}
.color2 {
    color: var(--color2);
}
.color3 {
    color: var(--color3);
}

html, body {
    background-color: #DBD8CB;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Push footer to bottom when content is short */
#content-wrapper {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

.form-control {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.main-navbar {
    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 0.95));
}
.navbar-brand {
    color: #DBD8CB;
}
.bg-secondary {
    background-color: #66849A !important;
}
.alert-custom {
    background: rgba(var(--bd-violet-rgb), 0.25);
    border: 1px solid rgba(var(--bd-violet-rgb), 0.5);
}

.bi {
    vertical-align: -.125em;
    width: 1em;
    height: 1em;
}
.chat {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat li {
    background: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 20px;
    position: relative;
    margin-bottom: 20px;
}
.chat li.you {
    margin-left: 50px;
}
.chat li.me {
    margin-right: 50px;
}
.chat li.you:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -32px;
    border: .75rem solid transparent;
    border-left: none;
    border-right-color: rgba(255,255,255,0.1);
}
.chat li.me:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -12px;
    border: .75rem solid transparent;
    border-right: none;
    border-left-color: rgba(255,255,255,0.1);
}

.chat > li > span {
    display: block;
    margin-bottom: 10px;
}

.chat > li > p {
    margin-bottom: 0;
}

.btn-complimentary {
    color: var(--bg-complimentary) !important;
    border-color: var(--bg-complimentary);
    font-weight: bold;
}
.btn-complimentary:hover {
    color: #000 !important;
    background-color: var(--bg-complimentary);
}
.marker {
    background-color: var(--bg-marker);
    color: #000;
    padding: 4px 10px;
    border-radius: 5px;
}
.marker-color {
    color: var(--bg-marker);
}

.logo {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
    height: 140px;
    object-fit: cover;
}