* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  /* background-color: black; */
  /* background-color: lightblue; */
  /* overflow: scroll; */
  /* overflow: hidden; */
  /* overflow: visible; */
  /* background: black; */
  /* background: blue; */
/* perspective: 6000px; */


/* height: 100vh; */
/* width: 100vw; */



}

body::-webkit-scrollbar {  /*WebKit */
    width: 0;
    height: 0;
}


/* divBody   divBody   divBody   divBody   divBody */
/* divBody   divBody   divBody   divBody   divBody */
/* divBody   divBody   divBody   divBody   divBody */
#divBody {
  /* background-color: cyan; */
  clip-path: circle(52% at 50% 50%);
  color: #f2f2f2f2;
  font-size: 20px;
  /* font-size: 120%; */
  font-family:'Helvetica Neue';
  height: 60%;
  line-height:1.25;
  overflow-y: scroll;
  pointer-events: none;
  position: absolute;
  scrollbar-width: none;  /*  Firefox */
  transition-duration: 3.2s;
  width: 40%;

}
.bDot {
  /* background: cyan; */
  color: black;
  pointer-events: none;
}

.noScrollBar::-webkit-scrollbar {  /*WebKit */
  width: 0;
  height: 0;
}


    /* divWaves    divWaves    divWaves    divWaves    divWaves    divWaves   */
    /* divWaves    divWaves    divWaves    divWaves    divWaves    divWaves   */
    /* divWaves    divWaves    divWaves    divWaves    divWaves    divWaves   */
    /* divWaves    divWaves    divWaves    divWaves    divWaves    divWaves   */
    /* divWaves    divWaves    divWaves    divWaves    divWaves    divWaves   */
/* #divWaves {
  color: red;
  font-size: 18px;
  font-family:'Helvetica Neue';
  height: 100vh;
  line-height:1.25;
  left: 0vw;
  overflow: visible;
  position: absolute;
  scrollbar-width: none;
  transition-timing-function = cubic-bezier(0.4, -1.14, 0.52, 1.81);
  transition-duration: 3.2s;
  width:100vw;
} */

/* svgWater    svgWater    svgWater    svgWater    svgWater    svgWater    svgWater */
/* svgWater    svgWater    svgWater    svgWater    svgWater    svgWater    svgWater */
/* svgWater    svgWater    svgWater    svgWater    svgWater    svgWater    svgWater */
/* svgWater    svgWater    svgWater    svgWater    svgWater    svgWater    svgWater */
/* svgWater    svgWater    svgWater    svgWater    svgWater    svgWater    svgWater */
/* #svgWater {
  height: 100%;
  left: 0%;
  overflow: visible;
  position: absolute;
  scrollbar-width: none;
  top: 0%;
  transform-origin: top left;
  width: 100%;
}
#uCirCoin1 {
  stroke-width: .29%;
  stroke:  lightblue;
} */
/* the Groups     (svg "g") */
/* .gCoinXs {
  transition-duration: 2200ms;
  transition-timing-function = cubic-bezier(0.4, -1.44, 0.52, 1.81);

} */
/* The Circles:      (svg "circle") */
/* .backgroundCoins {
  fill: #0000;
  stroke-width: .29%;
  stroke:  cyan;
}
.txtCoinHeading {
  fill: #f2f2f2f2;
  font-size: 6px;
  font-family:'Helvetica Neue';
  line-height:1.25;
  pointer-events: none;
  word-spacing:0px;
} */
/* no divCoinX, that's done in loadBlogBackground in the openCursor:onsuccess */
#svgBlog {
  height: 100vh;
  left: 0vw;
  overflow: visible;
  position: absolute;
  top: 0vh;
  width: 100vw;
}



/* #divViewer    divViewer   divViewer   divViewer  */
/* #divViewer    divViewer   divViewer   divViewer  */
/* #divViewer    divViewer   divViewer   divViewer  */
/* #divViewer    divViewer   divViewer   divViewer  */
/* #divViewer    divViewer   divViewer   divViewer  */

#divViewer {
  background-color: darkgray;
  color: #f2f2f2f2;
  font-size: 18px;
  font-family:'Helvetica Neue';
  height: 100%;
  line-height:1.25;
  overflow-y: scroll;
  position: absolute;
  scrollbar-width: none;  /*  Firefox */
  transition-duration: 3.2s;
  width: 100%;
}
#svgBlogViewer {
  background-color: black;
  height: 100vh;
  left: 0vw;
  overflow: visible;
  position: absolute;
  top: 0vh;
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.4, -1.14, 0.52, 1.81);
  width: 100vw;
}
#cirOuter {
  fill: #252525Fe;
  stroke: #f2f2f280;
  stroke-width: .5%;
  transform-origin: center;
  transition-duration: 3.5s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
}
#cirInner {
  fill: black;
  stroke: #f2f2f2c0;
  stroke-width: .3%;
  transform-origin: center;
  transition-duration: 3.3s;
}
#cirSmLeft {
  fill: none;
  stroke: #f2f2f280;
  stroke-width: .1%;
  transform-origin: 8.5% 50%;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
}
#cirSmRight {
  fill: none;
  stroke: green;
  stroke: #f2f2f280;
  stroke-width: .1%;
  transform-origin: 91.5% 50%;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
}

.rlPolys {
  fill: none;
  stroke: #f2f2f280;
  stroke-width: .1%;
}

#gCirSmBottom {
  stroke: #f2f2f280;
  stroke-width: .1%;
}
#gCirSmBottom:hover {
  stroke-width: .19%;
  stroke:  green;
}
#cirSmBottom {
  transform-origin: 50% 91.5%;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
}
#cirBody {
  fill: none;
  stroke: #f2f2f2fe;
  stroke-width: .2%;
  transform-origin: center;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
}
#txtHeading {
  fill: #f2f2f2f2;
  font-size: 6px;
  font-family:'Helvetica Neue';
  line-height:1.25;
  transition-duration: 1.2s;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
  word-spacing:0px;
}


#txtPageNbr {
  fill: #f2f2f2f2;
  font-size: 1.7px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
  word-spacing:0px;
}

#txtOf {
  fill: #f2f2f2f2;
  font-size: 1.7px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
  word-spacing:0px;
}


.pArcs {
  fill:none;
}
#pArcTags {
  transform-origin: bottom;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
  transition-duration: 4s;
}
#txtTags {
  /* fill: #f5f5f5c0; dim*/
  fill: #5f5f5ff0; /* bright */
  font-size: 2.5px;
}
#tpArt{
  /* stroke: green; */
  transform-origin: center;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
  transition-duration: 4s;

}
#pArcDates {
  /* stroke:green; */
  transform-origin: top;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1.3);
  transition-duration: 4s;
}
#txtDates {
  fill: #f2f2f2f2;
  font-size: 2px;
}
#pArcDateLabels {
  /* stroke:blue; */
}
#txtDateLabels {
  fill: #f2f2f2f2;
  /* fill: red; */
  font-size: 2px;
}

/* Label Lights: */
.cirTags {
  fill: #252525fe;
  transform-origin: 50% 50%;
}
#cirTagArt {
  transform: rotate(22deg);
}
#cirTagHumor {
  transform: rotate(50deg);
}
#cirTagPhilosophy {
  transform: rotate(90deg);
}
#cirTagPolitics {
  transform: rotate(130deg);
}
#cirTagReligion {
  transform: rotate(158deg);
}






/*
// tagBox      tagBox      tagBox
// tagBox      tagBox      tagBox
// tagBox      tagBox      tagBox
// tagBox      tagBox      tagBox
*/
#svgTagBox {
  background-color: pink;
  height: 100vh;
  left: 0vw;
  opacity: 0;
  position: absolute;
  top: 0vh;
  transition-duration: 9.2s;
  width: 100vw;
}
#rectTagBox {
  fill: #525252fe;
  /* fill: cyan; */
  height: 100%;
  position: absolute;
  stroke: #525252f2;
  stroke-width: 0.2%;
  width: 100%;
}
#txtTagBox {
  fill: #f2f2f2f2;
  font-size: 60px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
  word-spacing:0px;
}
#lblTagBox {
  fill: #f2f2f2f2;
  font-size: 40px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
  word-spacing:0px;
}
#txtBlock {
  fill: #f2f2f2f2;
  font-size: 40px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
}
#txtEitherWay {
  fill: #f2f2f2f2;
  font-size: 40px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
}
#txtOnly {
  fill: #f2f2f2f2;
  font-size: 40px;
  font-family:'Helvetica Neue';
  transition-duration: 1.2s;
}

#svgCloseX {
  height: 100%;
  left: 0vw;
  opacity: 1;
  position: absolute;
  top: 0vh;
  transform: scale(.6) translate(3%, 3%);
  width: 100%;
}



#svgCloseBlogX {
  overflow: visible;
  transition-duration: 1.2s;
}
/* .closeBlogX:hover {
  stroke: green;
  stroke-width: 5;
} */
#cCloseBlogX:hover {
  stroke-width: 5;
}
#cCloseBlogX:hover {
  stroke-width: 4;
}
#cCloseBlogX:hover {
  stroke-width: 4;
}