/* 
Pages are designed with a5 dot grids, 0.5 cm/50mm grids in mind.  This gives you a grid size of 26 by 38 cells in either direction.  You will need to keep these in mind when adding elements to the grid.

Each box is 20px by 20px, and the entire page has a border of 10px.
*/

/*
I recommend adding individual elements to the <style></style> section of your pages.  That way code on one does not mess up the code on another when you make multiple grids with similar set-ups.
*/
/*
These are INTENTIONALLY NOT MOBILE FRIENDLY!  These are based on describing specific grid sizes when converting to a paper grid.  Scrollbars are added for mobile viewers, but THEY WILL NOT SCALE BY DESIGN.
*/


:root {
    /* Colors */
    --paper-color: #f6eee3;
    --grid-color: #BCBCBC;

    /* Sizes - The actual code for the pages use the number, these are intended for designing elements */
    --one-box: 20px;
    --two-box: 40px;
}


/* Page Set-Up */
.dot-grid-vertical {
    width: 520px;
    max-width: 520px;
    height: 760px;
    max-height: 760px;
}

.dot-grid-horizontal {
    width: 760px;
    max-width: 760px;
    height: 520px;
    max-height: 520px;
}

.dot-grid-vertical,
.dot-grid-horizontal {
    background-size: 20px 20px;
    background-image: radial-gradient(circle, var(--grid-color) 1px, rgba(0, 0, 0, 0) 1px);
    border: 2px solid black;
    padding: 10px;
    line-height: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--paper-color);
}


/* Elements Translated Into Dot Grid, Defaults */
.dot-grid-vertical .section p,
.dot-grid-horizontal .section p {
    margin: 20px 0;
}

.dot-grid-vertical .section p:first-of-type,
.dot-grid-horizontal .section p:first-of-type {
    margin-top: 0;
}

.dot-grid-vertical .section p:last-of-type,
.dot-grid-horizontal .section p:last-of-type {
    margin-bottom: 0;
}

.dot-grid-vertical ul,
.dot-grid-horizontal ul {
    margin: 0;
    padding-left: 25px;
}