body { 
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
    background-color: #800000;
}

main { 
    display: flex; 
    box-sizing: border-box;
    position: absolute;
    left: 40px; 
    max-width: 400px;
    top: 0; bottom: 0;
    align-items: center;
}

article {
    display: flex;
    width: 100%;
    background-color: #fff;
    padding: 2rem;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    box-sizing: border-box;
}

.img100 img { max-width: 100%; }

figure { margin: 0; }

.h3 { height: 3rem }
.h25 { height: 2.5rem; }
.h2 { height: 2rem; }
.h1 { height: 1rem; }

.gl {
    max-width: 100%; 
    display: flex;
    justify-content: flex-start;
}

.gl_row { flex-direction: row;}
.gl_col { flex-direction: column;}

.gc_p100 { width: 100%; }
.gc_c0 { padding-right: 0.5rem; }
.gc_c1 { padding-right: 1rem; }
.gc_c2 { padding-right: 2rem; }

.gl_p1 { margin-bottom: 1rem; }
.gl_p2 { margin-bottom: 2rem; }
.gl_p3 { margin-bottom: 3rem; }

.gi { height: 16pt; opacity: .5; }
.gi:hover { opacity: .8; }

footer { color: gray; font-size: 10pt; }

canvas { 
    position: absolute;
    left: 0px;
    right: 0;
    top: 0; 
    bottom: 0;
    overflow: hidden;
    background-color: #800000;
    z-index: 1;
}

a, a:link, a:visited {
    color: #800000; text-decoration: none;
}
a:hover { text-decoration: underline; }


@media screen and (max-width: 800px){
    .gi { height: 24pt; }
    footer { font-size: 10pt; }
    main { left: 0; right: 0; margin: 5%; }
}