/* Happy planner page layouts */

:root {
    --print-guide: 1px solid gray;
    
    --binding-offset: 0.51in;
    --edge-offset: 0.15in;

    --page-width: 7in;
    --page-height: 9.25in;

    --box-width: 1.56in;
    --box-height: 1.56in;

    --col-width: var(--box-width);
}

.page-vertical {
    width: var(--page-width);
    height: var(--page-height);
    padding-top: var(--edge-offset);
    padding-bottom: var(--edge-offset);
    padding-left: calc(var(--page-width) - var(--binding-offset) - var(--col-width) * 4);
    padding-right: var(--binding-offset);
    outline: var(--print-guide);
}

.page-horizontal {
    width: 9.25in;
    height: 7in;
    padding-top: var(--edge-offset);
    padding-bottom: var(--binding-offset);
    padding-left: var(--edge-offset);
    padding-right: var(--edge-offset);
    outline: var(--print-guide);
}

/* Row system */
.row {
    display: flex;
    align-items: start;
    justify-content: start;
}

.row-center {
    align-items: center;
    justify-content: center;
}


/* Helpers */
.wh-100 {
    height: 100%;
    width: 100%;
    outline: 1px solid red;
}