/**
Design
sized in "grid size" or gs.  
gs will equal a line-height to make text track the graph paper

mobile
- Header, 1 cells, height 2.5gs
- Body
    - tiny margins
- footer


desktop
- Header, 5 cells, height 2.5gs
    - fixed left margin: 5gs
    - flex body cells: 1/3 of body, x3
    - fixed right margin: 2.5gs
- Body: height?
    -fixed left margin: 5gs
    -flex body
        - graph apper grid, 1x1 gs
    - fixed right margin: 2.5gs
- Footer: height: 2.5gs
    - bounded by margin lines
    - no heavy line top
*/

:root {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    --grid-size: 1.0lh;
    --heavy-line-color: #7A9F86;
    --line-color: #7a9f8622;
    --heavy-line-width: 2px;
    --paper-color: #EBF3DE;
    --left-margin-width: calc(var(--grid-size) * 1);
    --right-margin-width: calc(var(--grid-size) * 1);
    --midsection: calc(100vw - calc(var(--left-margin-width) + var(--right-margin-width)));
    --ms-third: calc(var(--midsection) / 3.0);
}

@media (min-width: 701px) {
    :root {
    --left-margin-width: calc(var(--grid-size) * 5);
    --right-margin-width: calc(var(--grid-size) * 2.5);
    }
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    background-color: var(--paper-color); 
    margin: 0px;
}


/* left and right margin bars */
.side-lines {
    --right-m:calc(100vw - var(--right-margin-width));

    height: 40px;
    margin: 0px;
    background-image: 
        linear-gradient(to right, 
            transparent var(--left-margin-width),
            var(--heavy-line-color) calc(var(--left-margin-width) + var(--heavy-line-width)), 
            transparent calc(var(--left-margin-width) + calc(var(--heavy-line-width) + 1px))),
        linear-gradient(to right, transparent var(--right-m), 
            var(--heavy-line-color) calc(var(--right-m) + var(--heavy-line-width)), 
            transparent calc(var(--right-m) + calc(var(--heavy-line-width) + 1px)));
    background-size:
        100% var(--right-margin-width),
        100% var(--right-margin-width);

}

@media (max-width: 700px){
    header {

        padding-left: calc( var(--left-margin-width) + 0.5rem);
        padding-right: var(--right-margin-width);
        border-bottom: var(--heavy-line-width) solid var(--heavy-line-color);
        display:flex;
        justify-content:center
    }

}

@media (min-width: 701px) {
header {
    display: flex;
    justify-content:space-between;
    align-items:center;

    height: var(--right-margin-width);
    margin: 0px;
    padding: 0rem calc(var(--right-margin-width) + 0.5rem) 0rem calc(var(--left-margin-width) + 0.5rem);
    border: 0px;
    
    /* cell bars */
    --left-bar: calc(var(--left-margin-width) + var(--ms-third));
    --right-bar: calc(calc(100vw - var(--right-margin-width)) - var(--ms-third));
    background-image: 
        linear-gradient(to right, transparent var(--left-bar),
            var(--heavy-line-color) calc(var(--left-bar) + var(--heavy-line-width)), 
            transparent calc(var(--left-bar) + calc(var(--heavy-line-width) + 1px))),
        linear-gradient(to right, transparent var(--right-bar),
            var(--heavy-line-color) calc(var(--right-bar) + 1px), 
            transparent calc(var(--right-bar) + calc(var(--heavy-line-width) + 1px))),
        /* bottom of header bar */
        linear-gradient(to bottom, transparent calc(var(--right-margin-width) - var(--heavy-line-width)),
            var(--heavy-line-color) var(--right-margin-width));
    background-size: 
        100% var(--right-margin-width),
        100% var(--right-margin-width),
        100% var(--right-margin-width);

}
}

main {
    min-height: calc(100vh - calc(var(--right-margin-width) * 2));
    border: 0px;
    margin-left: var(--left-margin-width);
    margin-right: var(--right-margin-width);
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px 0.5rem;
    border-bottom: 1px solid var(--line-color); 

    /* graph paper grid */
    background-size: var(--grid-size);
    background-image:
        linear-gradient(to right, var(--line-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-color) 1px, transparent 1px);
    background-size: 
        var(--grid-size) var(--grid-size),
        var(--grid-size) var(--grid-size);
}

footer {
    height: var(--right-margin-width);
    padding: 0.5rem calc(var(--right-margin-width) + 0.5rem) 0rem calc(var(--left-margin-width) + 0.5rem);
}


/* elements */
h1 {
    margin: 0px;
}

p {
    margin-bottom: 1lh;
}

li {
    margin-left: 3rem;
}

dd {
    margin-bottom: 1lh;
}

#text-binder {
    max-width: 40rem;
}

/* a cell aligned to the top right of the header, contained by the header */
#left-cell {
    text-align: left;
}
#right-cell {
    text-align: right;
}
@media screen and (min-width: 701px) {
    #left-cell, #right-cell {
        width: var(--ms-third);
    }
    
}