UnfoldingCSS:Spellbreak training: Difference between revisions

From titipi
Jump to navigation Jump to search
No edit summary
mNo edit summary
 
(40 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/*
 
  Welcome to the StyleBox!


  This is a box of CSS declarations, blocks and variables that want to be
  copied. Inside this box, you will find declarations suited for digital and
  printed PDFs. We have experimented by creating chimeric creatures here and
  there, inserting marginal page information, snipping shapes into images,
  playing with typography and taking order away from unordered lists.
  Feel free to visit the font bank, where you will find a range of classic
  free and open source typefaces that you might be familiar with, but also
  some lesser known ones that might peak your interest. The :root {} block
  provides with a few simple variables made for consistency with theming and
  skinning the publication. Take a scroll near the cover and inlay page for
  some suggestions on what can be done there with CSS alone, and if you stray
  too far, you may encounter feral, dramatic or unusual declarations.
  Best of luck!
  Camilo & Karl
  https://camilogarcia.info/
  https://moubarak.eu/
*/
/* -------------- F O N T - B A N K*/
/*  C L A S S I C S ---  */
/*
@font-face {
  font-family: 'windy';
  src: url('/wiki/images/7/7b/SpookySquiggles-LLwG.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'garden';
  src: url('https://titipi.org/wiki/images/b/b2/Bitwise.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family:'Picnic';
  src:url('https://titipi.org/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
  font-weight:normal;
  font-style:normal
}
*/
/*
@font-face {
  font-family: 'asulbold';
  src: url('https://titipi.org/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
      url('https://titipi.org/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'asulregular';
  src: url('https://titipi.org/wiki/images/5/58/Le-patin-helvete.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'compagnon-italic';
  src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
      url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff'),
      url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'poppinsregular';
  src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'),
      Url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'poppinsbold';
  src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'),
      url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
  font-weight: bold;
  font-style: bold;
}
*/
/*
@font-face {
  font-family: 'poppinsblack';
  src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
      url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
  font-weight: bolder;
  font-style: bolder;
}
*/
@font-face {
  font-family: 'adelphe-regular';
  src: url('https://titipi.org/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'),
      url('https://titipi.org/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'adelphe-bold';
  src: url('https://titipi.org/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
      url('https://titipi.org/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
/*
@font-face {
  font-family: 'Fourmi';
  src: url('https://titipi.org/wiki/images/7/7c/Fourmi.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
@font-face {
   font-family: 'anthony';
   font-family: 'anthony';
Line 139: Line 6:
   font-style: normal;
   font-style: normal;
}
}
*/


@font-face {
@font-face {
Line 159: Line 25:
   font-style: normal;
   font-style: normal;
}
}


@font-face {
@font-face {
Line 186: Line 51:
}
}


/*
:root{
@font-face {
--font-size: 11pt;
  font-family: 'herbier';
  src: url('https://titipi.org/wiki/images/a/a8/Herbier.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
}
*/


/* ---------------------------------- ¡ ¡ ¡ N E W ! ! ---  */


/* TERANOPTIA: BUILD YOUR OWN CHIMERIC CREATURE */
@page{
/* https://www.tunera.xyz/fonts/teranoptia/ */
size: 148mm 210mm;
@font-face {  
margin: 17mm 15mm 19mm 15mm;
  font-family: 'teranoptia';
  src: url('https://titipi.org/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* AMAKAN: SPLIT BAMBOO WEAVING DRAMA */
@bottom-center{
/* https://www.tunera.xyz/fonts/amakan/ */
margin-top: -4mm;
@font-face {  
font-family: 'authentic';
  font-family: 'amakan-sheet';
font-size: 9pt;
  src: url('https://titipi.org/wiki/images/b/b1/Amakan-Sheet.woff') format('woff');
content: counter(page);
  font-weight: normal;
}
  font-style: normal;
      @footnote {
}
          float: bottom;
@font-face {
          border-top: solid #222 thin;
  font-family: 'amakan-stripes';
          padding-top: 8pt;
  src: url('https://titipi.org/wiki/images/c/c1/Amakan-Stripes.woff') format('woff');
          font-family: 'authentic';
  font-weight: normal;
font-size: 8pt;
  font-style: normal;
      }
}
@font-face {  
  font-family: 'amakan-strips';
  src: url('https://titipi.org/wiki/images/e/ec/Amakan-Strips.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
 
/* MALEBOLGE: THE EIGHTH CIRCLE OF DANTE'S HELL */
/* https://www.tunera.xyz/fonts/malebolge/ */
@font-face {
  font-family: 'malebolge';
  src: url('https://titipi.org/wiki/images/4/42/Malebolge-Adversarial.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'syne-italic';
  src: url('https://titipi.org/wiki/images/2/24/Syne-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
}
@page:first{


  background-image: url(https://titipi.org/wiki/images/6/6a/Cover-01.gif);
  background-size: 98%;
  background-repeat: no-repeat;
  background-position: center center;


/* -------------- F O N T - B A N K - E N D S*/
 
@top-center{
 
                font-family: Anthony;
:root {
content: "";
 
                font-size:14pt;
/* ************* C O N T E N T ************ */
                font-color:aqua;
 
    --PUB-title: 'Spellbreak Training';
    --PUB-collective: 'TiTiPi & tItIpI';
    --PUB-year: '3000';
 
 
/* ************* F O N T S **************** */
 
    --title-font: windy;
    --body-font: authentic;
    --code-font: Monospace;
    --quote-font: Serif;
    --footnote-font: authenticond;
    --page-number-font: authentic;
 
    --h1-font-size: 30pt;
    --h2-font-size: 24pt;
    --h3-font-size: 18pt;
    --h4-font-size: 16pt;
    --p-font-size: 12pt;
   
 
/* ************* C O L O R **************** */
 
    --color-paper: white;
    --body-text-color: MediumSlateBlue;
    --highlight-text-color: deeppink;
    --sparkling-color: rgb(233, 185, 255);
    --glitter-color: rgb(255, 209, 168) ;
 


/* *********** S H A P E S **************** */
}


    --s-radius: 80px;
        @bottom-center{
    --s-skew: 100%;
                font-family: authentic;
    --s-factor: 0.5;
content: "The Institute for Technology In the Public Interest";
    --spikes: linear-gradient(#000 0 0) center/calc(var(--s-skew) - var(--s-radius)) calc(var(--s-skew) - var(--s-radius)) no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) 0 calc(-1 * var(--s-factor) * var(--s-radius))/var(--s-radius) var(--s-radius) round no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) 0 calc(var(--s-skew) + var(--s-factor) * var(--s-radius))/var(--s-radius) var(--s-radius) round no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) calc(-1 * var(--s-factor) * var(--s-radius)) 0/var(--s-radius) var(--s-radius) no-repeat round, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) calc(var(--s-skew) + var(--s-factor) * var(--s-radius)) 0/var(--s-radius) var(--s-radius) no-repeat round;
                font-size:12pt;


        }
}
}


 
@page:nth(2){       
 
        background-color: white;
/* -------------- P A G E - S T Y L E */
        @bottom-center{
 
                content:"";
.pagebreak { page-break-after: always; }
        }
 
@page {
 
/* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */
 
    size: A4;
    margin-top: 15mm;
    margin-bottom: 20mm;
 
}
}


@page:nth(3) {
background-size: 98%;
        background-repeat: no-repeat;
        background-position: center;


@page:right {
@top-center{
 
                font-family: Anthony;
    margin-left: 35mm;
                font-size:12pt;
    margin-right: 20mm;
                content: "Spellbreak Training: A peer-to-peer cloud divestment network";


    @right-middle {
}
        color: var(--body-text-color);
        content: counter(page);
        font-family: var(--page-number-font);
    }  


    @right-top {
        @bottom-center{
        color: var(--glitter-color);
                font-family: authentic;
        content: var(--PUB-title);
                font-size:12pt;
        font-family: var(--title-font);
        content: "The Institute for Technology In the Public Interest";
        margin-right: 0.8cm;
         }
        writing-mode: vertical-rl;
         text-orientation: mixed;
    }
 
    p:nth-of-type(3n) {
      position: relative;
      z-index: -1;
      border-right: 1cm solid var(--sparkling-color);
      padding-right: 1cm;
      margin-right: -2cm;
      /* margin-left: -1cm;
      border-top-right-radius: 25% 200px;
      border-bottom-right-radius: 25% 200px; */ 
    }


}
}
 
@page:blank{
 
background-color:white;
@page:left {
        @bottom-center{
 
                content:"";
    margin-right: 35mm;
color: white;
    margin-left: 20mm;
         }
 
 
    @left-middle {
        color: var(--body-text-color);
        content: counter(page);
        font-family: var(--page-number-font);
    }   
 
    @left-top {
        color: var(--glitter-color);
        content: var(--PUB-title);
        font-family: var(--title-font);
        margin-right: 0.8cm;
        writing-mode: vertical-rl;
         text-orientation: mixed;
    }
   
    p:nth-of-type(3n) {
      position: relative;
      z-index: -1;
      border-left: 1cm solid var(--sparkling-color);
      padding-left: 1cm;
      margin-left: -2cm;
      /* margin-right: -1cm;
      border-top-left-radius: 25% 200px;
      border-bottom-left-radius: 25% 200px; */ 
    }
 
}
}


.pagedjs_sheet {
div.section, div.section div.contrib:nth-of-type(1){
    box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
      break-before: right;
}
}
 
div.contrib:not(:first-of-type){
body{
      break-before: always;  
    background-color: var(--color-paper);
}
}
 
div.contrib{
/* -------------- P A G E - S T Y L E - E N D S*/
      page: contrib;
/* -------------- T E X T - S T Y L E -------  */
 
 
h1{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h1-font-size);
    font-weight: unset;
    line-height: calc(var(--h1-font-size) + 1.5pt);
    text-wrap: pretty;
}
}


h2{
span.bookcover {
    color: var(--highlight-text-color);
string-set: sectiontitle content(text);  
    font-family: var(--title-font);
        font-size: 140px;
    font-size: var(--h2-font-size);
        line-height: 0.55;
    font-weight: unset;
margin: 0;
    line-height: calc(var(--h2-font-size) + 1.5pt);
        font-family: 'Anthony';
    text-wrap: pretty;
        position:relative;
        hyphens:auto;
color: aqua;
}
}


h3{
span.coversubtitle{
    color: var(--highlight-text-color);
string-set:sectiontitle content(text);  
    font-family: var(--title-font);
font-size: 50px;
    font-size: var(--h3-font-size);
  font-family: 'Anthony';
    line-height: calc(var(--h3-font-size) + 1.5pt);
  line-height: 0.55em;
    text-wrap: pretty;
}
}


h4{
span.frenchtitle{
    color: var(--highlight-text-color);
string-set: sectiontitle content(text);  
    font-family: var(--title-font);
        font-size: 150px;
    font-size: var(--h4-font-size);
        line-height: 0.55;
    line-height: calc(var(--h4-font-size) + 1.5pt);
margin: 0;
    text-wrap: pretty;
        font-family: 'Anthony';
        display:inline;
        position:relative;
        hyphens:auto;
        color: aqua;
}
}


 
body{
b{
        color: darkslateblue;
    color: var(--highlight-text-color);
font-size: var(--font-size);
line-height: 1.4;
        font-family: 'authentic';
}
}


p{
div.pagebreak{
     color: var(--body-text-color);
     page-break-after: always;
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
    text-indent: calc(var(--p-font-size) + 2pt);
    text-wrap: pretty;
}
}
 
div.nobreak{
ul, ol{
     page-break-inside: avoid;
     color: var(--body-text-color);
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
}
}


p a,
/* GENERAL ELEMENTS */
li a{
    color: var(--color-paper);
    background-color: var(--glitter-color);
    padding:0.1em 0.2em;
    text-decoration: none;
}


figcaption{
blockquote {
  font-family: var(--code-font);
font-family: 'authentic';
  font-color: var(--body-text-color);
}
}


 
h2{
/* authors */
margin-top:0;
h2 + p b {
font-weight: 600;
  padding: 10px;
line-height: 1;
  border-radius: 60% / 15px;
font-family: 'Anthony';
  border-top: 2.54px solid;
font-size: 2.6rem;
  border-bottom: 2.5px solid;
page-break-before: right;
}
}
 
.runningtitle {
 
   display:none;
/* -------------- T E X T - B L O C K - E N D S */
 
 
 
 
 
/* -------------- C O V E R - P A G E ------  */
 
/* animation adds randomness */
 
/* @keyframes morph {
    0% { border-radius:60% 40% 30% 70%/60% 30% 40% 40% }
  50% { border-radius:60% 30% 60% 40%/50% 70% 60% 60% }
   100% { border-radius:60% 40% 30% 70%/60% 30% 40% 60% }
} */
 
@page:first {
  margin-left: 20mm !important;
  background-color: var(--highlight-text-color);
/* animation: morph 8s ease-in-out infinite alternate; */
 
  @right-middle {
    content: none;
  }   
 
  @right-top {
    content: none;
  }
}
}
 
h2:not( .runningtitle ~ h2 ){
.bookcover h1 {
string-set: contributiontitle content(text);  
  font-family: malebolge;
  color: var(--color-paper);
  text-align: center;
  font-size: 4.3rem;
  line-height: 0.9;
}
}


/* -------------- C O V E R - P A G E - E N D S */
h3 {font-family: Anthony; font-size: 1.5em; line-height: 1;}


h3, h4, h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
    font-weight: 600;
}


 
p{
 
    margin: 0 0 1em 0;
 
/* -------------- I N L A Y - P A G E */
@page:nth(2) {
  margin: 0;
}
}


.inlay {
/*
  height: 100%;
.contrib p{
  width: 100%;
    orphans:2;
  position: absolute;
    widows:2;
  overflow: hidden;
  scale: 0.97;
  /* Masking edges option 1: use a predefined shape mask */
  mask: var(--spikes);
  border-radius: 130px;
}
}
*/


@page:nth(3) {
.thumb{
  margin: 0;
    /* image caption */
    font-size: 8pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: authentic;
}
}
 
img{
.inlay.option2 {
    position: relative;
  /* Masking edges option 2: use the alpha channel of a PNG image (has to be on this wiki) */
    display: block;
  mask-image: url(/wiki/images/4/4a/Mask-example.png);
    max-width: 100%;
  mask-size: 120% auto;
    height: auto;
    margin: 0 0 8pt 0;
}
}
 
.thumbinner{
.inlay::before {
    max-width:100%;
 
  content: var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title);
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  display: flex;
  align-items: center;
 
  font-family: amakan-sheet;
  background-color: var(--glitter-color);
  color: var(--color-paper);
  font-size: 4.96rem;
  line-height: 1.005;
  text-align: center;
  word-break: break-all;
 
  opacity: 0.8;
  rotate: -40deg;
  scale: 1.6;
  skew: 30px;
  transform: skew(-9.06turn, 51deg);
 
}
}
 
pre{
/* -------------- I N L A Y - P A G E - E N D S */
    font-size: 8pt;
 
    line-height: 1.8;
 
    white-space: pre;
 
    margin: 16pt 16pt;
 
/* -------------- C H I M E R A -------  */
 
h2 {
position: relative;
}
}
 
table{
h2::after,
    width: 100%;
h2::before {
  position: absolute;
  font-family: teranoptia;
  font-size: 0.5rem;
  --distance: -2rem;
}
}
h2::before {
sup{
  top: var(--distance); right: 0;
    line-height: 0;
  height: 100%; width: 100%;
  text-align: right;
}
}
h2::after {
a,
  top: calc( var(--distance) / 2 ); right: var(--distance);
a:visited,
  height: 600px; width: 100%;
a:active,
  text-align: left;
a:hover{
  writing-mode: vertical-rl;
    color: #ab00fa;
  text-orientation: mixed;
    text-decoration: none;
    border-bottom: 1px solid #ab00fa;
}
}


h2::before { content: "fgh attr mnb" }
/* specific details */
h2::after { content: "stuvwxyz yfgfgh FGHIJKLMN" }
a.external{
h2:nth-of-type(2n)::after { content: "fghij zxcv werttry" }
}
h2:nth-of-type(3n)::after { content: "werty fjrfjr hjhjhj asdfg" }


hr{
a.text{
  height: 1.5em;
    word-break: none !important;
  border: none;
}
  position: relative;
b,strong {
  align-content: center;
    font-weight:500;
  margin: 0;
}
}
small, .small {font-size: 8pt;}


hr::before{
span.reference-text {
    content: "WXXXUZ  WbcDbbl CXbXbcUcẊXXXUZ WbcDbbl";
     float: footnote;
    color: var(--highlight-text-color);
    font-family: teranoptia;
     font-size: 0.7rem;
    position: absolute;
    text-align: center;
    width: -webkit-fill-available;
}
}
 
.reference-text::footnote-call {
/* -------------- C H I M E R A - E N D S */
    font-family:'authentic';
 
 
 
/* ----------- D I S O R D E R E D - L I S T S */
 
.disordered {
  text-align: center;
}
}
 
       
.disordered p {
.reference-text::footnote-marker {
  font-weight: bold;
    font-family:'authentic';
  font-style: italic;
}
}
 
.contents ul{
.disordered ul {
    margin-top:0.5em;
  position: relative;
  list-style: none;
  columns: 2;
  line-height: 1;
  padding: 50px;
}
}
 
.contents h3{
.disordered ul li {
    margin-bottom: 0.5em;
  --xf: 150px; /* x-axis multiplication factor */
  --yf: 5.5px; /* y-axis multiplication factor */
  translate: calc( var(--xf) * var(--x) ) calc( var(--yf) * var(--y) );
  margin: 5px;
}
}


/* ideally, variables --x and --y are randomly generated for each list using plain Javascript, but manually also works */
.disordered ul li:nth-of-type(1n) { --x: 0.345; --y: 0.123; }
.disordered ul li:nth-of-type(2n) { --x: 0.468; --y: -0.353; }
.disordered ul li:nth-of-type(3n) { --x: -0.658; --y: 0.563; }
.disordered ul li:nth-of-type(4n) { --x: 0.013; --y: -0.067; }
.disordered ul li:nth-of-type(5n) { --x: -0.995; --y: -0.903; }
.disordered ul li:nth-of-type(6n) { --x: 0.245; --y: -0.789; }
.disordered ul li:nth-of-type(7n) { --x: 0.435; --y: 0.823; }
.disordered ul li:nth-of-type(8n) { --x: -0.125; --y: 0.943; }
.disordered ul li:nth-of-type(9n) { --x: -0.235; --y: 0.423; }
.disordered ul li:nth-of-type(10n) { --x: -0.345; --y: 0.723; }


/* -------------- D I S O R D E R E D - L I S T S */
/* WIKISTYLING */


.tocnumber { display: none; }


 
figcaption {font-size: 0.7em}
 
/* -------------- S C A T T E R - S P E C S */
 
img {
  border-radius: 3px;
  border: 5px solid var(--glitter-color);
}
 
#Bugreporting_how-to img {
  mask: var(--spikes);
}
 
/* -------------- S C A T T E R -  D S -----  */

Latest revision as of 12:15, 14 June 2025


@font-face {
  font-family: 'anthony';
  src: url('https://titipi.org/wiki/images/c/ce/Anthony.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/9/94/AUTHENTICSans-90.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/6/66/AUTHENTICSans-130.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/b/b1/AUTHENTICSans-150.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

:root{
	--font-size: 11pt;
}


@page{
	size: 148mm 210mm;
	margin: 17mm 15mm 19mm 15mm;

	@bottom-center{
		margin-top: -4mm;
		font-family: 'authentic';
		font-size: 9pt;
		content: counter(page);
	}
       @footnote {
           float: bottom;
           border-top: solid #222 thin;
           padding-top: 8pt;
           font-family: 'authentic';
font-size: 8pt;
       }

}
@page:first{

   background-image: url(https://titipi.org/wiki/images/6/6a/Cover-01.gif);
   background-size: 98%;
   background-repeat: no-repeat;
   background-position: center center;

	
	@top-center{
                font-family: Anthony;
		content: "";
                font-size:14pt;
                font-color:aqua;

	}

        @bottom-center{
                font-family: authentic;
		content: "The Institute for Technology In the Public Interest";
                font-size:12pt;

        }
}

@page:nth(2){        
        background-color: white;
         @bottom-center{
                content:"";
        }
}

@page:nth(3) {
	background-size: 98%;
        background-repeat: no-repeat;
        background-position: center;

@top-center{
                font-family: Anthony;
                font-size:12pt;
                content: "Spellbreak Training: A peer-to-peer cloud divestment network";

	}

        @bottom-center{
                font-family: authentic;
                font-size:12pt;
		        content: "The Institute for Technology In the Public Interest";
        }

}
@page:blank{
	background-color:white;
         @bottom-center{
                content:"";
color: white;
        }
}

div.section, div.section div.contrib:nth-of-type(1){
      break-before: right;
}
div.contrib:not(:first-of-type){
      break-before: always;    
}
div.contrib{
       page: contrib;
}

span.bookcover {
	string-set: sectiontitle content(text); 
        font-size: 140px;
        line-height: 0.55;
	margin: 0;
        font-family: 'Anthony';
        position:relative;
        hyphens:auto;
color: aqua;
}

span.coversubtitle{
	string-set:sectiontitle content(text); 
font-size: 50px;
  font-family: 'Anthony';
  line-height: 0.55em;
}

span.frenchtitle{
	string-set: sectiontitle content(text); 
        font-size: 150px;
        line-height: 0.55;
	margin: 0;
        font-family: 'Anthony';
        display:inline;
        position:relative;
        hyphens:auto;
        color: aqua;
}

body{
        color: darkslateblue;
	font-size: var(--font-size);
	line-height: 1.4;
        font-family: 'authentic';
}

div.pagebreak{
    page-break-after: always;
}
div.nobreak{
    page-break-inside: avoid;
}

/* GENERAL ELEMENTS */

blockquote {
font-family: 'authentic';
}

h2{
margin-top:0;
font-weight: 600;
line-height: 1;
font-family: 'Anthony';
font-size: 2.6rem;
page-break-before: right;
}
.runningtitle {
  display:none;
}
h2:not( .runningtitle ~ h2 ){
	string-set: contributiontitle content(text); 
}

h3 {font-family: Anthony; font-size: 1.5em; line-height: 1;}

h3, h4, h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
    font-weight: 600;
}

p{
    margin: 0 0 1em 0;
}

/*
.contrib p{
    orphans:2;
    widows:2;
}
*/

.thumb{
    /* image caption */
    font-size: 8pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: authentic;
}
img{
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 8pt 0;
}
.thumbinner{
    max-width:100%;
}
pre{
    font-size: 8pt;
    line-height: 1.8;
    white-space: pre;
    margin: 16pt 16pt;
}
table{
    width: 100%;
}
sup{
    line-height: 0;
}
a,
a:visited,
a:active,
a:hover{
    color: #ab00fa;
    text-decoration: none;
    border-bottom: 1px solid #ab00fa;
}

/* specific details */
a.external{
}

a.text{
    word-break: none !important;
}
b,strong {
     font-weight:500;
}
small, .small {font-size: 8pt;}

span.reference-text { 
    float: footnote;
}
.reference-text::footnote-call {
    font-family:'authentic';
}
        
.reference-text::footnote-marker {
    font-family:'authentic';
}
.contents ul{
    margin-top:0.5em;
}
.contents h3{
    margin-bottom: 0.5em;
}


/* WIKISTYLING */

.tocnumber { display: none; }

figcaption {font-size: 0.7em}