body { text-align: center; font-family: Arial; background-color: white; }


p { font-family: arial; }


table{ width: 1000px; text-align: left; text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased; line-height:200%; margin:auto; }


a:link { text-decoration: none; color: #6050DC   	 	!important; }

a:visited { text-decoration: none; color: #8EA2C6 	!important;  }

a:hover { text-decoration: none; color: #6F00FF 	 	!important; }

a:active { text-decoration: none; color: #000000	!important; }

/*ARCHIVES FROM BEFORE 2020 Major Tom Birthday*/
/*CURRENT OVERRIDING CSS*/

body{margin:0;padding:0;max-width:100vw !important;position:relative;overflow-x:hidden;scroll-behavior:unset;background-color:black;color:#ccc;letter-spacing:.02em !important;scrollbar-color:grey black;scrollbar-width:thin;line-height:1.15;-webkit-text-size-adjust: 100%;/*iOS*/}
img {
  height:unset !important;
  width:unset !important;
  border-style:none; /*IE10*/
}
img, iframe{
  max-width:100vw !important;
  max-height:100vh !important; 
}
body,p,img,span,iframe,font{box-sizing:border-box;}
table:first-of-type p:nth-of-type(2) nobr a{display:inline-block !important;/*Android Chrome?*/letter-spacing:initial;font-size:13px !important/*?*/;}
table:first-of-type p:nth-of-type(2),p,p font,table{max-width:100vw !important;word-wrap: break-word !important;/*Android Chrome?*/}
table:first-of-type img,table:last-of-type img,img[src$="logo_google_sherlock.gif"],img[src*="z_symbol_at_guardian"]{filter:invert(1) hue-rotate(470deg) brightness(1) sepia(1) grayscale(1);max-width:276px !important;}
.in-house-logo-no-filter{filter:none !important;width:calc(100vw - 16px) !important;}
p[style*="margin-left:"]{max-width:600px !important;width:calc(100vw - 16px);margin: 16px auto !important;padding:0 8px;}
table:first-of-type td>font p+p>b>font {/*! white-space:pre-wrap !important/\*Android Chrome?*\/; *//*! margin-top:-1.5em; */display:block;}/*test for smartphone devices*/
input{filter:invert(1) hue-rotate(220deg);font-size:16px;max-width:213px;height:25px !important;}
img[src*="z_id_ill_emoji"]{filter:hue-rotate(390deg) invert() sepia(.3);}
img[src*="z_ill_headphones"]{filter:invert() hue-rotate(200deg);}
img[src*="z_ill_nyt_hat"]{filter: invert() hue-rotate(390deg);}
.long-img{max-height:none !important;}

/*Priority css here for colors in general*/
a:link{color:#6653ff!important;/*contrast on white bg*/color:#8280ff !important;/*contrast on black bg*/background-color:transparent;/*IE10*/}
font[color*="0000FF"],a[href^="#"]/*,table:nth-of-type(2) a[href^="../../"]*/{color:cornflowerblue !important; color:#6495ed !important;}
font[color*="FF0000"]{color:deeppink;color:#ff425b;color:#ff421b !important;}
font[color*="000000"],p[style*="color: rgb(0, 0, 0)"],b font[size="5"],font[size="5"] b{color:#ccc !important;}
::selection{background:goldenrod;color:black;}
/**/span[style*="background-color: #FFFFFF"],span[style*="background-color:#FFFFFF"],p[style*="background-color: rgb(255, 255, 255)"]{background:transparent !important;font-style:italic !important;}
/**/span[style*="#FFFF00"]{background:transparent !important;color:#fef717;}
/**/span[style*="background-color: #C0C0C0"]{background:transparent !important;color:inherit;text-underline-offset:.5em;text-decoration:underline 1px solid #ffab71;}
/**/u{text-underline-offset:.5rem;text-decoration-color:white;}

/*Priority css here for titles and links which can overide colors's priority, if needed - keep in order !*/
a font[size="5"],font[size="5"] a{font-size:24px;}/*in case of manual typing error*/
/*font[size="4"] a,a font[size="4"],font[size="4"] a+br+a,font[size="1"]+a,font[size="2"]+a,font[size="3"]+a,font[size="4"]+a{}
font[size="4"] a+br+a,font[size="4"] a:only-of-type,a:only-of-type font[size="4"]{}*/
/**/table:nth-of-type(2) a,a,font[size="5"],p>b>font[size="2"],p>font[size="2"]>b,body:before{font-family:Noto Sans,Noto Sans CJK JP,Arial !important;}
/*font[size="4"] a,a font[size="4"],font[size="4"] a+br+a,font[size="1"]+a,font[size="2"]+a,font[size="3"]+a,font[size="4"]+a,*/
font[size="1"] a,a font[size="1"],font[size="1"] a+br+a{font:1em /*Verdana,*/Liberation Mono !important;letter-spacing:initial !important;font-size:12px !important;line-height:120% !important;}
a:hover{color:white !important;}


/**/
@media(max-width:430px) or (max-height:430px){
table{line-height:120%;}
font[size="5"],font[size="6"]{line-height:140% !important;}
table:first-of-type td>p a{width:40px;overflow:hidden;display:inline-block;}
table:first-of-type td>p a img{margin:0 0 0 -2em;}
p:empty+p:empty+p:empty+p:empty+p:empty+p:empty,
p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace,
p:blank+p:blank+p:blank+p:blank+p:blank+p:blank{display:none;}/*will work soon in css*/
}

@media print {
  body,p,font,table:first-of-type a:first-of-type>font{color:#717171 !important;background:white !important;}
/**/img,input{filter:none !important;}
/**/span[style*="#FFFF00"]{background:#fef717 !important;color:#717171;}
}
@media not screen and (display-mode: fullscreen){
    body:before{content:"Best viewed in fullscreen";width:190px;display:block;font-size:12px;font-weight:bold;text-transform:uppercase;position:relative !important;margin:.5em auto 2em auto;}
    @media (min-width:1300px){body:before{content:"Best viewed in fullscreen";position:absolute !important;right:1em;top:1em;}}
}
  

/*BUGS OUTSIDE OF MOZILLA*/
b,strong{font-weight:bolder;/*Chrome, Safari, Edge*/}
body::-webkit-scrollbar {width:8px;}
body::-webkit-scrollbar-track {background:black;}
body::-webkit-scrollbar-thumb {background-color:grey;}
/*Full or semi-hiding scrollbar for browsers' codes updates*/
html{width:100%;height:100%;overflow:hidden;}
body{width:100%;height:100%;overflow-y:scroll;padding-right:0px;box-sizing:content-box;}


/*
Documentation for further changes to css stylesheet.
============================

ANTICIPATION OF THROWBACKS :

============================

=================
font[size="4"]+ a
=================

NO known occurence.
Anticipation :

  IF the first <p> (paragraph) of the page content that is not empty,
ie    Tree Organisation Manual Presentation where lies the page
ex    Arts > Books > Writers > 20th century > USA > James Arthur Baldwin    1924-1987

  contains an <a> (link) which is not inside a <font> :
the <a> will be applied the same style as the <a> below, (or more precisely
the <a> below which follow directly a <br> which follow directly a <font>
(which implicitely contains 1st part of the cut <a>) )which as of now is small bold uppercase.

MANUAL solution being =
on frontpage, a) create the link AND THEN add font sizes and family
              b) make sure the link <a> is inside the space impacted by/called <font>
                 either by checking source code ;
                 or by clicking at least one character before the end of the no-problem zone
                    to write, even if the characted has to be retyped afterwards ;
                 or by relying on systemic frontpage and frontpage user's coordinated habits
                    which have worked so far... for this.

CSS solution being =
  table:nth-of-type(2) p:nth-of-type(2) a{text-transform: none;font-size:24px !important;font-weight:400;}
which itself would necessitate the Tree Organisation Manual Presentation
always being the 2nd paragraph (above) or 1st or 2nd (under) =
  table:nth-of-type(2) p:nth-of-type(2) a,
  table:nth-of-type(2) p:nth-of-type(1) a{text-transform: none;font-size:24px !important;font-weight:400;}

CSS solution 2nd being (chosen) =
  font[size="1"]+a,font[size="2"]+a,font[size="3"]+a,font[size="4"]+a
instead of =
  font + a
This last solution does not reajust the links in Tree Organisation Manual Presentation



=========================
font[size="4"]>a
=========================

An occurence which declined, can cause the problem :
  p > font[size="4"] > font[size="4"][face="Arial"] > a

Anticipation :
  font[size="4"]>a
would not work if frontpage writes 
  p > font[size="4"] > [face="Arial"] > a
CSS solution being
  font[size="4"] a
CONCLUSIVELY ALL RELATIONS BETWEEN <font> AND <a>
MUT BE WRITTEN IN GENERAL AND NOT DIRECT CHILD-PARENT RELATION.


=============================================================================
NB /\
IF ONE WHISHES TO CREATE MORE SPACE AT THE BEGINING OF WEBSITE PAGE CONTENT =
  table:nth-of-type(2) p:nth-of-type(1) {margin-top:calc(4em + 8vh)}
BEST AT THIS STAGE NOT TO CHANGE THE SEMANTIC HTML SINCE IT IS OUR ONLY
HOPE OF MIMICKING CSS CLASSES
NO NEED FOR ADDING OR EVEN ERASING PARAGRAPHS 
IF ONE WISHES TO ERASE FIRST PARAGRAPH SPACE VIA CSS =
  table:nth-of-type(2) p:nth-of-type(1) {display:none}
=============================================================================


============================

TO INVESTIGUATE :

============================

=====
fixed
=====

IN GRAMMAR SECTION : difference in sizes between 
a>font[size="1"]
font[size="1"]>a

=========
not fixed
=========


CHROME MEDIA BUG - MUST FIND BANNER FILE TO ADD :
<meta name="viewport" content="width=device-width,initial-scale=1">

DOES NOT HAVE LEVERAGE ON :
ANYTHING relating to audio players (npr)
ex : #player-main
which has its own css stylesheet priority
hence a) tame with it directly
or    b) create another stylesheet
a)  would need to host directly
    https://bundles.npr.org/dist/bundles/playerEmbed-css-b565230000754872ad68.css
    instead of hosting it externally
b)  would have to find a way to surpass
    the priority of embeded stylesheets
a)  would need to edit all the pages
    containing this embeded stylesheet
    to replace it with an internal css link,
    either future-led recursive monk-ly or through bash script.
b)  would need simpler but perhaps inexisting documentation.


DOES NOT HAVE LEVERAGE ON :
LACK OF SYSTEMIC HTML PATTERNS :
difference between usage elements :
- reference section links at bottom of page
- Tree Organisation Manual Representation at bottom of page

unicity in structural elements :
font[size="4"] > a

no systemic difference in parent structural elements :
p[align="center"]                     (Vocapedia 2nd Tree : http://www.anglonautes.eu/)
p[style*="text-align: center"]        (Vocapedia 2nd Tree : http://www.anglonautes.eu/english%20words_vocabulary_in_news_by_topic_2000s_2010s_2020s_uk_usa/arts/architecture_cities_towns/home/home_green/green_homes.htm)




BIN

a font,font a{font-size:unset;}
@media only screen and not (display-mode:fullscreen){
body::before{content:"Best viewed in fullscreen F11 on your keyboard";position:absolute;right:1em;top:1em;width:190px;display:block;font-size: 12px;font-weight:bold;text-transform: uppercase;}
    @media(max-width:730px) or (max-height:730px){body::before{content:"Best viewed in fullscreen";position:initial;margin:.5em auto 2em auto;}}
    @media(min-width:1300px){body::before{content:"Best viewed in fullscreen F11 on your keyboard";position:absolute;right:1em;top:1em;width:190px;display:block;font-size: 12px;font-weight:bold;text-transform: uppercase;}}
}
text-decoration: underline 2px solid #fef717;filter:hue-rotate(320deg);
color:#dd6c2e;background:#ffaa00;color:#ffcc58;color:#add392;color:#ffcc86;color:#ffcc28 !important;background:#ffab71;color:#ffab71;
*/









<script type="text/javascript" src="zmyscript.js"></script>