:root {
    /* primary color set 0,25,50,75% */
    --accent-1-hex: #e7c447;
    --accent-1-25-hex: #edd375;
    --accent-1-50-hex: #f3e1a3;
    --accent-1-75-hex: #f9f0d1;
    /* second color set 0,25,50,75% */
    --accent-2-hex: #de8a29;
    --accent-2-25-hex: #e6a75e;
    --accent-2-50-hex: #eec494;
    --accent-2-75-hex: #f7e2c9;
    /* 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-3-hex: #131418;
    --background-2-hex: #131418;
    --background-1-hex: #30323d;
    /* 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 {
    margin-top:100px;
    max-width:800px;
}

#app > div.mud-layout > div > div > div.mud-progress-linear.mud-progress-linear-buffer.mud-progress-linear-small.mud-progress-linear-color-primary.horizontal.mud-flip-x-rtl.progress.my-7 > div > div:nth-child(1) {
    background-size: 10px 10px;
    background-image: radial-gradient(var(--accent-1-hex) 0%, var(--accent-1-50-hex) 16%, transparent 42%);
}

.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-50-hex);
}

/* download */

.download {
    background-color: var(--accent-50-hex) !important;
    color: var(--accent-50-hex) !important;
}

.file {
    font-size: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}