:root {
	/* primary color set 0,25,50,75% */
	--accent-1-hex: #055362;
	--accent-1-25-hex: #0aa5c3;
	--accent-1-50-hex: #3dd7f5;
	--accent-1-75-hex: #9eebfa;
	/* second color set 0,25,50,75% */
	--accent-2-hex: #067388;
	--accent-2-25-hex: #0abde0;
	--accent-2-50-hex: #4fdcf7;
	--accent-2-75-hex: #a7eefb;
	/* third color set 0,25,50,75% */
	--accent-3-hex: #0894af;
	--accent-3-25-hex: #14d0f4;
	--accent-3-50-hex: #63e0f8;
	--accent-3-75-hex: #b1effb;
	/* fourth color set 0,25,50,75% */
	--accent-4-hex: #264066;
	--accent-4-25-hex: #3f6aa9;
	--accent-4-50-hex: #789bcd;
	--accent-4-75-hex: #bccde6;
	/* background color set */
    --background-1-hex: #0d1623;
    --background-2-hex: #1E2F47;
    --background-3-hex: #393144;
	/* navigation color set */
    --navigation-1-hex: #f2f2f2;
	/* warning color set */
    --warning-1-hex: #DEA438;
    --warning-2-hex: #D4573B;
	--warning-3-hex: #B00020;
}

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

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

.chapter {
    font-size: 28px;
}

.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-1-hex);
    color: var(--accent-1-hex);
}