:root {
    /* primary color */
    --accent-1-hex: #aaaaaa;
    /* second color set 0,25,50,75% */
    --accent-2-hex: #067388;
    /* third color set 0,25,50,75% */
    --accent-3-hex: #0894af;
    /* fourth color set 0,25,50,75% */
    --accent-4-hex: #264066;
    /* background color set */
    --background-1-hex: #738678;
    --background-2-hex: #4d5d53;
    /* navigation color set */
    --navigation-1-hex: #f2f2f2;
    /* warning color set */
    --warning-1-hex: #DEA438;
    --warning-2-hex: #D4573B;
    --warning-3-hex: #B00020;
    /* primary/logo color */
    --primary-color: #36454f;
/*    https: //www.color-hex.com/color-palette/1398*/
}

html, body {
    color: #fffff0;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    background: linear-gradient(180deg, var(--background-1-hex), var(--background-2-hex));
    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 {
    min-width:375px;
    max-width:1000px;
}

.chapter {
    font-size: 24px;
}

.chip {
    background-color: var(--accent-4-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-2-hex);
    color: var(--accent-1-hex);
}