/* Fonts */

@font-face {
    font-family: Handwriting;
    src: url("JOURNAL.TTF") format("truetype");
}

@page landscape {
    size: A4 landscape;
}



/* General */

h2:not(:first-of-type) {
    break-before: page;
    margin-top: 0;
}

div.sample {
    border: thin solid black;
    hyphens: auto;
}

div.sample :first-child {
    counter-reset: chapter;
}


/* Sample: Dictionary */

div.dictionary {
    line-height: 1.2;
    hyphenate-before: 3;
    hyphenate-after: 4;
    
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    
    -webkit-column-gap: 0.25in;
    -moz-column-gap: 0.25in;
    column-gap: 0.25in;
    
    padding: 0.25in;
    
    width: 5in;
    margin: auto;
    
    font-family: serif;
    font-size: 10pt;
    
    background-color: rgb(250,250,250);
}

div.dictionary dl {
    margin: 0;
}

div.dictionary dt, 
div.dictionary dd {
    margin-left: 0.1in;
    break-before: avoid;
}

div.dictionary dt {
    text-indent: -0.1in;
    float: left;
    padding-right: 0.1in;
}

div.dictionary dd + div.dictionary dt {
    break-before: auto;
}

div.dictionary .smcap {
    font-variant: small-caps;
}

div.dictionary .lowercase {
    text-transform: lowercase;
}


/* Sample: Journal */

div.script {
    width: 5.5in;
    height: 6in;
    
    -webkit-column-width: 2.5in;
    -moz-column-width: 2.5in;
    column-width: 2.5in;
    
    -webkit-column-gap: 0.5in;
    -moz-column-gap: 0.5in;
    column-gap: 0.5in;
    
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
    
    margin: auto;
    
    padding: 0.25in;
    padding-left: 0.5in;
    padding-right: 0.75in;
    
    font-family: Handwriting;
    
    background-image: -webkit-linear-gradient(0deg, burlywood -20%, beige 7%, beige 93%, burlywood 120%);
    background-image: -moz-linear-gradient(0deg, burlywood -20%, beige 7%, beige 93%, burlywood 120%);
    background-image: linear-gradient(90deg, burlywood -20%, beige 7%, beige 93%, burlywood 120%);
    
    hyphens: none;
}

div.script p {
    font-size: 14pt;
    line-height: 1.6;
    color: black;
}

div.script p:first-child {
    margin-top: 0;
}


/* Sample: Restaurant Menu */

div.menu {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    
    -webkit-column-gap: 0.25in;
    -moz-column-gap: 0.25in;
    column-gap: 0.25in;
    
    -webkit-column-rule: thin solid gray;
    -moz-column-rule: thin solid gray;
    column-rule: thin solid gray;
    
    padding: 0.1in 0.25in 0.2in;
    
    counter-reset: nr 16;
}

div.menu h1,
div.menu h2,
div.menu p,
div.menu li {
    font-family: serif;
}

div.menu h1 {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
    
    margin-top: 0;
    padding-top: 3.5pt;
    padding-bottom: 4pt;
    
    text-align: center;
    
    color: black;
    
    font-variant: small-caps;
    font-weight: bold;
    font-size: 20pt;
    
    break-before: auto;
}

div.menu h1 + * {
    margin-top: 0;
}

div.menu h2 {
    margin-top: 0;
    
    text-align: left;
    
    color: black;
    
    font-variant: small-caps;
    font-weight: normal;
    font-size: 14pt;
    
    break-before: auto;
}

div.menu p,
div.menu li {
    color: black;
    font-size: 12pt;
}

div.menu img {
    display: block;
    
    width: 100%; 
    
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
    
    margin-top: 0.25in;
    margin-bottom: 0.25in;
}

div.menu li {
    list-style-type: none;
    line-height: 1;
    
    margin-top: 0.1in;
    
    text-indent: -0.1in;
    
    counter-increment: nr;
}

div.menu li::before {
    content: counter(nr) ".";
    
    float: left;
    
    width: 0.25in;
    margin-left: -0.35in;
    margin-right: 0.2in;
    
    text-align: right;
}


/* Sample: Article */

div.article {
    height: 2.7in;
    
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
    
    padding: 0.1in;
    
    background-image: -webkit-linear-gradient(3deg, indianred 15px, white 16px);
    background-image: -moz-linear-gradient(3deg, indianred 15px, white 16px);
    background-image: linear-gradient(87deg, indianred 15px, white 16px);
}

div.article h1 {
    text-align: right;
    
    color: black;
    
    font-family: serif;
    font-size: 20pt;
    font-weight: bold;
    
    break-before: auto;
    
    break-after: column;
    
    margin-top: 0;
}

div.article p {
    font-family: serif;
    font-size: 10.25pt;
    line-height: 1.3;
    
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 0.25in;
    
    color: black;
}

div.article p:first-of-type,
div.article img + p {
    text-indent: 0in;
}

div.article img {
    display: block;
    
    margin: auto;
    
    break-before: column;
    
    break-after: column;
    
    height: 100%;
}

/* Sample: Base-line */

div.grid {
    page: landscape; 
}

div.surround h2,
div.surround h3 {
    margin: 0;
    break-before: avoid;
}

div.container > h3 {
    margin-bottom: 5pt;
    font-family: 'courier prime', monospace;
    font-size: 14pt;
    text-align: center;
}

div.gridlayout {
    -ro-line-grid: create;
    padding: 3pt; 
    line-height: 1.2;
    height: 5.2in;
    width: 3.20in;
    
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
}

div.container {
    float: left;
    margin-right: 6px;
}

div.gridlayout h2 {
    margin: 12pt 0 6pt;
}

div.gridlayout h2:first-child {
    margin-top: 0;
}

div.gridlayout p {
    line-height: inherit;
    margin: 0;
}

div.none {
    -ro-line-snap: none;
}

div.baseline {
    -ro-line-snap: baseline;
}

div.contain {
    -ro-line-snap: contain;
}

p.source {
    text-align: left;
}

span.nobreak {
    white-space: pre;
}