/*******************************************************************************************************************/
/* virtual space and time *******************************************************************************************
 * tune.css 
 * woensdag 12 januari 2022 05:34:19 CET
 * zaterdag 17 juni 2023
 ********************************************************************************************************************/

/*********************************************************************************************************************
 *
 * link: https://en.wikipedia.org/wiki/List_of_common_resolutions
 *                                                                width*height   store   display  pixel     pixels
 *
 *  WXGA:Max    Apple 13" MacBook Air                 1.1          1280×800        8.5     8.5     1:1     1,024,000   
 *  5.18MA	Apple 15" MacBook Pro Retina Display  10.1 11.5	   2880×1800	   8∶5	   8∶5	   1∶1	   5,184,000
 *
 **********************************************************************************************************************/

/*************************************************************************
 *
 * aspect ratio 
 *
 * link: https://en.wikipedia.org/wiki/Aspect_ratio
 *
 * Rectangles
 *
 * For a rectangle, the aspect ratio denotes the ratio 
 * of the width to the height of the rectangle. 
 * A square has the smallest possible aspect ratio of 1:1.

 * Examples
    
    4:3 = 1.3: 
    
    Some (not all) 20th century computer monitors 
    (VGA, XGA etc.), standard-definition television

    2 : 1 = 1.414... 

    international paper sizes (ISO 216)

    3:2 = 1.5: 		35mm still camera film, iPhone (until iPhone 5) displays
    16:10 = 1.6: 	commonly used widescreen computer displays (WXGA)
    Φ:1 = 1.618...: 	golden ratio, close to 16:10
    5:3 = 1.6: 		super 16 mm, a standard film gauge in many European countries
    16:9 = 1.7: 	widescreen TV
    2:1 = 2: 		dominoes
    64:27 = 2.370: 	ultra-widescreen, 21:9
    32:9 = 3.5: 	super ultra-widescreen

 * Ellipses

 * For an ellipse, the aspect ratio denotes the ratio 
 * of the major axis to the minor axis. 
 * An ellipse with an aspect ratio of 1:1 is a circle.

 * https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

 * The aspect-ratio  CSS property sets a preferred aspect ratio 
 * for the box, which will be used in the calculation 
 * of auto sizes and some other layout functions.

   aspect-ratio: 1 / 1;
   aspect-ratio: 1;

   * Global values *
   
   aspect-ratio: inherit;
   aspect-ratio: initial;
   aspect-ratio: revert;
   aspect-ratio: unset;

    Formal syntax

    auto | <ratio>

    Examples
    Examples of values for aspect-ratio

    aspect-ratio: 1 / 1;
    aspect-ratio: 16 / 9;
    aspect-ratio: 0.5;

    Mapping width and height to aspect-ratio

    Browsers have added an internal aspect-ratio property 
    that applies to replaced elements 
    and other related elements that accept width and height attributes. 
    This appears in the browser's internal UA stylesheet.

    In Firefox, the internal stylesheet rule looks like this:

! *************** 
 
    img, input[type="image"], video, embed, iframe, marquee, object, table {
      aspect-ratio: attr(width) / attr(height);
    }

! ***************

  * Minimum aspect ratio *

  @media (min-aspect-ratio: 8/5) {
    div {
      background: #9af; * blue *
    }
  }

  * Maximum aspect ratio *
  @media (max-aspect-ratio: 3/2) {
    div {
      background: #9ff;  * cyan *
    }
  }

  * Exact aspect ratio, put it at the bottom to avoid override *
  @media (aspect-ratio: 1/1) {
    div {
      background: #f9a; * red *
    }
  }

 *****************************************************************************/

/* ****************************************************************************
 *
 * link:https://drafts.csswg.org/mediaqueries/#values
 *
 * at rules
 *
 * https://css-tricks.com/the-at-rules-of-css/
 *
 * https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
 * wo 12 jan 2022 05:11:21 CET
 *
 * *** Syntax ***
 *
 * ** Regular **
 *
 * General structure *
 * @IDENTIFIER (RULE);
 *
 * Example: tells browser to use UTF-8 character set *
 * @charset "utf-8";

 * There are several regular at-rules, 
 * designated by their identifiers,
 * each with a different syntax:

 *  @charset — Defines the character set used by the style sheet.
 *  @import — Tells the CSS engine to include an external style sheet.
 *  @namespace — Tells the CSS engine that all its content
                  must be considered prefixed with an XML namespace.
 *
 * ** Nested **

 * @IDENTIFIER (RULE) {
 *
 * }

 * A subset of nested statements, which can be used as a statement of a
 * style sheet as well as inside of conditional group rules.

 *  @media — A conditional group rule that will apply its content if the
    device meets the criteria of the condition defined using a media
    query.
    
 *  @supports — A conditional group rule that will apply its content if
    the browser meets the criteria of the given condition.
    
 *  @document — A conditional group rule that will apply its content if
    the document in which the style sheet is applied meets the criteria
    of the given condition. (deferred to Level 4 of CSS Spec)
    
 *  @page — Describes the aspect of layout changes that will be applied
    when printing the document.
    
 *  @font-face — Describes the aspect of an external font to be
    downloaded.
    
  * @keyframes — Describes the aspect of intermediate steps in a CSS
    animation sequence.
    
 *  @viewport — Describes the aspects of the viewport for small screen
    devices. (currently at the Working Draft stage)
    
 *  @counter-style — Defines specific counter styles that are not part of
    the predefined set of styles. (at the Candidate Recommendation stage,
    but only implemented in Gecko as of writing) @font-feature-values
    (plus @swash, @ornaments, @annotation, @stylistic, @styleset and
    @character-variant) — Define common names in font-variant-alternates
    for feature activated differently in OpenType. (at the Candidate
    Recommendation stage, but only implemented in Gecko as of writing)
    
 * @property — Describes the aspect of custom properties and variables.
    (currently at the Working Draft stage) @color-profile — Allows a
    color profile to be defined for use by the color() function.
    
 * ****************************************************************************/

/******************************************************************************
 * link: https://css-tricks.com/complete-guide-to-css-functions/
 * di 11 jan 2022 18:25:33 CET
 ******************************************************************************/

/* *****************************************************************************
 *
 * custom properties
 *
 * [ double hyphen: -- ]
 *
 * link: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 *
 * ****************************************************************************/

 /****************************************************************************************
  * link: https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution
  *
  * javascript:
  * var root = document.documentElement;
  *
  * document.addEventListener('resize', () => {
  * 	root.style.setProperty('--screen-x', window.screenX)
  * 	root.style.setProperty('--screen-y', window.screenY)
  * })
  * link: https://www.w3schools.com/jsref/prop_screen_width.asp
  *
  * let text = "Total width/height: " + screen.width + "*" + screen.height + "<br>" +
  * "Available width/height: " + screen.availWidth + "*" + screen.availHeight + "<br>" +
  * "Color depth: " + screen.colorDepth + "<br>" +
  * "Color resolution: " + screen.pixelDepth; 
  *
  * link:https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
  *
  * const declaration = document.styleSheets[0].cssRules[0].style;
  * const value = declaration.getPropertyValue("margin"); // "1px 2px"
  *
  * retrieved: donderdag 29 06 juni 2023
  **********************************************************************************************/

  /** 
   * link: https://www.nngroup.com/articles/golden-ratio-ui-design/
   * date: donderdag 06 07 2023
   *
   * Different font sizes can be in a golden ratio. 
   * Let’s say the body-font size on your website is 16px. 
   * The header-font size could be a golden-ratio multiple 
   * of your body size — that is, it could be 
   * 16 φ = 16 x 1.618 = 25.88 or roughly 26px. 

   * Some also use the golden ratio to determine the line height 
   * needed for a particular font size to be in a golden ratio. 
   * The line height is the font height plus the white space 
   * between lines of text — it basically governs how tightly arranged 
   * the lines of text are in a paragraph.
   * For example, if you had a font size of 16px for your body copy, 
   * the line height could be 16 φ = 16 x 1.618 = 25.88 or, again, roughly 26px. 
 
   * link: https://dev.to/adrianbdesigns/mastering-css-vertical-rhythm-om9
   * link: https://developer.mozilla.org/en-US/docs/Web/CSS/offset
   * date: Woensdag 05 07 2023
   *
   * Vertical rhythm is usually used on following CSS properties:
   *
   *    Typography - line-height
   *    Spacing - padding (top and bottom), margin (top and bottom)
   *    Offsets - top, bottom
   *    Size - height, min-height, max-height

   * Notice how we don't use vertical rhythm for font-size. 
   * Modular scale is usually used for font sizes in typography. 
   * Vertical rhythm is only used for spacing and vertical size.

   * First off, we need to determine the rhythm unit. 
   * This will act as a base for multiplication for calculating vertical ryhthm. 
   * Since vertical rhythm is tied with repetition, 
   * and the most repetitive spacing on any website is a line-height of body element, 
   * the base line-height of a page. We'll use this base line-height as rhythm-unit.    
   *
   * follows: params and proportions used here & now 
   **/

/** 
 * Start Global Variables 
 **/

@charset "UTF-8";

:root {

  aspect-ratio: 1.6;
  --scale: 1.618;  
  --size-ratio: calc(--scale * 10);

/**  
 * 1440 / 900 - 2880 / 1800 - 16/10 - 8/5 => 1.6 
 * --screenwidth: 1440px; 100% 
 * --screenheight: 900px; 100% 
 * font-size: 100%  =  font-size: 1em = [if] font-size:16px 
 **
 * The relation between the absolute units is as follows: 
 * 1in = 2.54cm = 25.4mm = 72pt = 6pc I 
 **/
  
/** 
 * link: https://developer.mozilla.org/en-US/docs/Web/CSS/ratio 
<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?  

@media screen and (min-aspect-ratio: 16/9) {
 [ expression / parameter ]
 }
link: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
<resolution> 
 
@media print and (min-resolution: 300dpi) {
 [ expression / parameter ] 
}

 }
 link: https://developer.mozilla.org/en-US/docs/Web/CSS/width
 
   * The width CSS property sets an element's width. 
   * By default, it sets the width of the content area, 
   * but if box-sizing is set to border-box, 
   * it sets the width of the border area.
 
 link: https://developer.mozilla.org/en-US/docs/Web/CSS/height
 
   * The height CSS property specifies the height of an element. 
   * By default, the property defines the height of the content area. 
   * If box-sizing is set to border-box, however, 
   * it instead determines the height of the border area.

 link: https://www.javascripttutorial.net/javascript-dom/javascript-width-height/
 
**/
  
/*
 *  golden ratio: 1.61803398875 => {\displaystyle \varphi ={\frac {1+{\sqrt {5}}}{2}}=}1.618033988749....
 *  link: https://en.wikipedia.org/wiki/Golden_mean_(philosophy)
 *  link: https://en.wikipedia.org/wiki/Golden_mean_(Judaism)
 *  link: https://en.wikipedia.org/wiki/Golden_ratio
 */
 
/*  --size-legal: 0.85rem; * 0.85% */
  
/*******************************************************************************
 * rem -> font size relative to the 'root' : html
 * em -> font size relative to the 'nearest parent' 
 ********************************************************************************/
 /*******************************************************************************
 * css -> measure: units
 * https://css-tricks.com/rems-ems/
 * https://www.webanizr.nl/blog/article/maateenheden-in-webdesign
 *****************************************************************
 * Absolute length units

 * The following are all absolute length units — they are not relative to
   anything else, and are generally considered to always be the same size.

   Unit Name 	Equivalent to
   cm 	Centimeters 	1cm = 37.8px = 25.2/64in
   mm 	Millimeters 	1mm = 1/10th of 1cm
   Q 	Quarter-millimeters 	1Q = 1/40th of 1cm
   in 	Inches 	1in = 2.54cm = 96px
   pc 	Picas 	1pc = 1/6th of 1in
   pt 	Points 	1pt = 1/72th of 1in
   px 	Pixels 	1px = 1/96th of 1in

 * Relative length units

 * Relative length units are relative to something else, perhaps the size
   of the parent element's font, or the size of the viewport. The benefit
   of using relative units is that with some careful planning you can
   make it so the size of text or other elements scales relative to
   everything else on the page. Some of the most useful units for web
   development are listed in the table below.

   Unit 	Relative to

   em 	Font size of the parent, 
	in the case of typographical properties
	like font-size, and font size of the element itself,
	in the case of other properties like width.
   ex 	x-height of the element's font.
   ch 	The advance measure (width) of the glyph "0" of the element's font.
   rem 	Font size of the root element.
   lh   Line height of the element.
   vw 	1% of the viewport's width.
   vh 	1% of the viewport's height.
   vmin 1% of the viewport's smaller dimension.
   vmax 1% of the viewport's larger dimension.

 ******************************************************************************/
 
/* ***************************************************************************
 * zeta functions
 * or
 * root of unity -> 1 [ eenheidswortel ]
 * ***************************************************************************/

/* ****************************************************************************
 * In mathematics (particularly calculus),
 * an arbitrarily small positive quantity is commonly denoted ε;
 * see (ε, δ)-definition of limit.
 * In reference to this, the late mathematician Paul Erdős
 * also used the term "epsilons" to refer to children (Hoffman 1998, p. 4).
 ******************************************************************************/

/* ******************************************************************************
 *   Difference operator and difference equations

 *  The difference operator is an operator that maps sequences to sequences,
 *  and, more generally, functions to functions. 
 *  It is commonly denoted Δ , {\displaystyle \Delta ,} \Delta , 
 *  and is defined, in functional notation, as

    ( Δ f ) ( x ) = f ( x + 1 ) − f ( x ) .
  ****************************************************************************/
  
  --size-alpha: calc(var(--scale) * var(--size-ratio)); /* 1.618 * 16.18 */  
  --size-beta: calc(var(--scale) * var(--size-alpha)); /* 1.618 * 26.17924 = 42.3580103 */  
  --size-gamma: calc(var(--scale) * var(--size-beta)); /* 1.618 * 42.3580103 = 68.5352607 */
  --size-delta: calc(var(--scale) * var(--size-gamma)); /* 1.618 * 6.85352607 = 110.890052 */
  --size-epsilon: calc(var(--scale) * var(--size-delta)); /* 1.618 * 110.890052 = 179.420104 */
  --size-digamma: calc(var(--scale) * var(--size-epsilon)); /* 1.618 * 179.420104 = 290.301728 */

/******************************************************************************
 * https://en.wikipedia.org/wiki/Cardinal_number
 * https://en.wikipedia.org/wiki/Ordinal_number
 ******************************************************************************/

  --color-red: rgba(139,0,0,.6); /* #8b0000 darkred */
  --color-green: rgba(0,100,0,.6); /* #006400 darkgreen */
  --color-olivedrab: rbga(107,142,35,.6); /* #6B 8E 23; */
  --color-blue: rgba(25,25,112,.6); /* #191970 midnightblue */
  --color-indigo: rgba(75,0,130,.6);
  --color-violet: rgba(148,0,211,.6);  /* #9400D3 DarkViolet */
  --color-yellow: rgba(184,134,11,.6); /* #b88860b darkgoldenrod */ 
  --color-palegoldenrod: rbga(238,232,170,.6); /* #EEE8AA;*/
  --color-white: rgba(255,255,255,.6); /* #ffffff wit */
  --color-ivory: rbga(255,255,240,.9); /* #fffff0 */
  --color-snow: rbga(255,250,250,.6); /* #fffafa; */
  --color-orange: rgba(255,69,0,.6); /* #ff4500 orangered */
  --color-brown: rgba(128,0,0,.6); /* #800000 maroon */
 
  --border-radius-big: .99rem;
  --border-radius-medium: .66rem;
  --border-radius-small: .33rem;
  --border-radius-tiny: .168rem;
 
  --font-site: "Mirza", normal;
  --font-code: "Inconsolata", monospace;
 
  --transition-duration-short: 125ms;
  --transition-duration-long: 200ms;
  --transition-duration-longer: 750ms;
}

/* ****************************************************************************
 * https://fonts.google.com/specimen/Rubik
 * Designed by Hubert and Fischer, Meir Sadan, Cyreal
 * https://fonts.google.com/specimen/Inconsolata
 * Designed by Raph Levien
 * ****************************************************************************/

*,
*::before,
*::after {
  box-sizing: content-box;
}

/********************************************************************************
 * link: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
 * retrieved: vrijdag 16 06 juni 20223
 * link: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
 * retrieved: donderdag 15 06 juni 20023
 * m.s.i.t.v.b. marinth@okairos.nu

> quote:

* By default in the CSS box model, 
* the width and height you assign to an element 
* is applied only to the element's content box. 
* If the element has any border or padding, 
* this is then added to the width and height 
* to arrive at the size of the box 
* that's rendered on the screen. 
* This means that when you set width and height, 
* you have to adjust the value you give
* to allow for any border or padding that may be added. 

* For example, if you have four boxes with width: 25%;, 
* if any has left or right padding 
* or a left or right border, 
* they will not by default fit 
* on one line within the constraints 
* of the parent container.

* The box-sizing property can be used to adjust this behavior:

* content-box gives you the default CSS box-sizing behavior. 

* If you set an element's width to 100 pixels, 
* then the element's content box will be 100 pixels wide, 
* and the width of any border or padding 
* will be added to the final rendered width, 
* making the element wider than 100px. 

* border-box tells the browser 
* to account for any border and padding 
* in the values you specify for an element's width and height. 
* If you set an element's width to 100 pixels, 
* that 100 pixels will include any border or padding 
* you added, and the content box will shrink to absorb that extra width. 
* This typically makes it much easier to size elements. 
* box-sizing: border-box is the default styling 
* that browsers use for the <table>, <select>, 
* and <button> elements, 
* and for <input> elements whose type 
* is radio, checkbox, reset, button, submit, color, or search.

< quote -

 link: https://dev.to/adrianbdesigns/mastering-css-vertical-rhythm-om9
 Woensdag 05 07 Juli 2023

***********************************************************************************/

 * {
 align-items: center;
 text-align: center;
 overflow-x: hidden;
 overflow-y: hidden;
 /* Hide scrollbar for IE, Edge and Firefox */
 -ms-overflow-style: none;  /* IE and Edge */
 scrollbar-width: none;  /* Firefox */
 }

html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
  scroll-behavior: smooth;
  ms-overflow-style: none;
  scrollbar-width: none;
/** 
 * error in parsing value -moz /-webkit- / text-size-adjust
 * - experimental -
 **/
  font-size: var(--size-alpha);
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
 }

 html::-webkit-scrollbar {
  display: none;
 }

 body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
  align-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-site);
  line-height: var(--scale);  
  color: var(--color-blue);
  animation-name: fade;
  animation-duration: 5s;
}

/** 
 * Fading animation 
 * .fades {
 *   animation-name: fade;
 *   animation-duration: 1.5s;
 * }
 **/

 @keyframes fade {
  from {opacity: .1} 
  to {opacity: 1}
}

 .ruimte {
    margin-top: 0;
    padding: 0;
    overflow: auto;
    align-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--font-site);
    line-height: var(--scale);  
    color: var(--color-blue);
/*    background: url('../beeld/papier/rauhfaser.rozig_2880.webp');  */
  }
 #page {
    margin: var(--size-beta);
    width: 100%;
    height: auto;
    align-items: center;
    font-size: var(--size-alpha);
 }
 .linksom, 
 .rechtsom {
    width: 25%;
    margin: 0;
    padding: 0;
    float: left;
 }
 .midden {
/*
    @media screen and (aspect-ratio: 3/4) {
    middle.width: 50%; }
    @media screen and (aspect-ratio: 16/9) {
    middle.width: 49%; }
*/
    width: 50%;
    margin: 0;
    padding: 0;
    float: left;
    border: .15em;
    border-radius: .25em;
    align-items: center;
    text-align: center;
/*    box-shadow: 1px -1px 1px 7px rbga(0,0,0,.9); */
 }
/*
.left pre,
.right pre {
    max-width: 25%;
    font-size: var(--size-ratio);
    font-family: var(--font-site);
 }
*/

p:first-letter {
    font-size: 150%;
    text-indent: 2em;
}

<script>

 var pfx = ["webkit", "moz", "ms", "o", ""];
 function RunPrefixMethod(obj, method) {

     var p = 0, m, t;
     while (p < pfx.length && !obj[m]) {
	m = method;
	if (pfx[p] == "") {
	    m = m.substr(0,1).toLowerCase() + m.substr(1);
	 }
	m = pfx[p] + m;
	t = typeof obj[m];
	if (t != "undefined") {
	    pfx = [pfx[p]];
	    return (t == "function" ? obj[m]() : obj[m]);
	}
	p++;
    }

 }

/*
 * We can then make any element viewable full screen
 * by attaching a handler function which determines whether
 * it’s in full-screen mode already and acts accordingly:
 */


 var e = document.getElementById("fullscreen");

 e.onclick = function() {

    if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
	RunPrefixMethod(document, "CancelFullScreen");
    }
    else {
	RunPrefixMethod(e, "RequestFullScreen");
    }

 }
 
</script>