:root {

    --blue: #4f7cac;
    --teal: #c0e0de;
    --green: #9eefe5;

    --light: #f4fff8;
    --mid: #8baaad;
    --dark: #333745;
    --highlight: #edae49;
    --grey: #3c474b;

}

body, html{
    min-height: 100vh;
    width: 100vw;
    background-color: var(--grey) !important;
    color: var(--light) !important;
}

.center-flex, body, html{
    display: flex;
    justify-content: center;
    align-items: center;
}

.card{
    background-color: var(--grey);
    color: var(--grey);
    border: 1px solid var(--mid);
    box-shadow: var(--light) 0px 20px 30px -10px;
}
.card-header{
    background-color: #0000005c;
    color: var(--highlight);
    font-size: 200%;
}
.card-body{
    background-color: var(--grey);
    color: var(--light);
}
.card-footer{
    background-color: var(--dark);
    color: var(--light);
}

.form-control{
    background-color: var(--light);
    color: var(--highlight);
}
.form-control:hover{
    background-color: var(--highlight);
    color: var(--dark);
}
table, tr, td{
    color: var(--light);
}
label{
    color: var(--light);
}
ul, li, .list-group-item, .list-group{
    background-color: #00000000;
    color: var(--light);
}
.show-pointer{
    cursor: inherit;
}
.show-pointer:hover{
    cursor: pointer;
}

.bg-hover{
    background-color: #00000000;
    color: inherit;
    transition: all 0.2s ease-in-out;
    cursor: inherit;
}

.bg-hover:hover{
    background-color: var(--highlight);
    color: var(--dark);
    cursor: pointer;
}