/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 2; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 2; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

/* START NAVMODALNOB STYLES */


.nobmodaloverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}
.nobmodaloverlay:target {
  visibility: visible;
  opacity: 1;
}

.navpopup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 60%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 5;
}

.navpopup h2 {
  margin-top: 0;
  color: #333;
}

.navpopup .closenav {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.navpopup .closenav:hover {
  color: #06D85F;
}

.navpopup .backnav {
  position: absolute;
  top: 20px;
  left: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.navpopup .backnav:hover {
  color: #d83706;
}
.navpopup .contentnav {
  overflow: none;
}

@media only screen and (min-width: 321px) and (max-width: 640px), only screen and (min-device-width: 321px) and (max-device-width: 640px)  {
  .navpopup{ 
    width: 85%;
    z-index: 5;
  }
}

/* Dark Mode */

body[data-light-mode="dark"] {
    background-color: #000;
    color: #eee;
}
body[data-light-mode="dark"] .btn-primary {
    background-color: #4df3ff;
    color: #000;
}
body[data-light-mode="dark"] .btn-success {
    background-color: #00ff66;
    color: #000;
}
body[data-light-mode="dark"] .btn-dark {
    background-color: #edebeb;
    color: #000;
}
body[data-light-mode="dark"] .btn-warning {
    background-color: #e5ff00;
    color: #000;
}
body[data-light-mode="dark"] .btn-danger {
    background-color: #ff0000;
    color: #000;
}
body[data-light-mode="dark"] .btn-info {
    background-color: #4df3ff;
    color: #000;
}
body[data-light-mode="dark"] .blackground {
    color: #000;
    background-color: #ededed;
}
body[data-light-mode="dark"] .whiteground {
    color: #fff;
    background-color: #000000;
}
body[data-light-mode="dark"] .text-black {
    color: #fff;
}
body[data-light-mode="dark"] .text-grey {
    color: ;
}
body[data-light-mode="dark"] .text-white {
    color: #000;
}
body[data-light-mode="dark"] .text-purple {
    color: #8800ff;
}
body[data-light-mode="dark"] .text-darkpurple {
    color: ;
}
body[data-light-mode="dark"] .text-blue {
    color: #00d9ff;
}
body[data-light-mode="dark"] .text-darkblue {
    color: ;
}
body[data-light-mode="dark"] .text-darkgreen {
    color: ;
}
body[data-light-mode="dark"] .text-green {
    color: #00ffae;
}
body[data-light-mode="dark"] .text-yellow {
    color: #aeff00;
}
body[data-light-mode="dark"] .text-orange {
    color: ;
}
body[data-light-mode="dark"] .text-darkred {
    color: ;
}
body[data-light-mode="dark"] .text-red {
    color: #ff0077;
}
body[data-light-mode="dark"] .text-costumpink {
    color: #ed2b82;
}

body[data-light-mode=dark] .text-darkblue { 
  color:#00d9ff;
}


/* TextColor */

.text-red {  color: #fc0303 } .text-darkred { color: #80001a } .text-midred { color: #b80000 } .text-lightred { color: #ff2121 }
 .text-orange { color: #fc7703 } .text-darkorange { color: #803500 } .text-midorange { color: #b84d00 } .text-lightorange { color: #ffa621 }
 .text-yellow {  color: #fcec03 } .text-darkyellow { color: #806800 } .text-midyellow { color: #b1b800 } .text-lightyellow { color: #fffb21 } 
 .text-green { color: #03fc2c } .text-darkgreen { color: #008009 } .text-midgreen { color: #00b81c } .text-lightgreen { color: #72ff21 }
 .text-blue { color: #03f8fc } .text-darkblue { color: #002b80 } .text-midblue { color: #006eb8 } .text-lightblue { color: #21ffe9}
 .text-purple { color: #db03fc } .text-darkpurple { color: #440080 } .text-midpurple { color: #a800b8 } .text-lightpurple { color: #c021ff}
 .text-pink { color: #fc0390 } .text-darkpink { color: #800073 } .text-midpink { color: #b800b7 } .text-lightpink { color: #ff21e1 }
 .text-costumpink { color: #fc0335 } .text-darkcostumpink { color: #80002d } .text-midcostumpink { color: #b80034} .text-lightcostumpink { color: #ff2189 }
 .text-black { color: #000000 } .text-lightgrey { color: #8c8c8c } .text-grey { color: #5c5c5c } .text-darkgrey { color: #404040 } .text-white { color: #ffffff } 




.tags-read {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags-read li {
  float: left; 
}

.tag-read {
  background: #4a4a4a;
  border-radius: 3px 0 0 3px;
  color: #fff;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 30px 0 33px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag-read::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag-read::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #4a4a4a;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag-read:hover {
  background-color: crimson;
  color: white;
}

.tag-read:hover::after {
   border-left-color: crimson; 
}

.right-read  { float: right; clear: right; display: inline-block; right: 0px; text-align: right; }
.left-read  { float: left; clear: left; display: inline-block; left: 0px; text-align: left; }
  .source-img-title {line-height: 2pt; margin-bottom: 15px; text-align: center; margin-top: 10px; font-style: italic; color: #787878; }
  .hidden-cloak { display: none; }


  @media (min-width: 321px ){
  .read-img {border-radius: 10px; height: 400px; width: 97.5%; }
    .read-mode {padding: 10px;}
  }

   @media (min-width: 769px ){ 
  .read-img {border-radius: 10px; height: 500px; width: 87.5%; }
    .read-mode {padding: 15px;}
  }

   @media (min-width: 1281px ){ 
  .read-img {border-radius: 10px; height: 600px; width: 77.5%; }
    .read-mode {padding: 25px;}
  }

     @media (min-width: 1961px ){ 
  .read-img {border-radius: 10px; height: 700px; width: 67.5%; }
    .read-mode {padding: 40px;}
  }


  body[data-light-mode="dark"]   .red-boxs { padding: 10px; margin: 10px;  text-align: center; border-radius: 5px; background-color: #ff4c34; color: #fff; font-weight: 600;}

  .red-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #e30707; color: #fff; font-weight: 600;}

  body[data-light-mode="dark"]   .orange-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #ffc76e; color: #fff; font-weight: 600;}

  .orange-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #ffb405; color: #fff; font-weight: 600;}

  body[data-light-mode="dark"]   .yellow-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #fff834; color: #000; font-weight: 600;}

  .yellow-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #ffea2e; color: #000; font-weight: 600;}

  body[data-light-mode="dark"]   .green-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #abff2e; color: #fff; font-weight: 600;}

  .green-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #31ff2e; color: #fff; font-weight: 600;}

body[data-light-mode="dark"]   .darkgreen-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #25a848; color: #fff; font-weight: 600;}

  .darkgreen-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #0ba147; color: #fff; font-weight: 600;}


  body[data-light-mode="dark"]   .blue-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #2effea; color: #fff; font-weight: 600;}

  .blue-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #2ed5ff; color: #fff; font-weight: 600;}

  body[data-light-mode="dark"]   .darkblue-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #2e43ff; color: #fff; font-weight: 600;}

  .darkblue-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #0970ba; color: #fff; font-weight: 600;}

  body[data-light-mode="dark"]   .purple-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #8000ff; color: #fff; font-weight: 600;}

  .purple-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #aa00ff; color: #fff; font-weight: 600;}

  body[data-light-mode="dark"]   .darkpurple-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #9419ff; color: #fff; font-weight: 600;}

  .darkpurple-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #9d09ba; color: #fff; font-weight: 600;}

body[data-light-mode="dark"]   .pink-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #ff00c3; color: #fff; font-weight: 600;}

  .pink-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #f7398f; color: #fff; font-weight: 600;}

  body[data-light-mode="dark"]   .white-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #ffffff; color: #000; font-weight: 600;}

  .white-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #d1d1d1; color: #000; font-weight: 600;}

body[data-light-mode="dark"]   .black-boxs { padding: 10px; margin: 1px;  text-align: center; border-radius: 5px; background-color: #9e9e9e; color: #fff; font-weight: 600;}

  .black-boxs { padding: 10px; margin: 1px; text-align: center; border-radius: 5px; background-color: #000; color: #fff; font-weight: 600;}