:root {
    /* primary color*/
    --primary-1-hex: #4f4c4d;
    /* accent color*/
    --accent-1-hex: #cc4646;
    --accent-2-hex: #0dca6a7;
    --accent-3-hex: #dc9494;
    --accent-4-hex: #e4bcbc;
    /* background color set */
    --background-1-hex: #ececed;
    --background-2-hex: #ffffff;
    --background-3-hex: #8f96a0;
    /* navigation color set */
    --navigation-1-hex: #f2f2f2;
    --navigation-2-hex: #ececed;
    /* social */
    --social-1-hex: #264066;
    /* warning color set */
    --warning-1-hex: #DEA438;
    --warning-2-hex: #D4573B;
    --warning-3-hex: #B00020;
}

html, body {
    color: var(--primary-1-hex);
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    background: linear-gradient(180deg, var(--background-2-hex), var(--background-3-hex));
/*    background-image: url('/images/lightbox.svg');*/
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: Roboto;
}

#grid {
/*    background:yellow;*/
    height: 100%;
}

/* full size div */
.full-size {
    /*height: calc(100vh - 13rem);*/
    height: 100%;
    width: 100%;
}

.logo {
    max-width:400px;
}

.chapter {
    font-size: 28px;
}

.chip {
    background-color: var(--social-1-hex);
    color: white;
}

a.social, a.social:visited, a.social:hover, a.social:active {
    color: white !important;
}

.margin-gutter {
    margin-top:30px;
}

.uppercase {
    text-transform: uppercase;
}

.align-center {
    text-align:center;
}

.align-end {
    text-align: end;
}

.copyright {
    position:absolute;
    right:30px;
}

/* navigation footer */
.footer {
    position: center;
    background-color: var(--background-3-hex);
    color: var(--primary-1-hex);
}