/*** Base typographic CSS (in progress) ***/
/*** ddelcourt 1.24 ***/

/* Set box-sizing globally to handle padding and border widths */
*,
*:after,
*:before {
  box-sizing: border-box;
}

:root {

  --inner-screen: '500px';
  /* ************************************************ */
  /*                    Settings                      */
  /* ************************************************ */

/* Base variables */
  /* --fontSize: calc(11px + 1.3vw); */
  /* --fontSize: calc(11px + var(--inner-screen) * .013); */
  --fontSize: 17px;
  --lineHeight-ratio: 1.28;
  --x-height-ratio: .6;
  --columns-count: 8;

/* Size results */
  --lineHeight: calc(var(--fontSize) * (var(--lineHeight-ratio)));
  --x-height:   calc(var(--fontSize)* (var(--x-height-ratio)));
  --x-to-base: calc(var(--fontSize)* (calc(1 - var(--x-height-ratio))));

/* Spacing results */
 --gutter-width: calc(var(--lineHeight) + var(--x-to-base));
 --margin: calc(var(--gutter-width) / 2);

 /* spiegel /  / columns properties */
 --spiegel-width: calc(100% - calc(var(--margin) * 2)); /* spiegel = wrapper */
 --column-width: calc( var(--spiegel-width) / var(--columns-count) - (var(--gutter-width) * ( var(--columns-count) - 1 ) / var(--columns-count))) ;

/* Base font settings */
  --fontWeight: 350;
  --letterSpacing: calc(var(--fontSize) * 0.0015);

  /* Baseline Variables */

  /* ************************************************ */
  /*       indents values [in terms of columns]       */
  /* ************************************************ */

  --indent1: calc(var(--column-width) + var(--gutter-width));
  --indent2: calc(var(--column-width) * 2 + var(--gutter-width) * 2);
  --indent3: calc(var(--column-width) * 3 + var(--gutter-width) * 3);
  --indent4: calc(var(--column-width) * 4 + var(--gutter-width) * 4);
  --indent5: calc(var(--column-width) * 5 + var(--gutter-width) * 5);
  --indent6: calc(var(--column-width) * 6 + var(--gutter-width) * 6);
  --indent7: calc(var(--column-width) * 7 + var(--gutter-width) * 7);

    /* ************************************************ */
    /*   image/divs-width values [in terms of columns]  */
    /* ************************************************ */
    
    --width1: calc(var(--column-width) * 1 + var(--gutter-width) * 0); 
    --width2: calc(var(--column-width) * 2 + var(--gutter-width) * 1); 
    --width3: calc(var(--column-width) * 3 + var(--gutter-width) * 2); 
    --width4: calc(var(--column-width) * 4 + var(--gutter-width) * 3); 
    --width5: calc(var(--column-width) * 5 + var(--gutter-width) * 4); 
    --width6: calc(var(--column-width) * 6 + var(--gutter-width) * 5); 
    --width7: calc(var(--column-width) * 7 + var(--gutter-width) * 6); 
    --width8: calc(var(--column-width) * 8 + var(--gutter-width) * 7); 

    /* ********************************************** */
    /* top-margins values [in terms of lines of text] */
    /* ********************************************** */

  --margin-top1: calc((var(--lineHeight) * 1) + var(--x-to-base));
  --margin-top2: calc((var(--lineHeight) * 2) + var(--x-to-base));
  --margin-top3: calc((var(--lineHeight) * 3) + var(--x-to-base));
  --margin-top4: calc((var(--lineHeight) * 4) + var(--x-to-base));
  --margin-top5: calc((var(--lineHeight) * 5) + var(--x-to-base));
  --margin-top6: calc((var(--lineHeight) * 6) + var(--x-to-base));
  --margin-top7: calc((var(--lineHeight) * 7) + var(--x-to-base));
  --margin-top8: calc((var(--lineHeight) * 8) + var(--x-to-base));
  --margin-top9: calc((var(--lineHeight) * 9) + var(--x-to-base));
  --margin-top10: calc((var(--lineHeight) * 10) + var(--x-to-base));
  --margin-top11: calc((var(--lineHeight) * 11) + var(--x-to-base));
  --margin-top12: calc((var(--lineHeight) * 12) + var(--x-to-base));
  --margin-top13: calc((var(--lineHeight) * 13) + var(--x-to-base));
  --margin-top14: calc((var(--lineHeight) * 14) + var(--x-to-base));

    /* ************************************************ */
    /* image/divs-heights values [in terms of lines of text] */
    /* ************************************************ */

    --height1: calc((var(--lineHeight) * 0) + var(--x-height));
    --height2: calc((var(--lineHeight) * 1) + var(--x-height));
    --height3: calc((var(--lineHeight) * 2) + var(--x-height));
    --height4: calc((var(--lineHeight) * 3) + var(--x-height));
    --height5: calc((var(--lineHeight) * 4) + var(--x-height));
    --height6: calc((var(--lineHeight) * 5) + var(--x-height));
    --height7: calc((var(--lineHeight) * 6) + var(--x-height));
    --height8: calc((var(--lineHeight) * 7) + var(--x-height));
    --height9: calc((var(--lineHeight) * 8) + var(--x-height));
    --height10: calc((var(--lineHeight) * 9) + var(--x-height));
    --height11: calc((var(--lineHeight) * 10) + var(--x-height));
    --height12: calc((var(--lineHeight) * 11) + var(--x-height));
    --height13: calc((var(--lineHeight) * 12) + var(--x-height));
    --height14: calc((var(--lineHeight) * 13) + var(--x-height));
    --height15: calc((var(--lineHeight) * 14) + var(--x-height));
    --height16: calc((var(--lineHeight) * 15) + var(--x-height));
    --height17: calc((var(--lineHeight) * 16) + var(--x-height));
    --height18: calc((var(--lineHeight) * 17) + var(--x-height));
    --height19: calc((var(--lineHeight) * 18) + var(--x-height));
    --height20: calc((var(--lineHeight) * 19) + var(--x-height));


}

/* Baseline Shorthands */

  /* ************************************************ */
  /*       indents values [in terms of columns]       */
  /* ************************************************ */

  .indent1{ margin-left: calc(var(--column-width) + var(--gutter-width)); }
  .indent2{ margin-left: calc(var(--column-width) * 2 + var(--gutter-width) * 2); }
  .indent3{ margin-left: calc(var(--column-width) * 3 + var(--gutter-width) * 3); }
  .indent4{ margin-left: calc(var(--column-width) * 4 + var(--gutter-width) * 4); }
  .indent5{ margin-left: calc(var(--column-width) * 5 + var(--gutter-width) * 5); }
  .indent6{ margin-left: calc(var(--column-width) * 6 + var(--gutter-width) * 6); }
  .indent7{ margin-left: calc(var(--column-width) * 7 + var(--gutter-width) * 7); }
    
    @media only screen and (max-width: 568px) {
      .indent1, .indent2, .indent3 { margin-left: 0;}
      .indent4, .indent5, .indent6, .indent7 { margin-left: calc(var(--column-width) * 4 + var(--gutter-width) * 4);}
      }
  
  
    /* ************************************************ */
    /*   image/divs-width values [in terms of columns]  */
    /* ************************************************ */
    
  .width1{ width: calc(var(--column-width) * 1 + var(--gutter-width) * 0); }
  .width2{ width: calc(var(--column-width) * 2 + var(--gutter-width) * 1); }
  .width3{ width: calc(var(--column-width) * 3 + var(--gutter-width) * 2); }
  .width4{ width: calc(var(--column-width) * 4 + var(--gutter-width) * 3); }
  .width5{ width: calc(var(--column-width) * 5 + var(--gutter-width) * 4); }
  .width6{ width: calc(var(--column-width) * 6 + var(--gutter-width) * 5); }
  .width7{ width: calc(var(--column-width) * 7 + var(--gutter-width) * 6); }
  .width8{ width: calc(var(--column-width) * 8 + var(--gutter-width) * 7); }
  
    @media only screen and (max-width: 568px) {
      .width1, .width2, .width3, .width4{ width: calc(var(--column-width) * 4 + var(--gutter-width) * 3); }
      .width5, .width6, .width7, .width8{ width: calc(var(--column-width) * 8 + var(--gutter-width) * 7); }
        }  
  
    /* ********************************************** */
    /* top-margins values [in terms of lines of text] */
    /* ********************************************** */

  .margin-top1{margin-top: calc((var(--lineHeight) * 1) + var(--x-to-base));}
  .margin-top2{margin-top: calc((var(--lineHeight) * 2) + var(--x-to-base));}
  .margin-top3{margin-top: calc((var(--lineHeight) * 3) + var(--x-to-base));}
  .margin-top4{margin-top: calc((var(--lineHeight) * 4) + var(--x-to-base));}
  .margin-top5{margin-top: calc((var(--lineHeight) * 5) + var(--x-to-base));}
  .margin-top6{margin-top: calc((var(--lineHeight) * 6) + var(--x-to-base));}
  .margin-top7{margin-top: calc((var(--lineHeight) * 7) + var(--x-to-base));}
  .margin-top8{margin-top: calc((var(--lineHeight) * 8) + var(--x-to-base));}
  .margin-top9{margin-top: calc((var(--lineHeight) * 9) + var(--x-to-base));}
  .margin-top10{margin-top: calc((var(--lineHeight) * 10) + var(--x-to-base));}
  .margin-top11{margin-top: calc((var(--lineHeight) * 11) + var(--x-to-base));}
  .margin-top12{margin-top: calc((var(--lineHeight) * 12) + var(--x-to-base));}
  .margin-top13{margin-top: calc((var(--lineHeight) * 13) + var(--x-to-base));}
  .margin-top14{margin-top: calc((var(--lineHeight) * 14) + var(--x-to-base));}
  
  
    /* ************************************************ */
    /* image/divs-heights values [in terms of lines of text] */
    /* ************************************************ */

  .height1{height: calc((var(--lineHeight) * 0) + var(--x-height));}
  .height2{height: calc((var(--lineHeight) * 1) + var(--x-height));}
  .height3{height: calc((var(--lineHeight) * 2) + var(--x-height));}
  .height4{height: calc((var(--lineHeight) * 3) + var(--x-height));}
  .height5{height: calc((var(--lineHeight) * 4) + var(--x-height));}
  .height6{height: calc((var(--lineHeight) * 5) + var(--x-height));}
  .height7{height: calc((var(--lineHeight) * 6) + var(--x-height));}
  .height8{height: calc((var(--lineHeight) * 7) + var(--x-height));}
  .height9{height: calc((var(--lineHeight) * 8) + var(--x-height));}
  .height10{height: calc((var(--lineHeight) * 9) + var(--x-height));}
  .height11{height: calc((var(--lineHeight) * 10) + var(--x-height));}
  .height12{height: calc((var(--lineHeight) * 11) + var(--x-height));}
  .height13{height: calc((var(--lineHeight) * 12) + var(--x-height));}
  .height14{height: calc((var(--lineHeight) * 13) + var(--x-height));}
  .height15{height: calc((var(--lineHeight) * 14) + var(--x-height));}
  .height16{height: calc((var(--lineHeight) * 15) + var(--x-height));}
  .height17{height: calc((var(--lineHeight) * 16) + var(--x-height));}
  .height18{height: calc((var(--lineHeight) * 17) + var(--x-height));}
  .height19{height: calc((var(--lineHeight) * 18) + var(--x-height));}
  .height20{height: calc((var(--lineHeight) * 19) + var(--x-height));}