@import url(fonts.css);

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 3vh;
  min-width: 320px;
  /*-webkit-user-drag: none;*/
  /*overscroll-behavior: none;*/
}

html {
  overflow-y: scroll;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  transition: none;
}

.slow,
#hue.slow * {
  transition:
    all 250ms ease-in-out,
    fill 3s ease-in-out,
    background-color 3s ease-in-out;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-family: 'Roboto Slab', Helvetica, Arial, sans-serif;
  color: #ffffff;
}


#body {
  background-color: #000;
  background-image: url();
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.lock {
  overflow-y: hidden;
}

.lockmemore {
  overflow-x: hidden;
  overflow-y: hidden;
}

.lockscroll {
pointer-events: none;
}

#bodyno {
  background-color: #000;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.top {
  position: relative;
  height: 4px;
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #7a00ff, #ff00c8, #ff0000);
  animation: glowing 20s linear infinite;
  background-size: 200%;
}

.footer18 {
  position: fixed;
  height: 19px;
  width: 100%;
  bottom: 0;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  background: black;
  z-index: 9;
}

.footer18:before {
  content: "For Adults Only 成人指定";
}

.footerinfi {
  position: fixed;
  height: 47px;
  width: 100%;
  bottom: 0;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  text-align: center;
  background: rgb(255, 0, 255);
  z-index: 3;
}

.footerinfi:before {
  content: "SCROLL FOR MORE ART";
}

.bg-fillSpaceBlue {
  background-color: #043564;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.bg-tails {
  width: 100%;
  height: 100%;
  background-image: url(../g/tiles-m.png);
  position: fixed;
  opacity: 1;
  z-index: -2;
}

.bg-train {
  width: 100%;
  height: 100%;
  background-image: url(../g/train.webp);
  background-size: cover;
  position: fixed;
  opacity: 1;
  z-index: -2;
}

.bg-bricknight {
  width: 100%;
  height: 100%;
  background-image: url(../g/bricknight.webp);
  background-size: cover;
  position: fixed;
  opacity: 1;
  z-index: -2;
}

.hatches {
  width: 100%;
  height: 100%;
  background: #9d00ff05 url(../g/hatch-dark.png) repeat 0 0;
}

.mask {
  width: 100%;
  height: 100%;
  /*background-image: url(../g/mask.png);*/
  background-image: radial-gradient(circle at 0.2px 0.2px, rgb(141 141 141) 1px, transparent 0px);
  background-size: 16px 16px;
  background-position: 7px 7px;
  position: fixed;
  opacity: 1;
  z-index: -1;
}z

.Nyah {
  position: absolute;
  right: 50vw;
  transform: translateY(-2em);
  height: 10em;
  z-index: 15;
  user-select: none;
}

#myChart {
  position: relative;
  box-sizing: border-box;
  height: 300px;
  min-width: 375px;
  max-width: 375px;
  margin: auto;
  left: 0px;
  right: 0px;
}

@media screen and (max-width: 640px) {
  .Nyah {
  right: 40vw;
  height: 7em;
}
}

@media screen and (min-width: 640px) {
  .Nyah {
  right: 40vw;
  height: 10em;
}
}

@media screen and (min-width: 992px) {
  #myChart {
  min-width: 567px;
  max-width: 567px;
}
.Nyah {
  right: 45vw;
  height: 10em;
}
}

.mask.news {
  overflow-y: scroll;
}

.stream {
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

@media screen and (min-width: 1280px) {
  .stream {
    width: 1280px;
  }
}

@media screen and (min-width: 1400px) {
  .Nyah {
    right: 45vw;
    height: 12em;
}
}

.form-grp {
  display: flex;
  width: 100%;
  padding: .11rem;
  user-select: none;
}

.form-left {
  justify-content: center !important;
}

.form-grp .form-input {
  position: relative;
  font-size: .7rem;
  font-weight: 500;
  padding: 5px 5px;
  border: 1px solid #444;
  border-radius: 25px 0 0 25px;
  box-shadow: 0 2px 0 #000;
  width: 30%;
}

.form-grp .form-input:focus {
  animation: glow 800ms ease-out infinite alternate;
  box-shadow: 0 0 5px rgba(0, 255, 255, .2), inset 0 0 5px rgba(0, 255, 255, .1), 0 2px 0 #000;
  border-color: white;
  outline: none;
  background: white;
  z-index: 4;
}

@keyframes glow {
  0% {
    border-color: #393;
    box-shadow: 0 0 5px rgba(0, 255, 255, .2), inset 0 0 5px rgba(0, 255, 255, .1), 0 2px 0 #000;
  }

  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0, 255, 255, .6), inset 0 0 10px rgba(0, 255, 255, .4), 0 2px 0 #000;
  }
}

.form-grp .form-btn {
  position: relative;
  font-size: .9rem;
  font-weight: 400;
  padding: 7px 12px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: black;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.form-grp .form-btn:hover {
  background: #f40887;
  color: white;
}

#refcode {
  position: absolute;
  width: 25em;
  left: 50%;
  right: 0;
  transform: translateX(-50%) translateY(150px);
  top: 50%;
  z-index: 7;
}

.button {
  position: relative;
  font-weight: 400;
  padding: 7px 12px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.buttonsub {
  position: relative;
  font-weight: 400;
  padding: 7px 12px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.button2 {
  position: relative;
  font-size: .9rem;
  font-weight: 400;
  padding: 7px 12px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  background: black;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.button3 {
  display: block;
    text-align: left;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    padding: 7px 12px;
    color: inherit;
    background: inherit;
    cursor: pointer;
    overflow: hidden;
    border: none;
    font-family: 'Code';
    text-transform: uppercase;
    z-index: 3;
}

.button4 {
  display: block;
  text-align: left;
  position: relative;
  font-size: .9rem;
  font-weight: 400;
  padding: 7px 12px;
  color: white;
  background: black;
  cursor: pointer;
  overflow: hidden;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

/* 
SAFE
background-image: linear-gradient(163deg, #00ff75 9%, #00f3ff 86%);

FEMBOY
background-image: linear-gradient(163deg, #00fff3 0%, #cc00ff 100%);

FUTA
background-image: linear-gradient(163deg, #ff00ff 0%, #00fff3 100%);

CLASSIC
background-image: linear-gradient(163deg, #ff00ff 0%, #f24 100%);

*/

.buttonSF {
  position: relative;
  font-weight: 400;
  padding: 5px 12px;
  color: white;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.buttonFT {
  position: relative;
  font-weight: 400;
  padding: 5px 12px;
  color: white;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.buttonFB {
  position: relative;
  font-weight: 400;
  padding: 5px 12px;
  color: white;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.buttonCL {
  position: relative;
  font-weight: 400;
  padding: 5px 12px;
  color: white;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}

.buttonT {
  position: relative;
  font-weight: 400;
  padding: 5px 12px;
  color: white;
  cursor: pointer;
  overflow: hidden;
  background: black;
  border: none;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  z-index: 3;
}


.button:hover,
.buttonsub:hover,
.button2:hover {
  background-color: #f40887;
  color: white;
}

.button:active,
.buttonsub:active,
.button2:active,
.button4:active {
  background-color: cyan !important;
  color: black !important;
}

.button3:hover {
  color: #f40887;
}

.button3:active {
  background-color: black;
  color: yellow;
}

.buttonSF .buttonFT .buttonFB .buttonCL :active {
  background-color: rgb(102, 255, 0) !important;
  color: black !important;
}

.button4:hover {
  background-color: rgb(102, 255, 0);
  color: black;
}

.button.is-checked,
.button2.is-checked,
.buttonsub.is-checked,
.buttonsub:active,
button:active {
  color: cyan;
}

.buttonSF:hover {
  background-image: linear-gradient(163deg, #00ff75 9%, #00f3ff 86%);
  color: white;
}

.buttonFT:hover {
  background-image: linear-gradient(163deg, #ff00ff 0%, #00fff3 100%);
  color: white;
}

.buttonFB:hover {
  background-image: linear-gradient(163deg, #00fff3 0%, #cc00ff 100%);
  color: white;
}

.buttonCL:hover {
  background-image: linear-gradient(163deg, #ff00ff 0%, #f24 100%);
  color: white;
}

.buttonSF.is-checked {
  color: black;
  background-image: linear-gradient(163deg, #00ff75 9%, #00f3ff 86%);
  box-shadow: 0px 0px 10px 1px #00ff75;
}

.buttonFT.is-checked {
  color: white;
  background-image: linear-gradient(163deg, #ff00ff 0%, #00fff3 100%);
  box-shadow: -1px -1px 10px 0px #ff00c8, 2px 2px 10px 0px #00ffd5;
}

.buttonFB.is-checked {
  color: white;
  background-image: linear-gradient(163deg, #00fff3 0%, #cc00ff 100%);
  box-shadow: -1px -1px 10px 0px #00ffd5, 2px 2px 10px 0px #ff00c8;
}

.buttonCL.is-checked {
  color: black;
  background-image: linear-gradient(163deg, #ff00ff 0%, #f24 100%);
  box-shadow: 0px 0px 10px 1px #ff00ff;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ui-group {
  padding-right: 15px;
  display: inline-block;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

.ui-group h3 {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 16px;
}

.WelcomeContainer {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally within the container */
  justify-content: center; /* Center items vertically if container has height */
  min-height: 100vh; /* Optional: Make container fill viewport height for vertical centering */
}

.enterBtn {
  position: absolute;
  width: 15em;
  left: 50%;
  transform: translateX(-50%) translateY(150px);
  top: 50%;
}

.noenterBtn {
  position: absolute;
  width: 15em;
  left: 50%;
  transform: translateX(-50%) translateY(210px);
  top: 51%;
}

.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  z-index: 7;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  z-index: -1;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  z-index: -1;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}


.glowborder-button {
  display: block;
  cursor: pointer;
  color: white;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  overflow: hidden;
  padding: 3px;
  isolation: isolate;
  z-index: 7;
}

.glowborder-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(90deg, #00ff42, #f9db63, #8200ff, #12bcfe, #00ff66);
  background-size: 25% 100%;
  animation: glowborder-button-animation .75s linear infinite;
  animation-play-state: running;
  translate: -5% 0%;
  transition: translate 0.25s ease-out;
}

.glowborder-button:hover::before {
  animation-play-state: running;
  transition-duration: 0.75s;
  translate: 0% 0%;
}

@keyframes glowborder-button-animation {
  to {
    transform: translateX(-25%);
  }
}

.glowborder-button span {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  background: #000;
  border-radius: 3px;
  height: 100%;
  opacity: 1
}


.glowborder-button span:hover {
background: none;
color: black;
}

.rollbg {
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 800%;
  animation: glowing 20s linear infinite;
}

#hue {
  height: 8vh;
  display: block;
  margin: 0.66em;
}

.link {
  margin: 1em 0;
}

.text {
  margin: 1em 0;
  font-size: 50%;
  line-height: 1.5;
  max-width: 1080px;
}

.link>a,
.link>a:visited,
.link>a:active,
span {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: auto;
  margin: 0;
  opacity: 0.66;
  padding-left: 0.33em;
  outline: none;
  white-space: nowrap;
}

.extra>a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

.text a,
.text a:visited,
.text a:active {
  color: #fa0;
  display: inline;
  text-decoration: underline;
}

.link>a.archive {
  color: #f8981d;
}

.link>a::before {
  content: '';
  position: absolute;
  left: -100vw;
  width: 100vw;
  top: -0.06em;
  height: 1.5em;
  display: block;
  background-color: #f24;
  opacity: 0.33;
  border-radius: 0.1em;
  transform: rotate(0);
  z-index: -1;

}

a.artstation::before {
  background-color: #13aff0;
}

a.deviantart::before {
  background-color: #05cc46;
}

a.hentaifoundry::before {
  background-color: #f569a4;
}

a.bmc::before {
  background-color: #ffdd00;
}

a.substar::before {
  background-color: #ff4081;
}

a.picarto::before {
  background-color: #3ba255;
}

a.instagram::before {
  background-color: #f00074;
}

a.twitter::before {
  background-color: #111111;
}

a.bluesky::before {
  background-color: #0085ff;
}

a.pixiv::before {
  background-color: #0096fa;
}

a.adult::before {
  background-color: #f24;
}

a.discord::before {
  background-color: #7289da;
}

a.patreon::before {
  background-color: #ff424d;
}

a.archive::before {
  background-color: #f8981d;
}

a:hover::before {
  margin-left: 1.8em;
  opacity: 1;
  transform: rotate(0);
}

a.adult:hover .icon svg {
  fill: #123;
}

a.bmc:hover .icon svg .st0 {
  fill: #0d0c22;
}

a.substar .a {
  fill: #fff;
}

a.substar .b {
  fill: #cecece;
}

a.substar .c {
  fill: #5c5c5b;
}

a.substar .d {
  fill: #b4b4b4;
}

a.substar:hover .a {
  fill: #ffd200;
}

a.substar:hover .b {
  fill: #fff;
}

a.substar:hover .c {
  fill: #afb200;
}

a.substar:hover .d {
  fill: #ddd;
}

a.patreon:hover .icon svg {
  fill: #141519;
}


.link:not(.text)+.link.text {
  margin-top: 2em;
}

.container {
  padding: 0em 4vw 2em 6vw;
}

.copy {
  display: block;
  position: fixed;
  left: 6vw;
  margin-left: 0.6em;
  bottom: 3em;
  opacity: 0.25;
  width: auto;
  height: 1em;
  font-size: 1em;
  font-family: Empires;
  user-select: none;
}


.description {
  font-size: 133%;
  padding: 0em 0.4em 0.66em 0.4em;
}

.icon {
  display: inline-block;
  text-align: center;
  color: inherit;
  text-decoration: none;
  font-style: normal;
  margin: 0;
  line-height: 1;
}

.icon>svg {
  display: inline;
  vertical-align: bottom;
  height: 1em;
  fill: #fff;
}

a.archive .icon>svg {
  fill: #f8981d;
}

span .icon>svg {
  fill: #8af;
}

sup {
  font-size: 25%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  margin-left: 0.66em;
  margin-top: 0;
  padding: 0.2em 0.4em;
  background-color: transparent;
  border-radius: 2px;
  border: 1px solid #fff;
  text-transform: uppercase;

}

.adult sup {
  color: #123;
  font-weight: 700;
  background-color: #f24;
  border-radius: 2px;
  border: 1px solid #f24;
}

.closed sup {
  color: #fa0;
  border: 1px solid #fa0;
}

@media screen and (max-width: 720px) {
  .container {
    padding: 3em 4vw 4vw 6vw;
  }

  .copy {
    bottom: 3em;
  }
}

.filters {
  padding: 2px;
  user-select: none;
  background-color: black;
}

#loreinfo {
  /*background-color: rgba(255, 255, 255, 1); */
  margin: 6em auto;
  padding-bottom: 1em;
  width: 100%;
  max-width: 550px;
  position: relative;
  opacity: 0.99;
}

#loreinfo * {
  /*color: rgba(11, 26, 38, 1);*/
  overflow-wrap: break-word;
}

#loreinfo>div {
  /*border: 1px solid #fa0;*/
  padding: 0.75em 1em 0 1em;
}

#newsinfo {
  margin: 0 auto;
  padding-bottom: 1em;
  width: 100%;
  max-width: 800px;
  position: relative;
  opacity: 0.99;
  user-select: none;
}

#newsinfo * {
  overflow-wrap: break-word;
}

#newsinfo>div {
  /*border: 1px solid #fa0;*/
  padding: 0.75em 1em 0 1em;
}

.newsver {
  width: auto;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 33%;
  opacity: 0.8;
  font-family: Code;
}

.newsdate {
  font-size: .55em;
  text-transform: uppercase;
  font-family: Code;
}

.entrydate {
  font-size: 105%;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  border-radius: 6px;
  background: black url(../g/hatch-dark.png) repeat 0 0;
  padding: 0.25em 0.35em;
  color: white !important;
  border-color: #fff;
  text-align: center;
}

.entrydate-art {
  /*background: #f70a8d url(../g/hatch-dark.png) repeat 0 0;*/
  background: repeating-linear-gradient(45deg, #00ffd5, #ff00c8 8vh, #ff0000 20.5px, #f24 19px);
}

.entrydatesquare {
  font-size: 105%;
  display: inline-block;
  width: 80px;
  height: 80px;
  font-style: normal;
  font-weight: normal;
  border-radius: 6px;
  background: black url(../g/hatch-dark.png) repeat 0 0;
  padding: 0.25em 0.25em;
  color: white !important;
  border-color: #fff;
  text-align: center;
}

.rightcat {
  font-size: 105%;
  right: 1em;
  position: absolute;
  font-style: normal;
  font-weight: bold;
  border-radius: 6px;
  background-color: black;
  padding: 0 0.25em;
  color: white !important;
  border-color: #fff;
}

.newsimage {
  width: 100%;
  pointer-events: none;
}

.formateerimg {
  max-width: 80%;
  height: 100%;
  object-fit: contain;
}

.formateerimg>img {
  max-width: 80%;
}

.newsheader {
  font-weight: bold;
}

.newsheader2 {
  font-weight: bold;
  display: inline-block;
  position: relative;
  left: 0.5em;
  font-size: 27px;
}

.newsbody>div {
  font-size: 19px;
  opacity: 1;
  padding: 0 0 1em 0;
}

.separated {
  margin-top: 1em;
  border-top: 1px dashed rgba(11, 26, 38, 1);
}

.separatedwhite {
  margin-top: 1em;
  border-top: 2px solid rgba(255, 255, 255, 0.53);
}

#newsinfo .colored {
  margin-left: -1.69em;
  margin-top: 0.69em;
  padding: 1em 1em 1em 1.69em;
  border-radius: 2px 0.69em 0.69em 2px;
}

#newsinfo .colored.newsno {
  background-color: red;
}

#newsinfo .colored.newsno * {
  color: #fff;
}

#newsinfo ul {
  font-size: 80%;
  margin-top: .69em;
}

#newsinfo ul>li {
  margin-left: 1em;
  margin-bottom: .5em;
}

#newsinfo i.price {
  font-size: 105%;
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  border-radius: 6px;
  background-color: black;
  padding: 0 0.25em;
  color: white !important;
  border-color: #fff;
}

#newsinfo i.price+b {
  font-size: 125%;
  display: inline-block;
  font-style: normal;
  font-weight: normal !important;
  padding: 0 0.25em;
}

#newsinfo .colored.stripe.stripeblack {
  background-color: black;
}

#newsinfo .colored.stripe.stripeblack>i.price {
  color: #b2c1d0 !important;
}

#newsinfo .colored.stripeblue {
  background-color: #0970d9;
  color: #fff !important;
}


#newsinfo a,
#newsinfo a:hover,
#newsinfo a:active,
#newsinfo a:visited {
  color: #f8991d !important;
  font-weight: bold;
}

#newsinfo .colored.stripe.stripepink {
  background-color: #ff005e;
}

#newsinfo .colored.stripe.stripepink>i.price {
  color: #f8991d !important;
}

#newsinfo .colored.stripe * {
  color: #fff;
}

#newsinfo .colored.stripe span {
  opacity: 1;
  color: #fff;
  margin: .5em 0;
}

#newsinfo .newsimages {
  width: 100%;
  margin-top: .69em;
  display: flex;
}

#newsinfo .newsimages img {
  display: block;
  width: 32%;
  border-radius: 6px;
  overflow: hidden;
  filter: blur(4px) saturate(0.5);
  opacity: 0.69;
  transition: all 250ms ease-in-out;
}

#newsinfo .newsimages img.show {
  opacity: 1;
  filter: blur(0) saturate(1);
}

#newsinfo .newsimages img+img {
  margin-left: 2%;
}

@media screen and (max-width: 640px) {
  #newsinfo .newsimages {
    width: 100%;
    margin-top: .69em;
    display: block;
  }

  #newsinfo .newsimages img {
    display: block;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
  }

  #newsinfo .newsimages img+img {
    margin-left: 0;
    margin-top: 0.5em;
  }
}

.news #hue {
  margin: 0;
  padding: 0;
  margin-top: -1em;
  margin-bottom: 1em;
}

.infoheader {
  font-size: 1em;
  position: relative;
  margin: 4em;
  margin-left: 2em;
  margin-bottom: 1em;
  z-index: 2;
}

.infotext {
  font-size: .69em;
  position: relative;
  margin: 4em;
  margin-top: 1em;
  z-index: 2;
}

.helpheader {
  /*font-size: 33px;*/
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  position: relative;
  margin: 0 auto;
  margin-bottom: 1.5em;
  max-width: 800px;
  z-index: 2;
  padding: 0.3em 1em;
  background-color: white;
  border-radius: 15px 15px 0 0;
  color: black;
  letter-spacing: 0.04em;
}

.helptext {
  font-size: 18px;
  position: relative;
  margin: 0 auto;
  padding-bottom: 1em;
  width: 80%;
  max-width: 800px;
  color: white;
  z-index: 2;
}

#bar {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  overflow: hidden;
  background: #0c0c0c url(../g/18.png) no-repeat bottom right;
  background-size: auto 50px;
  min-width: 320px;
  opacity: 1;
  transition: all 250ms ease-in-out;
  z-index: 10;
}

#bar.view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  color: white;
  overflow: hidden;
  /* background: #0c0c0c url(../g/18.png) no-repeat bottom .5em right .5em;
  background-size: auto 2em; */
  opacity: 1;
}


#warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  background: #0c0c0c;
  background-size: auto;
  opacity: 1;
  z-index: 4;
}

#warning.clear {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  overflow: hidden;
  background: #0c0c0c;
  background-size: auto;
  min-width: 320px;
  opacity: 1;
  transition: all 250ms ease-in-out;
  z-index: 9999;
}

#welcome {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  background: #0c0c0c;
  background-size: auto;
  opacity: 1;
  z-index: 4;
}

#welcome.clear {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  overflow: hidden;
  background: #0c0c0c;
  background-size: auto;
  min-width: 320px;
  opacity: 1;
  transition: all 250ms ease-in-out;
  z-index: 9999;
}

.welc {
  /*background: url(../g/nzaovert.gif) no-repeat center;*/
  z-index: 6;
  --f-size: 15;
	 --f-unit: 1vmin;
	 --f: calc(var(--f-size) * var(--f-unit));
}

.warn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(../g/warning.png) no-repeat center;
  filter: drop-shadow(2px 2px 2px black);
  z-index: 6;
}

.environmentNeon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  filter: blur(0px);
  background:repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url(../g/Neon-City.webp) center no-repeat;
  background-size: cover;
  z-index: 5;
}

.environmentHajime {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  /*filter: blur(6px);*/
  background-size: cover;
  z-index: 5;
}

.neonStreet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  filter: blur(5px);
  background: url(../g/Neon-Street.webp) center no-repeat;
  background-size: cover;
  z-index: -1;
}

/*
linear-gradient(rgba(10,10,10,.2),rgba(0,0,0,.4)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url(https://i.postimg.cc/r8vB10Sg/Kaela-offers-Hajime.webp) no-repeat center


linear-gradient(rgb(242 0 255 / 14%), rgb(255 0 139 / 17%)), repeating-linear-gradient(0, transparent, transparent 2px, #006720 3px, #000000 3px), url(https://i.postimg.cc/r8vB10Sg/Kaela-offers-Hajime.webp) no-repeat center
*/
#help.view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  background: #0c0c0c;
  background-size: auto;
  opacity: 1;
  z-index: 100;
}

#help {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  overflow: hidden;
  background: #0c0c0c;
  background-size: auto;
  min-width: 320px;
  opacity: 1;
  transition: all 250ms ease-in-out;
  z-index: 100;
}

.topnav {
  overflow: hidden;
  margin: auto;
  bottom: 0;
  left: 0;
  display: block;
  user-select: none;
  min-height: 50px;
}

.Day {
background-color: white;
color: black;
}

.Day a {
background-color: white;
color: black;
}

.Night {
background-color: black;
color: white;
}

.Night a  {
background-color: black;
color: white;
}

.topnav a {
  float: left;
  display: block;
  /*color: black;*/
  text-align: center;
  padding: 6px 12px;
  /*min-height: 52px;*/
  text-decoration: none;
  font-family: Empires;
  font-size: 33px;
  text-transform: uppercase;
}

.topnav a:hover {
  background-color: #f40887;
  color: white;
}

.topnav a.active {
  background-color: black;
  color: cyan;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  color: inherit;
  background-color: inherit;
}

.dropdown .dropbtn {
  font-size: 33px;
  border: none;
  outline: none;
  padding: 6px 12px;
  font-family: Empires;
  margin: 0;
  text-transform: uppercase;
  color: inherit;
  background-color: inherit;
}

.dropdown .dropbtn2 {
  font-size: 1.2em;
  border: none;
  outline: none;
  padding: 9px 12px;
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
  text-transform: uppercase;
  color: inherit;
  background-color: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: inherit;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.dropdown-content a {
  float: none;
  color: inherit;
  background-color: inherit;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


.dropdown:hover .dropbtn {
  background-color: #ff1f00;
  color: white;
}

.logo {
  position: relative;
}

.logo a {
  font-family: 'Inzation';
  text-decoration: none;
  font-size: 48px;
  display: flex;
  align-items: center;
  height: 51px;
  padding: 0px 12px 0px 12px;
  float: left;

  text-shadow: -1px 0px 0px rgba(251, 2, 12), 1px 0px 0px rgba(4, 255, 255, 0.8);
}

.logo.Day a:hover {
  /*transform: scale(1.05, 1.05);*/
  color: white;
  background-color: black;
}

.logo.Night a:hover {
  /*transform: scale(1.05, 1.05);*/
  color: black;
  background-color: cyan;
}

.dropdown-content a:hover {
  background-color: cyan;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {

  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive .dropdown {
    float: none;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .topnav.responsive .dropdown .dropbtn::after { 
  content: '\2261';
  }

}

#viewer {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #131313;
  z-index: 1;
}

#lore {
display: block;
  background-color: rgb(0 0 0);
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 3em;
  width: 100%;
  height: 100%;
  /*max-width: 800px;*/
  position: absolute;
  opacity: 0.95;
  z-index: 20;
  cursor: pointer;
}

#strip {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3em;
  background: #0c0c0c;
  z-index: 1;
}

#maxres {
  display: inline-block;
  position: absolute;
  top: 6em;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 0;
  max-width: 100%;
  max-height: -webkit-fill-available;
  transition: none;
  z-index: -1;
}

.portNext {
  max-height: 2.9em;
  margin: 0px 1px 0px 1px;
  cursor: pointer;
}

.port {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 6em;
  transition: none;
  z-index: 0;
}

.portXP {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 3em;
  transition: none;
  z-index: 0;
}

.portXPND {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: none;
  z-index: 0;
}

.Loading {
  background: url(../g/Loading.gif) no-repeat center;
}

.LinkError {
  background: url(../g/error-red.gif) no-repeat center;
}

.imagemain {
  display: block;
  position: relative;
  margin: auto;
  transition: none;
  z-index: 0;
  height: 100%;
}

.roll {
  display: flex;
  position: absolute;
  bottom: 3em;
  width: 100%;
  max-height: 3em;
  /*min-height: 60px;*/
  background: #111111;
  background-image: radial-gradient(circle at 0.2px 0.2px, rgb(141 141 141) 1px, transparent 0px);
  background-size: 16px 16px;
  background-position: 7px 7px;
  /*mask-image: radial-gradient(circle, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);*/
  justify-content: center;
  transition: none;
  /*transform: matrix(1, 0, 0, 1, 0, 0);*/
  z-index: 2;
}

.roll:hover {
  cursor: e-resize;
}

#logo {
  position: absolute;
  bottom: 0;
  display: block;
  z-index: 2;
}

#barname {
  font-family: GraffitiFont, "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 2em;
  position: absolute;
  bottom: .4em;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  z-index: 2;
}

#baryear {
  font-family: Empires, "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1em;
  position: absolute;
  bottom: .2em;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  z-index: 2;
}

.techtext {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1em;
  text-align: center;
  white-space: pre-line;
  padding: 10px;
  user-select: none;
}

.techtext2 {
  font-family: Oswald, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.9em;
  text-align: center;
  white-space: pre-line;
  text-transform: uppercase;
  padding: 10px;
  user-select: none;
}

#logos {
  bottom: 0;
  display: block;
}

#close {
  width: 3em;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 2;
}

#closefixed {
  color: white;
  width: 2.5em;
  position: fixed;
  top: 0;
  right: 15px;
  line-height: 2.5em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 20;
}

#download {
  width: 3em;
  position: absolute;
  top: 3em;
  right: 0;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 2;
}

#fit {
  width: 3em;
  position: absolute;
  bottom: 3em;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 3;
}

#expand {
  width: 3em;
  position: absolute;
  top: 0;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 2;
}

#pan {
  width: 3em;
  position: absolute;
  top: 3em;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 2;
}

#next {
  width: 3em;
  position: absolute;
  right: 0;
  bottom: 50%;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 2;
}

#previous {
  width: 3em;
  position: absolute;
  left: 0;
  bottom: 50%;
  line-height: 3em;
  text-align: center;
  text-shadow: 1px 1px 2px black;
  z-index: 2;
}

.hidde {
  display: none !important;
}

.hiddeGal {
  display: block;
  max-width: .1px;
  max-height: .1px;
}

#logo img {
  margin: auto;
  margin-bottom: 10px;
  margin-left: 0px;
  display: block;
  max-width: 80%;
}

#menubar {
  position: absolute;
  bottom: 0;
  left: 10;
}

#gallery {
  font-size: 0;
  width: 100%;
  position: relative;
  z-index: 0;
  /*touch-action: none;*/
  user-select: none;
}

.numb {
  pointer-events: none;
}

.image {
  display: block;
  position: relative;
  overflow: hidden;
  transition: all 250ms ease-in-out;
}

.image * {
  transition: all 250ms ease-in-out;
}

.image.older {
  float: right;
  opacity: 0.5;
}

.image.older:hover {
  float: right;
  opacity: 1;
}

.image img {
  display: block;
  width: 100%;
  /*transform: scale(1.01, 1.01);*/
  transform-origin: 50% 50%;
  transition: all 250ms;
  opacity: 1;
}

.image span {
  width: 101%;
  position: inherit;
  opacity: 1;
  /*opacity: 0;
  transform: translateY(80px);*/
}

.image:hover img {
  opacity: 1;
  transform: scale(1.1, 1.1);
}

.image:hover span {
  /*opacity: 0.90;
  transform: translateY(0);*/
  color: black;
  background-color: yellow;
}

.image.red:hover span {
  opacity: 0.90;
}

#image:hover {
  cursor: grab;
}

#image:active {
  cursor: grabbing;
}

.barlogo {
  display: none;
  min-height: 1px !important;
}

.barlogo a {
  padding: 2vh;
  font-size: 2em;
  font-family: Inzation !important;
  color: white;
  background-color: #0c0c0c;
  text-transform: none !important;
}

.name {
  /*font-family: "Montserrat", Helvetica, Arial, sans-serif;*/
  font-family: Empires;
  font-size: 25px;
  line-height: 12px;
  width: 100%;
  text-transform: uppercase;
  left: 0;
  bottom: 0;
  padding: 10px;
  color: #f8f9f9;
  background: black;
  /*white-space: pre-line;*/
}

.image.white .name {
  color: #303131;
  background: #f8f9f9;
}

.image.yellow .name {
  color: #303131;
  background: #f4ff20;
}

.image.green .name {
  color: #303131;
  background: #6dff20;
}

.image.orange .name {
  color: #0b0b0b;
  background: #ff1f00;
}

.image.pink .name {
  color: #f8f9f9;
  background: #f40887;
}

.image.purple .name {
  color: #f8f9f9;
  background: #a80694;
}

.image.blue .name {
  color: #0b0b0b;
  background: #24b0ff;
}

.image.red .name {
  color: #0b0b0b;
  background: #fe0016;
}

.iconzao {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconzao' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  transition: none !important;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.iconzao.nz-pan:after {
  content: '\f047';
}

.iconzao.nz-panactive:after {
  content: '\f047';
  color: magenta;
}

.iconzao.nz-pan:hover {
  color: cyan;
  cursor: pointer;
  background: #0c0c0c;
}

.iconzao.nz-next:after {
  content: '\e801';
}

.iconzao.nz-next:hover {
  color: magenta;
  cursor: pointer;
  background: #0c0c0c;
}

.iconzao.nz-previous:after {
  content: '\e800';
}

.iconzao.nz-previous:hover {
  color: magenta;
  cursor: pointer;
  background: #0c0c0c;
}


.iconzao.nz-resize-in:after {
  content: '\e807';
}


.iconzao.nz-resize-out:after {
  content: '\e806';
}

.iconzao.nz-fullsize-in:after {
  content: '\e810';
}


.iconzao.nz-fullsize-out:after {
  content: '\e812';
}

.iconzao.nz-close:after {
  content: '\e835';
}

.iconzao.nz-close:hover {
  color: black;
  opacity: 1;
  cursor: pointer;
  background: red;
}

.iconzao.nz-download:after {
  content: '\e82a';
}

.iconzao.nz-download:hover {
  color: black;
  opacity: 1;
  cursor: pointer;
  background: #1bff00;
}

.iconzao:hover {
  color: cyan;
  opacity: 1;
  cursor: pointer;
  background: #0c0c0c;
}



#servername {
  font-family: Streetlight;
  margin-left: .1em;
}

.artists1 {
  font-family: 'Bastrad';
  color: #00fff3;
  text-shadow: -2px 2px 0px #ff00f7;
  font-size: 2em;
  padding: 10px;
  overflow-wrap: break-word;
}

.artists2 {
  font-family: 'Bastrad';
  color: #ff1898;
  text-shadow: -2px 2px 0px #000000;
  font-size: 2em;
  padding: 10px;
  overflow-wrap: break-word;
}

.buttonsgroup {
  display: block;
  position: inherit;
  margin-left: .1em;
  user-select: none;
}

.playergroup1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  min-height: 300px;
  overflow-y: hidden !important;
}

.playergroup2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  min-height: 300px;
  overflow-y: hidden !important;
}

.metro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  font-size: 0.6em;
}

.metroimg {
  width: 180px;
  cursor: pointer;
}

.gallery-scale {
  margin: 0 auto;
}

.obase {
  /*width: 100vw;*/
  height: 100vw;
  max-width: 768px;
  max-height: 768px;
  margin: 0 auto;
  background: url('../js/o/o-calendar.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center top;
  z-index: 16;
}

.oarrow {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background: url('../js/o/o-arrow.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  background-position: center top;
  pointer-events: none;
  z-index: 3;
}

.oweeks {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background: url('../js/o/o-weeks.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  background-position: center top;
  transition: none;
  z-index: 2;
}

.ocal {
  background-color: pink;
  margin: 0 auto;
}

.grid {
  width: 100%;
  margin: 0 auto;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */
.grid-item {
  width: 100%;
  float: left;
  background: linear-gradient(90deg, #00ff42, #f9db63, #8200ff, #12bcfe, #00ff66);
  /*background-image: url(../g/load.gif);*/
}

.grid_item img {
  display: block;
  max-width: 100%;
}

@media screen and (min-width: 401px) {
  .grid-item {
    width: 50%;
  }

@media screen and (min-width: 750px) {
  .barlogo {
    display: block;
  }
}

@media screen and (min-width: 800px) {
  .grid-item {
    width: 33.333%;
  }
}

@media screen and (min-width: 1200px) {
  .grid-item {
    width: 25%;
  }
}

@media screen and (min-width: 1600px) {
  .grid-item {
    width: 20%;
  }
}

@media screen and (min-width: 2000px) {
  .grid-item {
    width: 16.666%;
  }
}

@media screen and (min-width: 2400px) {
  .grid-item {
    width: 14.285%;
  }
}

@media screen and (min-width: 2800px) {
  .grid-item {
    width: 12.5%;
  }
}

.grid-item--height2 {
  height: 250px;
  background-color: lightblue;
}

.grid-item--height3 {
  height: 350px;
  background-color: violet;
}

.grid-item:hover {
  background: #A2C;
  cursor: pointer;
}


#particles-js {
  width: 100%;
  height: 99%;
  position: fixed;
  z-index: 15;
  pointer-events: none;
}


.clock {
  position: relative;
  /*Top: 13%;*/
  color: #17D4FE;
  font-size: 150% !important;
  font-family: Orbitron;
  letter-spacing: .1em;
  display: flex;
  justify-content: center;
  user-select: none;
}

.timer {
  margin: 0;
  position: relative;
  /*top: 15%;*/
  display: grid;
  justify-content: center;
  user-select: none;
}

.tablecal {
  margin: 0;
  font-size: 53%;
  font-family: Orbitron;
  position: relative;
  /*top: 27%;*/
  display: grid;
  justify-content: center;
}

@media screen and (max-width: 640px) {
  .clock {
    font-size: 150%;
  }
}

@media screen and (min-width: 640px) {
  .clock {
    font-size: 350%;
  }
}

@media (pointer: coarse) {
  a:hover {
    background-color: none;
    background: none;
  }

 

  .topnav a:hover {
    background-color: none;
    background: none;
    color: black;
  }

  .iconzao:hover {
    all: revert-layer;
  }

  .iconzao.nz-close:hover {
    color: white;
    background: none;
  }

  .button:hover,
  .buttonsub:hover,
  .button2:hover {
    background-color: revert-layer;
    background: black;
  }

  .button4:hover {
    color: white;
    background: none;
  }

  .iconzao.nz-next:hover {
    color: white;
    background: none;
  }

  .iconzao.nz-previous:hover {
    color: white;
    background: none;
  }

  .iconzao.nz-pan:hover {
    color: white;
    background: none;
  }

  .iconzao.nz-resize:hover {
    color: white;
    background: none;
  }

  .iconzao.nz-fullsize:hover {
    color: white;
    background: none;
  }

  .iconzao.nz-download:hover {
    color: white;
    background: none;
  }

}}