html, body {
    margin: 0;
    padding: 0;
  	border: 0;
  	font-size: 100%;
  	font: inherit;
  	vertical-align: baseline;
  	line-height: 1; 
  }
  .lightinv {
    filter: invert(1); 
  }
.pstr {
  font-size:24px;
  transform:scale(0.67,1);
  line-height:1.1;
  font-family: /* "Apple Garamond", Garamond, "Garamond", egar,*/"Times New Roman", Times, serif;
  margin:12px;
  filter:saturate(0); 
}
.panth {
      display:block;
      padding-top:8px;
      font-family: Lucida, "Lucida Grande", luga, Verdana, sans-serif;
      font-size:13px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.25);
      background-size: 100% 32px;
      background-image: url("/images/Panth.webp");
      border-radius:8px;
      box-shadow: 0 8px 16px #000, inset 0 1px 1px #eee;
      color:#000;
      z-index:9;
    }
    .cpanth {
      padding-top:8px;
    }
    .cBox {
      position: fixed;
      bottom:16px;
      left:16px;
    }
    /* .panDark {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('/images/Panth.png');
    } */
    .cpanth p {
      margin-bottom:88px; 
    }
    .winBut{
	    position: absolute;
	    top: 6px;
	    left: 6px;
	    width:14px;
	    height:14px;
	    background: linear-gradient(#b00, #fcc);
	    border-radius:99px;
	    box-shadow: 0 -1px 2px rgba(0,0,0,0.5), 0 1px 2px rgba(255,255,255,0.5), inset 0 0 4px rgba(0,0,0,0.25), inset 0 0 1px #000, inset 0 1px 2px #000;
	    border: none;
    }
    .winBut:after{
      content: '';
	    position: absolute;
	    top:1px;
	    left:4px;
	    width:5px;
	    height:3px;
	    background: white;
	    border-radius:9px;
	    filter: blur(1px);
    }
    .winBut:hover{
       background: linear-gradient(#900, #daa);
    }
    .panth iframe {
      margin-top:4px;
      margin-bottom:4px;
      border-width:1px;
      border-radius:3px;
    }
    .panthforcein {
      background-image: url("/images/pinstripe.png");
      border-width:1px;
      border: grey;
      margin-left:8px;
      margin-right:8px;
      padding:1px;
      margin-top:0;
    }
    .tiwin {
      border-radius:8px;
      border: 0;
      box-shadow: 0 4px 8px #000, inset 0 1px 2px #666;
    }
    .conbr {
      display: none;
    }
    @media screen and (min-width: 500px) {
      .conbr {
        display: block;
      }
    }
    .garapch {
      font-family: egar, "Times New Roman", Times, serif;
    }
    @keyframes skewloop {
      0% {transform:scale(2,1) skew(25deg, 0);}
      50% {transform:scale(2,1) skew(-25deg, 0);}
      100% {transform:scale(2,1) skew(25deg, 0);}
    }
    @keyframes strlessklo {
      0% {transform:skew(15deg, 0);}
      50% {transform:skew(-15deg, 0);}
      100% {transform:skew(15deg, 0);}
    }
    @keyframes strlesskloita {
      0% {transform:skew(5deg, 0);}
      50% {transform:skew(-5deg, 0);}
      100% {transform:skew(5deg, 0);}
    }
    @keyframes thinim {
      0% {transform: skew(45deg, 0) scaleY(0.5);}
      17% {transform: skew(45deg, 0) scaleY(1);}
      33% {transform: skew(45deg, 0) scaleY(0.5);}
      50% {transform: skew(-45deg, 0) scaleY(0.5);}
      67% {transform: skew(-45deg, 0) scaleY(1);}
      83% {transform: skew(-45deg, 0) scaleY(0.5);}
      100% {transform: skew(45deg, 0) scaleY(0.5);}
    }
    @keyframes wudv {
      0% {transform:scale(0.95,4.5) translate(-15px,0);}
      25% {transform:scale(1.05,4) translate(0px,0);}
      50% {transform:scale(0.95,4.5) translate(15px,0);}
      75% {transform:scale(1.05,4) translate(0px,0);}
      100% {transform:scale(0.95,4.6) translate(-15px,0);}
    }
    .conn {
      transform:skew(-15deg, 0);
      /* animation: strlessklo 8s ease-in-out infinite; */
    }
    @media (max-width: 750px) {
    .conn {
      transform:skew(-5deg, 0);
      /* animation: strlesskloita 8s ease-in-out infinite; */
      }
    }
    h2 { 
      width:40%;
      font-family:"Times New Roman", Times, serif;
      transform:scale(2,1) skew(-25deg, 0);
      /* animation: skewloop 1s infinite; */
      max-width:780px;
    }
    .skewloop {
      transform:scale(2,1) skew(-25deg, 0);
      /* animation: skewloop 2s infinite; */
      text-shadow: 0 0 5px white;
    }
    .connectedpanth {
      height:188px; 
    }
    @media (max-width: 673px) {
      .connectedpanth {
        height:240px; 
      } 
    }
    @media (max-width: 410px) {
      .connectedpanth {
        height:280px; 
      } 
    }
    .stickynote {
      position: relative;
      background-image: linear-gradient(#ffd, #feb); 
      width:95%;
      max-width: 770px;
      /* height: 145px; */
      margin-top:-10px;
      z-index:6;
      border: 3px double #962;
      padding-top:8px;
      padding-bottom:8px;
      box-shadow: 0 4px 8px black;
    }
    .stickynote:after {
      content: '';
      position: absolute;
      left: -2px;
      right: -2px;
      top: -2px;
      bottom: -2px;
      z-index:-3;
      border: 1px dashed #fc6;
    }
    .rippaper {
      position: absolute;
      background-image: url("/images/boxneopaperbg.webp");
      width:800px;
      height:311px;
      z-index:-7;
      left:calc(50% - calc(800px / 2));
      background-size: 100% 100%;
      margin-top:-55px;
      filter: brightness(1.1);
    }
    .tinyscreens {
      position: absolute;
      background-image: url("/images/neocitytinyscreenlight.webp");
      width:660px;
      height:121px;
      z-index:-5;
      left:calc(50% - calc(660px / 2));
      background-size: 100% 100%;
      margin-top:12px;
    }
    @media (max-width: 940px) {
      .tinyscreens {
        height:150px;
      }
    }
    /* @media (max-width: 480px) {
      .tinyscreens {
        height:220px;
      }
    } */
    @media (max-width: 480px) {
      .tinyscreens {
        background-image: url("/images/tinyscreentinylight.webp");
        width:330px;
        height:215px;
        left:calc(50% - calc(330px / 2));
      }
    }
    .hotlink {
      position: absolute;
      background-image: url("/images/hotlinklight.webp");
      width:525px;
      height:276px;
      z-index:-5;
      left:calc(50% - calc(525px / 2));
      background-size: 100% 100%;
      margin-top:5px;
    }
    .linenrip {
      position: absolute;
      background-image: url("/images/LinensTile.png");
      background-repeat: repeat-xy;
      width:550px;
      height:230px;
      z-index:-5;
      left:calc(50% - calc(550px / 2));
      border:2px #111 solid;
      border-radius:12px;
      margin-top:-5px;
    }
    /* start pillbutton mgmt block */
    .buton {
    background-image: linear-gradient(#aaa 0px, #fff 12px);
    font-family:luga, Verdana, sans-serif;
    position: relative;
    color: #000;
    text-align: center;
    text-decoration: none;
    padding-top: 6px;
    display: inline-block;
    border-radius: 99px;
    width: 82px;
    height: 16px;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 1px #ddd /*slight reflec*/, inset 0 1px 10px #333 /*main glow*/, 0 1px 2px #000 /*shadow*/, 0 0 0 #fff/*rim glow*/;
    animation:none;
    transition: 0.1s;
  }
  .buton:after{
  	content: '';
  	position: absolute;
  	top: 2px;
  	left: 8px;
  	width: 66px;
  	height: 6px;
  	background: linear-gradient(rgba(255,255,255,255), rgba(255,255,255,0));
  	border-radius:9px;
  }
    .buton:hover{
    background-image: linear-gradient(#234 0px, #7df 12px);
    box-shadow: inset 0 1px 1px #ddd /*slight reflec*/, inset 0 1px 10px #209 /*main glow*/, 0 1px 2px #000 /*shadow*/, 0 1px 16px #29f/*rim glow*/;
  }
  a.butonsq {
      margin:8px;
      background-image: linear-gradient(#aaa 0px, #fff 35px);
      padding-top: 5px;
      border-radius: 8px;
      width: 45px;
      height: 40px;
      font-size: 32px;
      box-shadow: inset 0 1px 1px #ddd /*slight reflec*/, inset 0 1px 15px #000 /*main glow*/, 0 1px 2px #000 /*shadow*/, 0 0 0 #fff/*rim glow*/;
    }
      a.butonsq:after{
  	  top: 2px;
  	  left: 2px;
  	  width: 41px;
  	  height: 23px;
  	  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
  	  border-radius:6px;
    }
    a.butonstu {
      background-image: linear-gradient(#aaa 0px, #fff 35px);
      padding-top: 13px;
      margin-left:7px;
      margin-bottom:14px;
      border-radius: 8px;
      width: 201px;
      height: 32px;
      font-size: 19px;
      box-shadow: inset 0 1px 1px #ddd /*slight reflec*/, inset 0 1px 15px #000 /*main glow*/, 0 1px 2px #000 /*shadow*/, 0 0 0 #fff/*rim glow*/;
    }
    a.butonstu:after{
  	  top: 2px;
  	  left: 2px;
  	  width: 197px;
  	  height: 23px;
  	  background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
  	  border-radius:6px;
    }
    .near {
      image-rendering: optimizeSpeed;             /*                     */
      image-rendering: -moz-crisp-edges;          /* Firefox             */
      image-rendering: -o-crisp-edges;            /* Opera               */
      image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
      image-rendering: pixelated;                 /* Chrome as of 2019   */
      image-rendering: optimize-contrast;         /* CSS3 Proposed       */
      -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }
    img.near {
      image-rendering: optimizeSpeed;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
      image-rendering: optimize-contrast;
      -ms-interpolation-mode: nearest-neighbor;
    }
    .near img {
      image-rendering: optimizeSpeed;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
      image-rendering: optimize-contrast;
      -ms-interpolation-mode: nearest-neighbor;
    }
  @media (prefers-color-scheme: dark) { /* STAY AT THE BOTTOM!!! THESE ARE DARK MODE OVERRIDES */
    .buton {
      background-image: linear-gradient(#111 0px, #333 12px); 
      color:white;
      box-shadow: inset 0 1px 2px #888 /*slight reflec*/, inset 0 1px 10px #111 /*main glow*/, 0 1px 2px #000 /*shadow*/, 0 0 0 #000/*rim glow*/;
    }
    .buton:after{
      background: linear-gradient(rgba(184,184,184,255), rgba(255,255,255,0));
    }
    .buton:hover:after{
      background: linear-gradient(rgba(255,255,255,255), rgba(255,255,255,0));
    }
    a.butonsq {
      background-image: linear-gradient(#111 0px, #333 35px); 
      color:white;
      box-shadow: inset 0 1px 2px #888 /*slight reflec*/, inset 0 1px 10px #111 /*main glow*/, 0 1px 2px #000 /*shadow*/, 0 0 0 #000/*rim glow*/;
    }
    a.butonsq:after {
      background: linear-gradient(rgba(184,184,184,1), rgba(255,255,255,0));
    }
    a.butonsq:hover:after {
      background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
    }
    .panth {
      background-image: url("/images/Panth_dark.webp"); 
      box-shadow: 0 8px 16px #000, inset 0 1px 1px #888;
    }
    textarea {
      color:white;
      background-color:#111
    }
    audio {
      box-shadow: 0 4px 8px #000; 
    }
    .tiwin {
      box-shadow: 0 4px 8px #000, inset 0 0 2px #000; 
    }
    .panthforcein {
      background-image: url("/images/epirtsnip.png"); 
    }
    .lightinv {
      filter: invert(0); 
    }
    .invertOFF {
      filter:invert(0); 
    }
    .stickynote {
      background-image: linear-gradient(#332, #322); 
      border: 3px double #630;
    }
    .stickynote:after {
       border: 1px dashed #da3;
    }
    .rippaper {
      filter: invert(1);
    }
    .tinyscreens {
      background-image: url("/images/neocitytinyscreendark.webp");
    }
    @media (max-width: 480px) {
      .tinyscreens {
        background-image: url("/images/tinyscreentinydark.webp");
      }
    }
    .hotlink {
      filter: invert(1);
    }
    .linenrip {
      filter: brightness(0.8); 
    }
  }
  /* end of both */