@font-face {
  font-family: 'mfont';
  src: url('Iceland-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'mfontCyr';
  src: url('Tektur.ttf') format('truetype');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
* { margin: 0;  padding: 0;  box-sizing: border-box;}

body {
  /* font-family: Arial, sans-serif;
   */
  margin: 0; 
  height: 100vh; 
  overflow: hidden; 
 	line-height: 1;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

h1, h2, h3 {  color: #333;}
a {  white-space: nowrap;   text-decoration: none;    color: #8ff;    }
p {  margin: 1em 0;}

/* :root {
 
  --box-shdw: rgba(0, 123, 123, 0.8) 0px 0px 10px;
  --text-hover:rgba(0, 123, 123, 0.95);
  --bgrnd-msg: linear-gradient(to top, rgba(0, 60, 60, 0.2), rgba(0, 60, 60, 0.8) ,rgba(0, 60, 60, 0.7) , rgba(0, 60, 60, 0));
  --elmbox-shadow2: 0px 0px 12px rgba(0,255,255,0.75);
  --elmborder2: 1px solid rgba(127,255,255,0.75);
  --elmbox-shadow: 0px 0px 6px rgba(0,255,255,0.5);
  --elmborder: 1px solid rgba(127,255,255,0.25);
} */
#fullscreen-message2 {  position: fixed;   top: 0;  left: 0;  width: 100%;  height: 100%;
  background-color: rgba(255, 255, 255, 1);  color: rgb(0, 0, 0);
  display: flex;  justify-content: center;  align-items: center;
  font-size: 1.5em;  z-index: 1000;}
#fullscreen-message {
  position: fixed;   top: 0;  left: 0;  width: 100%;  height: 100%;
  background-color: rgba(255, 255, 255, 1);  color: white;  display: flex;  justify-content: center;
  align-items: center;  font-size: 24px;  z-index: 100;
}

    .planeX{
      width: 1000px; height: 1000px;
      border: 5px solid rgba(189, 255, 127, 0.75);
      /* background-color: #ffff0013; */
    }
    .planeY{
      width: 1000px; height: 1000px;
      border: 5px solid rgba(255, 127, 212, 0.849);
      /* background-color: rgba(2, 146, 2, 0.082); */
    }
    .planeZ{
      width: 1000px; height: 1000px;
      border: 5px solid rgba(127, 157, 255, 0.952);
      /* background-color: rgba(255, 0, 0, 0.089); */
    }

.opfdin{  opacity: 0;  animation: fadeIn 1s linear;}
.opfdout{  opacity: 1;  animation: fadeOut 1s linear;}

.opa{
  opacity: 0;
  /* animation: fadeIn 2s infinite; */
}
  .ftsz45{    font-size: 45px;  }
  .ftsz42{    font-size: 42px;  }
  .ftsz38{    font-size: 38px;  }
  .ftsz34{    font-size: 34px;  }
  .ftsz30{    font-size: 30px;  }
  .ftsz26{    font-size: 26px;  }
  .ftsz20{    font-size: 20px;  }
  .ftsz18{    font-size: 18px;  }
  .ftsz17{    font-size: 17px;  }
  .ftsz16{    font-size: 16px;  }
  .ftsz15{    font-size: 15px;  }


.divtxtrgt2 {
    position: relative;
    top: 25%;
    writing-mode: horizontal-tb;
    /* transform-origin: left bottom;  */
    align-items: center; 
    justify-content: center; 
    color: #424242;
    font-size: 55px;
    transform: scaleX(-1);
    font-family: Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        /* text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2); */
    }
.divtxtrgt1 {position: absolute;right: 0; top: 5%;
            align-items: center; 
      justify-content: center; 
      display: grid;
      /* height: 100%;  */
      width: 99%;
      color:rgba(255, 255, 224, 1);
      font-size: 75px;
      transform: scaleX(-1);
      font-family: Helvetica, sans-serif;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
      }

.mtrx{
  position: absolute;
    left: 0; bottom: 0px;
    writing-mode: horizontal-tb;
    height: 2700px; width: 100%;
    text-align: center;
    color: rgba(255, 255, 224, 0.8);
    font-size: 60px;
    padding-top: 30px;
    /* transform: scaleY(-1) scaleX(-1); */
    font-family: Helvetica, sans-serif; 
    text-shadow: 0 0 6px #ffffff;
}
.tend{
  position: absolute;
    left: 0; bottom: 0px;
    writing-mode: horizontal-tb;
    height: 1500px; width: 100%;
    text-align: center;
    color: rgba(255, 255, 224, 0.8);
    font-size: 65px;
    padding-top: 30px;
    /* transform: scaleY(-1) scaleX(-1); */
    font-family:mfontCyr, Helvetica, sans-serif; 
    text-shadow: 0 0 6px #ffffff;
}
.elementAlfa { position: relative;float: left;
  width: 80px; height: 80px;
  box-shadow: 0px 0px 7px rgba(0,255,255,0.5);
  border: 1px solid rgba(127,255,255,0.25);
  margin-left: 6px;
  /* margin: 4px; */
  font-family: Helvetica, sans-serif; text-align: left;
  line-height: normal; cursor: default;
}
.elementAlfa .symbolAlfa {
    position: relative;top: 0px; left: 0px; right: 0px;
    font-size: 30px; font-weight: bold;
    text-align: center;
    padding-top: 23%;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  }
  
#container { position: absolute; display: block;       background-color: #000000;}
#menu {
  position: absolute;
  /* float: right; */
  right: 2%; bottom: 0px; padding: 0 0 1.5vh 0;
  user-select: none;opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.bxshdw{
  --box-shdw: rgba(0, 123, 123, 0.9) 0px 0px 18px;
  box-shadow: var(--box-shdw);
}
/* .tags{
  --color:rgba(0, 123, 123, 0.8);
  color: var(--color);
  border: none;border-bottom: 1px solid  var(--color);outline: none;background-color: transparent;  caret-color:  var(--color); 
  font-size: 1em;
} */
.lbl_btnt{
  flex-wrap: wrap;    display: flex;    gap: 25%; width: 20%; justify-content: center;
  color: aliceblue;font-size: 18px; position: absolute;top:-65%;right: 22%; opacity: 0; 
    transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease;
 }
.vsblbtn {      opacity: 1;      transform: translateY(0);  }
#menu.visible {      opacity: 1;      transform: translateY(0);  }
.menures{left: 2%; display: flex; justify-content: space-evenly;flex-direction: row-reverse; }
.msg{
  height: 100%;
  text-align: left;
  color: aliceblue;
  font-size: 45px;
  font-family: 'Courier New', monospace;
}
.phto{
  backface-visibility:visible;
  /* transform-style: preserve-3d; */
  position: absolute;
  bottom: 16px;
  /* image-rendering: optimizeQuality; */
  /* background-color: rgba(0, 60, 60, 0.45); */
  height:Calc(100% - 50px);
  width: 132px;
  border: 1px solid rgba(127,255,255,0.0);
  transition: all 0.5s linear; 
  /* transition: background 0.6s linear; */
  /* transition: background-position 0.5s ease-out opacity 0.3 ease-out; */
  /* will-change:'transform' ; */
  /* animation: fadeIn 3s ; */
  /* animation: fadeIn 1s ; */
}
   /*  .phto:hover {
     
       box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
      border: 1px solid rgba(127,255,255,0.75); 
      animation: phtohov 1s;
     } */

    @keyframes phtohov {
      0% {    filter:  invert(1)  hue-rotate(240deg) }
      25% {    filter:  invert(0)  }
      50% {    filter:  invert(1)  hue-rotate(140deg)  }
      100% {    filter:   invert(0)  }
    }
    /* .elementH {
      width: 280px;
      height: 2240px;
      box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
      border: 1px solid rgba(127,255,255,0.25);
      font-family: Helvetica, sans-serif;
      text-align: center;
      line-height: normal;
      cursor: default;
      transition: width 0.2s ease, height 0.2s ease;
    } */
    .element0 {
      width: 110px;
      height: 40px;
      /* box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
      border: 1px solid rgba(127,255,255,0.25);
      font-family: Helvetica, sans-serif; */
      text-align: center;
      line-height: normal;
      cursor: default;
      transition: width 0.2s ease, height 0.2s ease;
    }
    .elementT {
      position: relative;
      width: 260px;
      height: 60px;
      border-radius: 10px;
      /* box-shadow: 0px 0px 12px rgba(0,255,255,0.5); */
      /* border: 1px solid rgba(127,255,255,0.25); */
      font-family: Helvetica, sans-serif;
      text-align: center;
      line-height: normal;
      cursor: default;
      transition: width 0.2s ease, height 0.2s ease;
    }
    /* .element {
				width: 120px;
				height: 160px;
				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
				border: 1px solid rgba(127,255,255,0.25);
				font-family: Helvetica, sans-serif;
				text-align: center;
				line-height: normal;
				cursor: default;
			} */
 .clrfnt{
  --clrfnt: rgba(0,123,123, 0.95);
  color: var(--clrfnt);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
 }
 .clrfnt2{
  --clrfnt: rgba(0,123,123, 0.95);
  color: var(--clrfnt);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
 }
 .thmlbl{
  --fclr: #ffffff;
  --fntsize:17px;
  background: linear-gradient(90deg, #ffffff, var(--fclr));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--fntsize);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }      
  .bgclrin{
    --bg-clr: rgba(0,123,123, 0.5);
    --tx-clr: rgba(0,123,123, 0.95);
    background-color: var(--bg-clr);
    box-shadow: inset 0px 0px 6px rgb(0 0 0 / 50%);
  }
  .brdrspcprfl{
    --elmboxshdw: 0px 0px 18px rgba(0,255,255,0.5);
    --clrbrdr: 5px solid rgba(127,255,255,0.25);
    box-shadow: var(--elmboxshdw);
    border: var(--clrbrdr);
  } 
  .brdrnorm{
    --elmbox-shadow: 0px 0px 6px rgba(0,255,255,0.5);
    --elmborder: 1px solid rgba(127,255,255,0.25);
    --brd-clr:rgba(127,255,255,0.25);
    box-shadow: var(--elmbox-shadow);
    border: var(--elmborder);
    /* border-color: var(--brd-clr); */
    /* box-shadow: 0px 0px 6px rgba(0,255,255,0.5);
    border: 1px solid rgba(127,255,255,0.25); */
  } 
.brdrbright{
  --elmbox-shadow2: 0px 0px 12px rgba(0,255,255,0.75);
  --elmborder2: 1px solid rgba(127,255,255,0.75);
  box-shadow: var(--elmbox-shadow2);
  border: var(--elmborder2);
  /* box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
  border: 1px solid rgba(127,255,255,0.75); */
} 

#id_txtarea{
  --box-shadow: rgba(0, 255, 255, 0.6) 0px 0px 3px 1px;
  --bgclr: rgba(0, 123, 123, 0.20);
  --txclr: rgb(82, 218, 195);
  box-shadow: var(--box-shadow);
  background-color: var(--bgclr);
  color: var(--txclr);
}
#dv_timer{
  --box-shadow: rgba(0, 255, 255, 0.6) 0px 0px 10px;
  --bgclr: rgba(33, 54, 54, 0.37);
  --txclr: rgb(42, 141, 125);
  box-shadow: var(--box-shadow);
  background-color: var(--bgclr);
  color: var(--txclr);
}

.zmelm{width: 800px;height: 400px;}
.focuselm{box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.75);
/* transition: box-shadow 0.2s ease-out,border 0.2s ease-out ; */
animation: flicker2_1 0.3s;
}
.animflck21{animation: flicker2_1 0.3s;}


.elmnt_photo {   position: absolute;
  bottom: 0; opacity: 0;
  /* border-radius: 4%; */
  font-family: Helvetica, sans-serif;
  text-align: center;
  line-height: normal;
  cursor: default;
  transition: all 0.5s linear; 
  /* transition: width 0.2s ease, height 0.2s ease, background-color 0.3s ease; */
  }
.elmnt_pht_bttn::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none; 
}
.elmnt_pht_top::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none; 
}
.elmnt_pht_lft::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgb(0, 0, 0) 100%);
  pointer-events: none; 
}
.elmnt_pht_rght::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(0, 0, 0) 100%); border-right: none;
  pointer-events: none; 
}
.elmnt_photo .dtlsph {  position: absolute;  bottom: 0px;  border-radius: 4px;  height: 100%; 
  width: 100%;  right: 0px;  
  color: white; font-size: 75px; 
  display: grid;
  justify-content: center;
  align-content: center;
}
.elmnt_photo .dtlsphlft {  position: absolute;  bottom: 0px;  height: 100%;   display: grid;    align-content: center;
  overflow: hidden;
    word-break: break-all;
    overflow-wrap: break-word;
  --bcdclr: rgb(220 128 125 / 30%) 50%;
  width: 100%;  right: 0px; background: linear-gradient(to left,  var(--bcdclr), rgb(0 0 0 / 0%) 100%);  }
.elmnt_photo .dtlsphrgh {   --bcdclr: rgb(220 128 125 / 30%) 50%;    position: absolute;  bottom: 0px;   height: 100%; 
  overflow: hidden;
    word-break: break-all;
    overflow-wrap: break-word;
  display: grid;    align-content: center;  width: 100%;  right: 0px; 
  background: linear-gradient(to right, var(--bcdclr), rgb(0 0 0 / 0%) 100%);   }
.element {
width: 124px;
height: 36px;
position: absolute;
bottom: 0;
border-radius: 4px;
font-family: Helvetica, sans-serif;
text-align: center;
line-height: normal;
cursor: default;
transition: width 0.2s ease, height 0.2s ease, background-color 0.3s ease;
}


/* .element:hover {
box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
border: 1px solid rgba(127,255,255,0.75);
} */
.element .number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 12px;
  color: rgba(127,255,255,0.75);
}
.element .msg {
  position: absolute;
  top: 4px;
  left: 0px;
  right: 0px;
  font-size: 30px;
  font-weight: bold;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 0 10px rgba(0,255,255,0.95);
}
.element .nameurl {
  position: absolute;
    display: flex;
    justify-content: space-around;
    font-size: 32px;
    top: -30px;
    font-weight: 500;
    width: 100%;
}
.element .name {
  /* position: relative;
  top: 6px;
  left: 0px;
  right: 0px; */
  filter: drop-shadow(0px 4px 2px black);
  height: 100%;
  display: grid;
  align-content: center;
  justify-content: center;
  font-size: 15px;
  font-family: mfontCyr,auto;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
}
.element .details {
  position: absolute;
  bottom: 4px;
  border-radius: 4px;
  height: 26px;
  /* left: 4px; */
  width: 5px;
  right: 4px;
  font-size: 12px;
  font-weight: bold;
  color: rgba(127,255,255,0.75);
  box-shadow: 0 0 3px rgba(0,255,255,0.95);
  background-color: #a3ebe6b3;
}

.nonshdw{
  filter: none;
}

.shdwl{
  --shd:rgba(255, 170, 220, 0.5);
  filter: drop-shadow(var(--shd) -65px -20px 30px);
  transition: all 0.5s linear;
}
.shdwr{
  --shd:rgba(255, 170, 220, 0.5);
  filter: drop-shadow(var(--shd) 65px -20px 30px);
  transition: all 0.5s linear;
}
.dvboxtwt{
  background-color: #D3D3D3;
  margin: 0 0 10% 0;
}

.dv_msg{
  --fclr: #ffffff;
  filter: drop-shadow(2px 6px 8px black);
  background: linear-gradient(0deg, #ffffff, var(--fclr)); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  transform: scaleY(-1) scaleX(-1);
  text-shadow: 0 0 10px #ffffff4f;
  font-size: 62px;
  text-align: left; 
  writing-mode: vertical-lr;
  padding: 20px 10px 20px 10px;
  /* font-family:mfontCyr, Helvetica, sans-serif;  */
}
.th_bx_msg{ --box-shadow: rgba(0, 255, 255, 0.6) 0px 0px 3px 1px;
  --bgclr: rgba(0, 123, 123, 0.20);  position: absolute;  left: 20px; bottom: 15px;
   background-color: var(--bgclr); border-radius: 22px; box-shadow:var(--box-shadow); backdrop-filter: blur(3px);
}
/* .divtxtlft1 {  position: absolute;  left: 20px; bottom: 15px;} */
/* .divtxtlft1 { --bgclr: rgba(0, 123, 123, 0.20);  position: absolute;  left: 20px; bottom: 15px;
   background-color: var(--bgclr); border-radius: 22px;    } */
.dv_uptwt{
  position: relative;  float: right;
  bottom: 0px;      right: 17%; 
      height: auto; padding: 0% 0% 2% 0%;
  z-index: 10;
  /* box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
  border: 1px solid rgba(127,255,255,0.25); */
  font-family: Helvetica, sans-serif;
  transition: all 0.3s linear;
}
.view_prfl{  display: none;  position: relative; float: right;
  bottom: 5vh;      right: 1vw;
  width: auto;      height: auto;
  border-radius: 10px;
  /* box-shadow: 0px 0px 12px rgba(0,255,255,0.5); */
  /* border: 1px solid rgba(127,255,255,0.25); */
  font-family: Helvetica, sans-serif;
  /* background-color: rgba(15, 50, 50, 0.9); */
      height: auto;
}
    .dvspcs{
      display: none;
      position: absolute;
      bottom: 70px;      right: 2px; left: 2px;   height: 60px;
      border-radius: 10px;
      /* box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
      border: 1px solid rgba(127,255,255,0.25); */
      font-family: Helvetica, sans-serif;
      /* background-color: rgba(15, 50, 50, 0.9); */
     
    }
.animsq{  animation: flicker3 0.2s;}
.animsq2{  animation: fadeInOut 6s linear;}

.hght20px{  height: 20px;}
    .vw{ display: block;  animation: fadeIn 0.6s ; }
    .hd{ display: none;  transition: all 0.5s linear; }
    .hd2{  animation: opadispl 0.2s;  animation-fill-mode: forwards; }
    .vw2{display: block; animation: flicker3 0.2s;}
    .vt{visibility:hidden;  transition: fadeOut 0.5s ease;}
    .vh{visibility:hidden;  transition: fadeOut 0.5s ease;}
    .vv{visibility:visible; transition: fadeIn 0.5s ease;}

    .vtvflz{visibility: visible; animation: flicker3zoom 4s;}
    .clranmt{ animation: flickerClrFont 5s;}
    /* .fntsize{animation:scaleFontSizeIn 0.3s ; transition: transform 0.3s;} */
    .fntsize121{animation:scaleFontSizeOut 0.3s ; transition: transform 0.3s;}
.bx_spctags{   display: none; 
  position: absolute;bottom: 31vh; right:2vh;width: calc((100vh/2 + 100%/2)/2);min-height:10vh; max-height: 60vh;
  padding: 0;z-index: 10;
}
.spctags{ 
  position: relative;width: 100%;height: auto; top: 0;left: 0;
         border-radius:20px ;background-color: rgba(10, 20, 30, 0.70);backdrop-filter: blur(4px);
         display: grid;align-content: center;  padding: 3%; z-index: 10;user-select: none; overflow: hidden;
}
#spctags::-moz-scrollbar {  width: 2px;  height: 2px;  }
#spctags::-webkit-scrollbar {      width: 2px;      height: 2px;  }

.iconrec {  --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);  transition: stroke 0.3s;   }
.iconrec.checked {    display: none;  transition: all 0.3s linear;  }
.fuser {  --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);  transition: fill 0.3s;  }
.fuser.checked {    display: none;  transition: all 0.3s linear;  }
.fuser2 {    --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);  fill: var(--bg-clr);}
.guser {  --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);  transition: stroke 0.3s;   }
.guser.checked {    display: none;  transition: all 0.3s linear;  }
.guser2 {  --bg-clr: rgba(0,123,123, 0.5); stroke: var(--bg-clr);  fill: var(--bg-clr);}
.guser3 {  --bg-clr: rgba(0,123,123, 0.5); stroke: var(--bg-clr); }
.guest {  --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);  transition: fill 0.3s;}
.guest.checked {    display: none;  transition: all 0.3s linear;  }
.guest2 {    --bg-clr: rgba(0,123,123, 0.5);    stroke: var(--bg-clr); }
.btniconclr{  --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);   fill: var(--bg-clr); transition: fill 0.3s, stroke 0.3s; }
.iconsend{  --bg-clr: rgba(0,123,123, 0.5);  stroke: var(--bg-clr);   fill: var(--bg-clr); transition: fill 0.3s, stroke 0.3s; }

.iconloctn { --bg-clr: rgba(0,123,123, 0.4);  stroke: var(--bg-clr);  fill: var(--bg-clr);}
.nickname{
  position: relative;
  float: left;
  padding: 18px;
  margin-bottom: 15px;
  font-size: 65px;
  box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
  border: 2px solid rgba(127,255,255,0.75);
  /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.95); */
}
.nick{
  position: absolute;
  bottom: -77px; width: 108%; text-align: center;
  border: 6px solid;
  font-family: Helvetica, sans-serif;  transform: scaleX(-1);
  font-size: 60px; font-weight: bold; color: #D3D3D3;
  align-items: start; 
  justify-content: center;
  display: grid;height: 110px;
}
.btnspc {
  position: relative;
  float: right;
  user-select: none; outline: none;
  /* margin: 5px;
  width: 45px;    height: 45px; */
  overflow: hidden;
  cursor: pointer;
  display: flex; 
  align-items: end; 
  justify-content: end; 
  background: rgba(0, 0, 0, 0.7);
  --text-color:rgba(0, 123, 123, 0.8);
  color: var(--text-color);
  /* border: 2px  dashed; */
  border-radius: 50%;
  /* touch-action: manipulation; */
}

.btnspc input[type="file"] {position: relative;top: 0;right: 0;opacity: 0;cursor: pointer;height: 100%;width: 100%;  }
.btnspc:focus{    outline: none;       box-shadow: none;    }
.btnspc:active{    outline: none;    box-shadow: none;}
.btnspc:hover {
    /* border: 1 solid  rgba(206, 29, 29, 0.705); */
    /* color:#1af7f1b5; */
    --text-hover:rgba(0, 123, 123, 0.95);
    color: var(--text-hover);
    /* box-shadow: rgba(206, 29, 29, 0.705) 0px 0px 10px; */
      /* background-color: #0057b300;  */
  }
  /* .btnspc svg {    fill: white;     width: 24px;     height: 24px;} */

  /* button {
    color: rgba(127,255,255,0.75);
    background: transparent;
    border-radius: 4px;
    outline: none;
    outline: 1px solid rgba(127,255,255,0.75);
    border: 0px;
    padding: 10px 10px;
    cursor: pointer;
  }
  button:hover {    background-color: rgba(0,255,255,0.1);  }
  button:active {    color: #000000;    background-color: rgba(0, 255, 255, 0);  }
  button:focus {      outline: none;       box-shadow: none;   } */

  textarea:focus {    border: none;     outline: none; }
  textarea::-moz-scrollbar {    width: 2px;    height: 2px;  }
  textarea::-webkit-scrollbar {      width: 2px;      height: 2px;  }
   

  /* .crop-area {
      position: relative;
      display: inline-block;
  } */
 .elmmoon{
  width: 22px;  height: 22px;
  background-color: white; border-radius: 50%;
  box-shadow: 0px 0px 100px rgba(255, 255, 255, 1);
  /* border: 1px solid rgba(255, 255, 255, 0.25); */
  text-align: center;
  line-height: normal;
  cursor: default;
  transition: width 0.2s ease, height 0.2s ease;
 }
  #canvas {      border: 1px solid #ccc;  }
  .photo{    height: 100%;  }
  .crop-box {      position: absolute;      border: 1px dotted #09b1a3;      cursor: move;  }
  .circle {
    width: 50px;
    height: 50px; 
    background-color: white; 
    border-radius: 50%; 
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}
.ff1 {
  font-family: mfont;
}
.letterurl { color: white;
  font-family: mfont;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  animation: fadeIn 1s ;
}
  .letter {
    /* animation: flicker 2s ; */
    font-family: mfont;
    font-size: 27px;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.95);
    animation: fadeIn 1s ;
  }
  .animatswtspc{
    animation: switchspc 1s ;
  }
  .falling-text {
    color: #09b1a3;
    position: absolute;
    white-space: nowrap;
    animation: fallmtrx 55s linear infinite;
}
@keyframes fallmtrx {
    0% {        transform: translateY(-10%);    }
    100% {        transform: translateY(200vh);    }
}
  @keyframes switchspc {
    0% { transform:  rotate3d(0, 1, 0, 90deg);   }
    100% {  transform:  rotate3d(0, 1, 0, 0deg);   }
  }
  @keyframes flicker2_1 {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes flicker3 {
    0% {      opacity: 0;    }
    20% {      opacity: 1;    }
    40% {      opacity: 0;    }
    60% {      opacity: 1;    }
    80% {      opacity: 0;    }
    100% {      opacity: 1;    }
  }

  @keyframes scaleFontSizeIn {
    0% { transform: scale(2)}
    100% {  transform: scale(1)  }
  }
  @keyframes scaleFontSizeOut {
    0% { transform: scale(1) }
    50% {  transform: scale(2) }
    100% { transform: scale(1) }
  }
  @keyframes flickerClrFont {
    0% {   color: aliceblue;  }
    20% {    color: transparent;   }
    40% {  color: aliceblue;   }
    60% {    color: transparent;    }
    80% {  color: aliceblue;  }
    100% {     color: transparent;   }
  }
  @keyframes flicker3zoom {
    0% {      opacity: 0;  zoom: 0.9;  }
    20% {      opacity: 1; zoom: 1.2;   }
    40% {      opacity: 0; zoom: 0.9;   }
    60% {      opacity: 1; zoom: 1.2;   }
    80% {      opacity: 0; zoom: 0.9;   }
    100% {      opacity: 1; zoom: 1;   }
  }

@keyframes opadispl {
    95% {      opacity: 0;    }
    100% {   display: none;     }
   }
 
  @keyframes flicker2 {
    0% {      opacity: 0;    }
    33% {      opacity: 1;    }
    66% {      opacity: 0;    }
    100% {      opacity: 1;    }
   }
   @keyframes flickerVW {
    0% {    display: block;    }
    25% {   display: none;    }
    50% {   display: block;    }
    75% {    display: none;    }
    100% {    display: block;    }

   }
  
  .animatphto{
    box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
    border: 1px solid rgba(127,255,255,0.75);
    animation: flicker2_0 1.5s;
  }
  @keyframes flicker3_0 {
    0% {      opacity: 0;    }
    25% {      opacity: 1;    }
    50% {      opacity: 0;    }
    75% {      opacity: 1;    }
    100% {      visibility: hidden;    }
  }
  @keyframes flicker2_0 {
    0% {      opacity: 0;    }
    25% {      opacity: 1;    }
    50% {      opacity: 0;    }
    75% {      opacity: 1;    }
    100% {      opacity: 0;    }
  }
   
@keyframes fadeInOut {
  0% {    opacity: 0;  }
  50% {    opacity: 1;  }
  100% {    opacity: 0;  }
}
@keyframes fadeIn {
  0% {    opacity: 0;  }
  100% {    opacity: 1;  }
}

@keyframes fadeOut {
  0% {    opacity: 1;  }
  100% {    opacity: 0;  }
}
  .child{
    display: inline-block; 
    margin-right: 20px;
    text-align: center; font-size: 14px; 
    border-top: 4px dashed rgba(127, 157, 255, 0.952);
    border-left: 2px solid rgba(127, 157, 255, 0.952);
    border-right: 2px solid rgba(127, 157, 255, 0.952);
    width: 100px;    height: 30px;
    line-height: 40px;
    border-radius: 50% 50%;
    border-bottom: 0px;
  }
.parent{    position: absolute;    top:5px;  user-select: none;  
  transition: scroll-left 0.2s ease-in-out;  scroll-behavior: smooth;
     left: 0px;    right: 0px;  padding: 5px;  padding-left: 8px;padding-right: 8px;
         overflow-x: auto;overflow-y: hidden;      box-sizing: border-box;  white-space: nowrap;
  /*   box-shadow:20px -1px 15px -14px rgba(0,0,0,0.75) inset, -20px -1px 15px -14px rgba(0,0,0,0.75) inset;
  -webkit-box-shadow: 20px -1px 15px -14px rgba(0,0,0,0.75) inset, -20px -1px 15px -14px rgba(0,0,0,0.75) inset;
  -moz-box-shadow: 20px -1px 15px -14px rgba(0,0,0,0.75) inset, -20px -1px 15px -14px rgba(0,0,0,0.75) inset;*/
  }
  .parent::-moz-scrollbar {
      width: 2px;
      height: 2px;
  }
  .parent::-webkit-scrollbar {
      width: 2px;
      height: 2px;
  }

  .slider {
    -webkit-appearance: none;
    /* height: 20px; */
    /* border-radius: 5px;   */
    --bcgr:rgba(150, 150, 150, 0.45);
    background-color: var(--bcgr);
    /* background: #d3d3d3; */
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    --bcgrth:rgba(150, 150, 150, 0.75);
    --thumb-width: 14px;
  }
  .slider::before {
    background-color: #000000;
  }
  .slider::-webkit-slider-thumb {  -webkit-appearance: none;    appearance: none;
    /* height: 90%;    width: 10%;  */
    /* height: 14px;    width: 14px;  */
    width: var(--thumb-width);
    height: var(--thumb-width);
    border-radius: 50%; 
    background-color: var(--bcgrth);
    cursor: pointer;
  }
  .slider::-moz-range-thumb {
    /* height: 14px;    width: 14px;  */
    width: var(--thumb-width);
    height: var(--thumb-width);
    border-radius: 50%;
    background-color: var(--bcgrth);
    cursor: pointer;
  }
.iconbtnsize{
  --icon-size: 23px;
  width: var(--icon-size);
  height: var(--icon-size);
}
  input[type="radio"] {    display: none;}
  .custom-radio {
    display: inline-block;
    /* width: 22px;
    height: 22px; */
    border-radius: 50%;
    /* border: 2px solid #ccc; */
    /* margin-right: 6px; margin-left: 6px; */
    cursor: pointer;
    position: relative;
}
.tagch{  display: none;  cursor: pointer; }
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 18px;}

input[type="radio"]:checked + .custom-radio {    border-color: transparent;}
input[type="radio"]:checked + .custom-radio::after {
    content: '';
    position: absolute;
    top: 50%;left: 50%;
    width: 50%;    height: 50%;
    border-radius: 50%;
    background-color: inherit; 
    transform: translate(-50%, -50%);
}
input::placeholder {  color: rgba(10, 20, 30, 0.7); }


.falling-symbol {
  font-size: 50px;
  color: white;
  position: absolute;
  top: 0px; 
  animation: fall 15s linear infinite, rotate 3s linear infinite;
}

@keyframes fall { 
   0% {      top: -50px;  }
  100% {  bottom: 0px; }
}

@keyframes rotate {
    0% {      transform: rotate(0deg);  }
  100% {      transform: rotate(360deg);  }
}

.fileUploadBig{ padding: 40px 40px; font-size: 40px;}
.zoomed {  font-size: 30px;  transition: width 0.3s ease, height 0.3s ease; }

/* @media (min-height: calc(100vw * 1.1)) {
  .fileUploadBig{ padding: 40px 40px; font-size: 40px;}
 
} */

.wdth1{ min-width: 300px; width: 360px;}  
.wdth2{ width: 85%;}

.cstm_rd1{   margin: 3px;    width: 30px;    height: 30px;   }
.cstm_rd1_5{ margin: 5px;    width: 40px;    height: 40px;   }
.cstm_rd2{    margin: 5px;    width: 60px;    height: 60px;   }
.cstm_rd2_5{ margin: 6px;    width: 70px;    height: 70px;   }
.cstm_rd3{ margin: 7px;    width: 80px;    height: 80px;   }
.cstm_rd3_5{ margin: 8px;    width: 90px;    height: 90px;   }
.cstm_rd4{ margin: 10px;    width: 100px;    height: 100px;   }

.density1{   margin: 4px;    width: 45px;    height: 45px;  border: 2px  dashed;  }
.density1_5{      width: 55px;    height: 55px;  border: 3px  dashed; }
.density2{     width: 75px;    height: 75px;  border: 4px  dashed; }
.density2_5{      width: 90px;    height: 90px;  border: 5px  dashed; }
.density3{     width: 105px;    height: 105px;  border: 6px  dashed; }
.density3_5{      width: 115px;    height: 115px; border: 7px  dashed;  }
.density4{     width: 125px;    height: 125px;  border: 8px  dashed; }

.dnst_btn1{width: 40px;    height: 40px;  border: 7px  double;  }
.dnst_btn1_5{width: 50px;    height: 50px;  border: 8px  double; }
.dnst_btn2{width: 60px;    height: 60px;  border: 9px  double; }
.dnst_btn2_5{width: 80px;    height: 80px;  border: 10px  double; }
.dnst_btn3{width: 90px;    height: 90px;  border: 11px  double; }
.dnst_btn3_5{width: 100px;    height: 100px; border: 12px  double;  }
.dnst_btn4{width: 110px;    height: 110px;  border: 13px  double; }

.brdnone{border: none;}

.timer {
  position: relative;  width: 100%;   height: 100%;   border-radius: 50%;   overflow: hidden; 
}

.countdown {
  display: grid;
  align-content: end;
  justify-content: center;
  --bgclr: rgba(33, 54, 54, 0.37);
  position: absolute; padding-bottom:5%;
  width: 100%;  height: 100%;
  border-radius: 50%;
  background:var(--bgclr);
  clip-path: circle(100%);
  animation: none; 
}

@keyframes countdown {
  from {      clip-path: circle(100%);  }
  to {      clip-path: circle(0%);  }
}

/* 
.plus-button {
  position: relative;  width: 100%;   height: 100%;   background-color: #007bff00;
  border: none;  border-radius: 5px;  cursor: pointer;  outline: none;}

.plus-button::before,
.plus-button::after {
  content: '';  position: absolute;
  background-color: rgb(33, 45, 56);
}

.plus-button::before {
  width: 10%; 
  height: 80%; 
  top: 10%; 
  left: 50%; 
  transform: translateX(-50%); 
}

.plus-button::after {
  width: 80%; 
  height: 10%; 
  top: 50%; 
  left: 10%; 
  transform: translateY(-50%); 
} */

/* .plus-button:hover {  background-color: #0056b3;} */

@media (max-width: 600px) {}


/*  1x */
@media only screen and (min-resolution: 90dpi) and (max-resolution: 102dpi) {.fntsize{font-size: 18px;} 
  .tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 22px;}
}

/*  1.5x */
@media only screen and (min-resolution: 135dpi) and (max-resolution: 162dpi) { .fntsize{font-size: 34px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 46px;}
}

/*  2x */
@media only screen and (min-resolution: 180dpi) and (max-resolution: 204dpi) {.fntsize{font-size: 42px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 52px;}
}

/*  2.5x */
@media only screen and (min-resolution: 225dpi) and (max-resolution: 255dpi) {.fntsize{font-size: 44px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 54px;}
}

/*  3x */
@media only screen and (min-resolution: 270dpi) and (max-resolution: 306dpi) {.fntsize{font-size: 46px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 56px;}
}

/*  3.5x */
@media only screen and (min-resolution: 315dpi) and (max-resolution: 357dpi) {.fntsize{font-size: 50px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 60px;}
}

/*  4x */
@media only screen and (min-resolution: 360dpi) and (max-resolution: 408dpi) {.fntsize{font-size: 54px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 64px;}
}

/*  4.5x */
@media only screen and (min-resolution: 405dpi) and (max-resolution: 459dpi) {.fntsize{font-size: 60px;}
.tagch:checked + label { color: rgb(255, 255, 255);  font-weight: bold;  font-size: 70px;}
}