:root {
  --a: path("M30 18 c-2,-5 -3,-9 -8,-9.5 c0,0 -3,1 -6,4 c-3,2.5 10,9 15,10 c3,1 -1,-5 1.5,-17 c0,0 -1,-1.5 -2,-1.5 c0,0 -5,2 -9.8,5 c2,2 2,-1 9.5,-4 c0,0 -1,3 .5,16 c0,0 -14,-6 -12,-9 c0,0 6,-7 12,10 m0 0 c0,0 0,0 0,0 q0,0 0,0 c0,0 0,0 0,0 c0,0 0,0 0,0 c0,0 0,0 0,0 c0,0 0,0 0,0 c0,0 0,0 0,0 m0 0 a0 0 0 0 0 0 0 a0 0 0 0 0 0 0 m0 0 a0 0 0 0 0 0 0 a 0 0 0 0 0 0 0 m0 0 q0,0 0,0 q0,0 0,0 m0 0 c0,0 0,0 0,0 c0,0 0,0 0,0 q0,0 0,0 m0 0 a1 1 0 0 0 1 0 a1 1 0 0 0 0 0");
  --b: path("M20 18 c2,-5 3,-9 8,-9.5 c0,0 3,1 6,4 c3,2.5 -10,9 -15,10 c-3,1 1,-5 -1.5,-17 c0,0 1,-1.5 2,-1.5 c0,0 5,2 9.8,5 c-2,2 -2,-1 -9.5,-4 c0,0 1,3 -.5,16 c0,0 14,-6 12,-9 c0,0 -6,-7 -12,10 m0 -6.5 c0,0 0,2 0,3 q0,-.5 0,-3 c0,5 0,5 0,-7 c0,-10 0,14 0,14 c0,-3 0,-18 0,-11 c0,8 0,8 0,1 c0,-8 0,3 0,4 m0 6 a0 0 0 0 0 0 0 a0 0 0 0 0 0 0 m0 -1.5 a 0 0 0 0 0 0 0 a 0 0 0 0 0 0 0 m0 -16 q0,2 0,1 q0,3 0,.5 m0 3 c0,9 0,11 0,0 c0,12 0,15 0,-3 q0,-1 0,3 m0 12 a0 0 0 0 0 0 0 a0 0 0 0 0 0 0");
  --c: path("M25 18 c2,-5 3,-9 8,-9.5 c0,0 3,1 6,4 c3,2.5 -10,9 -15,10 c-3,1 1,-5 -1.5,-17 c0,0 1,-1.5 2,-1.5 c0,0 5,2 9.8,5 c-2,2 -2,-1 -9.5,-4 c0,0 1,3 -.5,16 c0,0 14,-6 12,-9 c0,0 -6,-7 -12,10 m0 -6.5 c0,0 0,2 0,3 q0,-.5 0,-3 c0,5 0,5 0,-7 c0,-10 0,14 0,14 c0,-3 0,-18 0,-11 c0,8 0,8 0,1 c0,-8 0,3 0,4 m0 6 a0 0 0 0 0 0 0 a0 0 0 0 0 0 0 m0 -1.5 a 0 0 0 0 0 0 0 a 0 0 0 0 0 0 0 m0 -16 q0,2 0,1 q0,3 0,.5 m0 7 c0,9 0,11 0,0 c0,10 0,15 0,-3 q0,-1 0,3 m0 9 a0 0 0 0 0 0 0 a0 0 0 0 0 0 0");
  --d: path("M33.5 18 c2,-5 3,-9 8,-9.5 c0,0 3,1 6,4 c3,2.5 -10,9 -15,10 c-3,1 1,-5 -1.5,-17 c0,0 1,-1.5 2,-1.5 c0,0 5,2 9.8,5 c-2,2 -2,-1 -9.5,-4 c0,0 1,3 -.5,16 c0,0 14,-6 12,-9 c0,0 -6,-7 -12,10 m-2.5 -2.5 c0,0 -.5,2 0,3 q-2,-.5 -3,-3 c-2,5 -10,5 -6,-7 c4,-10 6,16 -1,15 c5,-3 4,-18 1,-13 c-3,8 7,8 6,1 c4,-8 0,3 3,4 m-4 6 a1 1 0 0 0 1 2 a1 1 0 0 0 -1 -2 m2 -1.5 a 1 1 0 0 0 1 2 a 1 1 0 0 0 -1 -2 m.5 -16.5 q1,2 -1,1 q-.5,3 -1.2,.5 m-10 3 c5,9 -13,11 -14,0 c-6,12 22,15 15.5,-3 q-.1,-1 -1.5,3 m-6 12 a1 1 0 0 0 1 2 a1 1 0 0 0 -1 -2");
  
  --default: #c0bfbc;
  --dark: #6d6d6b;
  --active: #91908e;
  --light: #f0f0f0;
  --shiny: #a3a29g;
  
  --font-size: 12pt;
  --line-height; 13pt;
} .filter {filter: opacity(0.5) drop-shadow(0 0 0 var(--default));}

@font-face {
  font-family: katibeh;
  src: url('fonts/katibeh.ttf');
}
@font-face {
  font-family: dubai;
  src: url('fonts/Dubai-Regular.woff');
}

html {
  scroll-behavior: smooth;
}

@keyframes teyyuob {
  0%,10% {d:var(--a)}
  20% {d:var(--a);transform:scale(0.95)}
  30% {d:var(--a);transform:scale(1)}
  50% {d: var(--b)}
  60% {d: var(--c)}
  80%,90% {transform:scale(1); d:var(--d)}
}
svg.teyyuob path{d:var(--a)} svg.teyyuob path:hover {animation: 2.5s teyyuob linear;}

header {
  background: var(--default);
  color: white;
  height: 16pt;
  display: flex;
  flex-direction: row;
  justify-content: right;
  padding: 3pt 5pt;
  transition: .5s;
  overflow-x: hidden;
}

.circle, .loading {
  border-radius: 50%;
  transition: .5s all ease;
  position: relative;
}
.circle:not(img):not(svg), .loading:not(img):not(svg) {
  background: none center no-repeat;
  background-size: cover;
  width:0; height:0;
  padding: 1.5vw;
} .circle.fill {background-color:var(--default) !important;}
.loading:hover {transform:scale(1.1)}
.loading:after {
  content: '';
  position: absolute;
  top:-.5vw; left:-.5vw;
  padding: 50%;
  background: none;
  border: solid rgb(160,233,0);
  -webkit-mask-image:
    linear-gradient(30deg, red 45% 50%, #0000 50%),
    linear-gradient(4deg, #0000 50%, red 50% 65%, #0000 65%),
    linear-gradient(-38deg, #0000 33%, red 33% 50%, #0000 50%),
    linear-gradient(300deg, #0000 50%, red 50%),
    radial-gradient(50% 50% at center, #0000 70%, #0002);
  border-width: .5vw;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 80%;
  animation: rotate 1.8s linear infinite;
}
@keyframes rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.s:not(img) {padding:50px}
img.s {width:100px; height:100px}
.xs:not(img) {padding:1rem}
img.xs {width:2rem; height:2rem}
input.circle, button.circle, button .circle, .btn.circle, .btn .circle, a.circle, a .circle, label.circle, label .circle
{box-shadow: 0 0 .3rem var(--dark)}

#news {
    top: 100px; 
    bottom: 100px; 
    border-radius: 20px;
    z-index: 10000;
}

.goback, .goback ~ div>.cS {margin-top: 10rem;}
.goback, .goback ~ * {
  opacity: 0;
  transition: .5s;
}

* {
  max-width: 100vw;
  text-align: center;
  font-family: dubai, katibeh, Arial;
  font-size: var(--font-size);
  line-height: var(--line-height);
  outline: 0;
}
*[hidden] {display:none}
* img, * video {max-width:100%;}

/* hide scrollbar */
*::-webkit-scrollbar {width:0; height:0}
/* style scrollbar */
body::-webkit-scrollbar {width: .8rem;}
body::-webkit-scrollbar-track {
  background: var(--default);
}
body::-webkit-scrollbar-thumb {
  background: white;
  border: .01px solid lightgoldenrodyellow;
  border-radius: 5px;
  box-shadow: 0 0 .3rem var(--dark);
}
.miniscb:hover::-webkit-scrollbar {
    width: .5vw;
    height: .5vw;
}
.miniscb::-webkit-scrollbar-track {
  display: none;
}
.miniscb::-webkit-scrollbar-thumb {
  background: var(--default);
  border: .01px solid var(--default);
  border-radius: 5px;
  box-shadow: 0 0 .3rem lightgoldenrodyellow;
}
/* ////// */

/* style title */
[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[data-title]:after {
  content: attr(data-title);
  position: absolute;
  bottom: -1em;
  left: 100%;
  padding: 4px 4px 4px 8px;
  color: var(--default);
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px var(--default);
  -webkit-box-shadow: 0px 0px 4px var(--default);
  box-shadow: 0px 0px 4px var(--default);
  background-image: -moz-linear-gradient(top, #fff, #fff);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #fff));
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: -moz-linear-gradient(top, #fff, #fff);
  background-image: -ms-linear-gradient(top, #fff, #fff);
  background-image: -o-linear-gradient(top, #fff, #fff);
  opacity: 0;
  z-index: 999999;
  visibility: hidden;
}
[data-title] {
  position: relative;
}
/* ////// */

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  padding-bottom: 1rem;
}

body:not(#registerbody) h1,h2,h3,h4,h5,h6 {color: var(--shiny);}

.nobg {background: none !important}

input, textarea, *[contenteditable='true'] {
  border: none;
  border-radius: 10px;
  margin: 5px auto;
}

input.correct, input.wrong {animation:cutemove 1s ease; width:0}
input.correct:after {content: '✔'}
input.wrong:after {content: '❌'}

.inputlist {width: 50pt;}

select {
  border: none;
  border-radius: 10px;
  width: 50pt;
}
option:checked { 
  display:none;
}
option:hover { 
  background-color: var(--light);
}

*:hover, *:active, *:focus {
  -webkit-tap-highlight-color: transparent;
  outline-style: none;
}

a {
  color: var(--dark);
  text-decoration: none;
}
a:hover, .atext:hover {
  color: var(--active);
  cursor: pointer;
}

.tbbtn:active, #comsec button:active {mix-blend-mode: overlay !important;}
.btn {padding:0 3px}
button, .btn {
  background-color: var(--default);
  border: none;
  border-radius: 10px;
  color: white;
  transition: .5s all ease;
}
button:hover, .btn:hover, .circle:hover {cursor: pointer;}
button:active, button:disabled, .btn:active, .btn:disabled, .circle:active {
  background-color: var(--active);
  transform: scale(.9);
}
.cnclbtn {
  background-color: indianred !important;
}

input[type="radio"], input[type="checkbox"], #com, #showsuggsimg:hover {
  filter: grayscale(100%);
}

progress {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 0;
  width: 100%;
  height: .8vh;
}
progress::-webkit-progress-value {
  background-color: var(--default);
  opacity: 75%;
  transition-duration: 1s;
}

video:not(#acvid) {
  background: black url('imgs/loading.gif') center no-repeat;
  background-size: 30%;
  min-width: 35vw;
}

#logomain {margin-top:25vh}

#registerbody {
  background-color: var(--default);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -10vh;
  padding: 0 12vw 3rem 12vw;
}
#registerbody.long {margin-top: 0;}

#registerbody header {position: fixed !important;}

#registerbody>form, #registerbody *:not(header):not(footer) form {
  border-radius: 20px;
  background-color: rgba(0, 0, 0, .1);
  overflow: auto;
  padding: 5px;
  margin: 3vw;
  transition: 1s all ease
}

#registerbody *:not(header):not(footer) button {
  background-color: white;
  color: var(--default);
  margin: 5px;
  transition: .5s all ease;
}
#registerbody *:not(header):not(footer) button:hover {
  mix-blend-mode: screen;
}
#registerbody form textarea {width:100%}

#forgotpswd { 
  position: absolute;
  margin-right: -1rem;
  opacity: 5%;}
#forgotpswd:hover {
  opacity: 50%;
  transition: 1s opacity ease;}

#Sbox {
  padding: 1pt 0;
  margin: 0;
  width: 70%;
  height: 20pt;
  font-size: 15pt;
  border: 1.8px solid var(--default);
  border-radius: 6vw;
  color: var(--dark);
  transition: .5s width ease;
}
#Sbtn {
  width: 19pt;
  height: 19pt;
  position: relative;
  margin: auto;
  top: -20pt;
  left: calc(70%/-2 + 10pt);
}
#Sbox:focus {width: 80vw;}
#Sbox:focus ~ #Sbtn {left: calc(80%/-2 + 10pt);}

.vi {
  margin: 15vh 5vw;
  color: var(--dark);
  padding: 0;
}
.vi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 20vw;
  display: flex;
  justify-content: right;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  border-right: 1px solid var(--default);
  border-left: 1px solid var(--default);
}
.vi ul>* {margin: 5px; max-width: 36vw;}
.vi video {max-height: 17.5vw; margin-left: 2px;}
.vi .circle, .coms a.circle, .circle.s {width:10vw; height:10vw; max-width:5vh; max-height:5vh;}
.coms .circle, .circle.s {max-width:10vh; max-height:10vh}

.Sresults {margin-top: 3px;}
.Sresults>ul{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.Sresults>ul a{
  height: 21vw;
  overflow: hidden;
  display: grid;
  grid-template-columns: 3fr 5fr;
  grid-template-rows: 1fr 1fr 100%;
  grid-gap: 2px;
  height: auto;
  border-top: .5px solid var(--default);
  transition: 1s all ease;
}
.Sresults .result{margin: 0; text-align: right;}
.Sresults .result:first-child {
  grid-row-start: 1;
  grid-row-end: 4;
}
.Sresults>ul video {
  width: 100%;
  height: 21vw;
}
.Sresults>ul h4 {
  height: 12pt;
  min-height: 1vw;
  padding: 1vw 0;
}

.bbg {background:Linear-gradient(#0000, var(--default), var(--default));}
#uploadingbar {
  position: fixed; 
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#uploadingbar img, #uploadingbar svg {
  position: flex;
  width: 14vw; height: 14vw;
  max-width: 10vh; max-height: 10vh;
  border-radius: 50%;
  margin: 0 2vw;
  padding: 5px;
  padding-bottom: 0;
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}
#uploadingbar img:hover, #uploadingbar svg:hover {
  background-color: var(--default);
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

#upheader {
  min-height: 13vw;
  position: sticky;
}

#upinfos {
  color: grey;
  max-width: 80vw;
  overflow: scroll;
  margin-top: 10vw;
  transition: 1s margin-top ease;
}

#uploadsec1 {
  padding: 5vh 10vw;
}

#uploadsec2, #uploadsec3 {
  width: 80vw;
  margin: auto;
  padding-bottom: 1rem;
  display: none;
}
#upsecsbtns, #upbtn {
  display: none;
  margin: auto;
}

#uploadsec2 input, #uploadsec2 textarea {
  width: 100%;
  margin: auto;
}

.cS {
  background-color: white;
  position: fixed;
  z-index: 10000;
  left: 1vw;
  top: 1vw;
  width: 2.5rem;
  height: 2.5rem;
  border: 0 0 0 5px white;
  border-radius: 2.5rem;
  transition: .5s all ease;
  overflow: hidden;
}

.cS .cSicon {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 100%;
}
.cSicon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--default);
  border-radius: 50%;
  z-index: 1000;
  cursor: pointer;
}
.cSicon::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  border: 1px solid white;
  border-radius: 50%;
  transform: translate(-10%, -10%);
}
.cSicon::after {
  content: '';
  position: absolute;
  width: 5%;
  height: 25%;
  background-color: white;
  transform: translate(350%, 90%) rotate(-40deg);
}
.cS.active {
  width: 40vw;
  z-index: 1000000;
}
.cSinput {
  position: relative;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cSinput input {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}
.cSclear {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: .7rem;
  height: .7rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cSclear::before {
  position: absolute;
  content: '';
  width: 20%;
  height: 100%;
  background-color: grey;
  transform: rotate(45deg);
}
.cSclear::after {
  position: absolute;
  content: '';
  width: 20%;
  height: 100%;
  background-color: grey;
  transform: rotate(315deg);
}

.chcover {
  height: 15vh;
  background-size: cover !important;
  background: url('imgs/undersuggs.png') center no-repeat;
}

#channelName, #userName {
  position: fixed;
  width: 98%;
  font-size: calc(var(--font-size) + 5pt);
}

.channelvids video {
  margin-bottom: -.5vw;
  width: 99vw;
  /*height: 55.55vw;*/
  max-height: 90vh;
  border-radius: 1.8vw;
  transition: .5s all ease;
}
.channelvids .vTitle {
  font-size: 3vw;
  line-height: 5vw;
  position: absolute;
  margin-top: -7vw;
  right: 1vw;
  mix-blend-mode: luminosity;
  width: 98vw;
  white-space: nowrap;
  overflow: scroll;
}
.channelvids video:hover {
  transform: scale(1.01);
  border-radius: 0;
}

#chlivechat {
  width:97vw; 
  height:46vh; 
  top:9vh; 
  left:0; 
  border-radius:1rem;
  padding-bottom:15vh;
}

#vidbody {
  background: url('') center no-repeat;
  background-size: cover;
  height: 100vw;
}

#vidsec {
  position: relative;
  background-color: var(--default);
  z-index: 1;
}

#vidsec a:first-child {margin-right: 80vw;}
#logo {
  height: 14vw;
  mix-blend-mode: overlay;
}
#logo:hover, #logo:active {mix-blend-mode: screen;}

#topdeco {
  position: absolute;
  height: 0;
  top: 0;
  right: -18vw;
  padding: 7.17vw 20vw;
  background: url('imgs/play.png') 0 no-repeat;
  background-size: 30vw;
  /* background-position: 0;
  background-repeat: no-repeat; */
  mix-blend-mode: overlay;
}
#topdeco .circle {
  margin-top: -5.5vw;
  margin-left: -10vw;
  padding: 5vw;
}

#vidtitle {
  font-size: 4vw;
  font-weight: lighter;
  line-height: 5vw;
  position: absolute;
  max-width: 63vw;
  top: 4vw;
  right: 17vw;
  overflow: scroll;
  white-space: nowrap;
  color: white;
}
#vidtitle:hover {
  animation: text-flow 10s infinite linear 1s;
}

.Sresults ul, #vidsec, .suggs ul, #comsec ul, #ul, .channelvids ul, .zeros {
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

#acvid {height: 56vw; width: 100%; background-color: black;}
#book {
  position: absolute; 
  top: 0;
  width: 100vw; 
  right: 100vw; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-direction: row; 
  overflow: scroll;
  scroll-snap-type: both mandatory;
  text-align: center;
}
#book>* {min-width: 100vw; scroll-snap-align: start;}
#book img {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#book audio {
  display: flex;
  position: absolute;
  width: 100%;
  opacity: 50%;
}

/* video::-webkit-media-controls-enclosure {
  display: none !important;
} */
/* to do */
#flscdiv:fullscreen, #flscdiv:fullscreen video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
#flscdiv:fullscreen>img {
  top: auto;
  padding-top: 10%;
  background: none;
}
#flscdiv:fullscreen #vidtoolbar {
  background-color: var(--default);
  position: absolute;
  bottom: 1vw;
}
#flscdiv:fullscreen .vidprog {
  opacity: 50%;
  position: absolute;
  bottom: 0;
}

#playT, .onv {
  position: absolute;
  width: 100vw;
  height: 70%;
  top: 15vw;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
  transition: .5s transform ease;
} #playT:active {transform: scale(.9);}
#playT.pause, .onv {background: none !important;}

#vidtoolbar {
  width: 100%;
  height: 0vw;
  position: relative;
  overflow: hidden;
  transition: .5s height ease;
}
#acvid:hover ~ #vidtoolbar, .onv:hover ~ #vidtoolbar, #vidtoolbar:hover {height: 19pt;}

#vidtoolbar img{
  padding-top: 3px;
  padding-bottom: 0;
  background: none;
}
#mute {opacity: 50%}

.vidprog {
  height: 1vw;
  background-color: var(--dark);
  width: 0%;
}

#ratingsec {
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  border-bottom: 1px dotted rgba(60, 123, 0, .5);
} #ratingsec>svg {height:8vw; margin:2px}
#ratingsec span {
    font-size: 5pt;
    position: absolute;
    color: var(--default);
}

#starcheck, #comcheck, #reportcheck, #showsuggs { display: none }

#tstar {
  width: 0;
  margin-right: 0;
  overflow: hidden;
  transition: all 1s ease;
}
#tstar.active {
  width: 27vh;
  margin-right: -4vw;
  overflow: hidden;
  transition: all 1s ease;
}

#redrep {
  height: 8vw;
  position: absolute;
  left: 1vw; margin-top: -4vw;
}

#comsec {
  background-color: var(--default);
  position: absolute;
  width: 90%;
  right: 5%;
  top: 15vw;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1000;
}
#comsec ul {
  max-height: 50vw;
  overflow-y: scroll;
}
/* to correct scrollbar.. */
#ul, #vhlogo {
  display: flex;
  flex-direction: column-reverse;
}
#comment {
  width: 85vw;
  border: none;
  border-radius: 10px;
  margin: auto;
  margin-top: 1vw;
  padding: 0 3pt;
  opacity: 50%;
  text-align: right;
  transition: 1s all ease;
}
#comment:focus {
  border-radius: 0;
  opacity: 100%;
}
#comment:focus ~ *:not(button) {opacity: 50%;}

.coms {
  position: relative;
  width: 99%;
  padding: 1%;
  min-height: 9%;
  max-height: 15.5%;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: 1fr 85% 1fr;
  grid-template-rows: auto;
  background-color: rgba(500,500,500,.1);
  box-shadow:0 0 .3rem var(--default);
} .coms:hover {background:white}
.coms * {max-height:100%;}

.coms .comstxt {
  text-align: right;
  padding: 5px;
} .comm {
  text-align: right;
  white-space: pre-wrap;
}

.comDate {
  color: lightgoldenrodyellow;
  font-size: 5pt; 
  position: absolute; 
  left: 8pt; 
  bottom: 0;
}

.suggs {
  background-color: white;
  border-bottom: 1px dotted rgba(60, 123, 0, .5);
  display: none;
}

.suggs video {
  width: 30vw;
  height: 20vw;
  margin: 1px;
  margin-top: .9vw;
  border-radius: 5px;
  transition: .5s all ease;
}

#plul {
  background-color: var(--default);
}
.suggs video.playing {
  border-radius: 0;
  transform: scale(1.1);
}

.suggs video:hover {
  margin: 0;
  margin-top: .9vw;
  transform: scale(1.1);
}

video:hover ~ .vTitle {
  animation: text-flow 5s infinite linear;
}
@keyframes text-flow {
  from { text-indent: 0%; }
  50% { text-indent: -101%; }
  to { text-indent: 0%; }
}

.suggs>ul {
  min-height: 5rem;
  display: flex;
  flex-direction: row;
  justify-content: right;
  overflow: auto;
}

.suggs a {
  justify-content: space-around;
  margin-right: .7vw;
}

.vTitle {
  font-size: 12pt;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  justify-content: right;
  margin: auto;
}
.suggs .vTitle {
  font-size: 2vw;
  width: 30vw;
  line-height: 5vw;
}

#undersuggs {
  padding: 40vw 50vw;
  position: absolute;
  margin-top: 0;
  background: 
    radial-gradient(50% 51% at bottom, #0000 100%, var(--default) 100% 102%, #0000),
    radial-gradient(52% 53% at bottom, #0000 100%, var(--default) 100% 102%, white);
}

.widearrow {
    left: 40vw;
    transform: rotate(-45deg) rotate3d(1,1,0,40deg);
}
.widearrow, .widearrow::before, .widearrow::after {
    position: absolute;
    border-bottom: 1vw solid var(--default);
    border-left: 1vw solid var(--default);
    padding: 10vw;
    transition: .5s;
}
.widearrow::before, .widearrow::after {
    content: '';
    top: 0;
    right: 0;
}
.widearrow:hover::before {
    top: 1.1vw;
    right: 1.1vw;
    opacity: 50%;
}
.widearrow:hover::after {
    top: 2.2vw;
    right: 2.2vw;
    opacity: 20%;
}

#adlink {
  position: relative;
  width: 100%;
  height: 50vw;
  margin-top: -50vw;
  border-radius: 50% 50% 0 0;
  bottom: 1rem;
}

footer {
  position: absolute;
  margin: auto;
  opacity: 20%;
  height: 10vw !important;
  width: 10vw !important;
  right: 45vw;
  bottom: -10vw;
  border-radius: 50%;
  color: white;
  transition: .5s all ease;
  z-index: 0;
}
footer.active, footer:hover {
  opacity: 100%;
  bottom: 12px;
  z-index: 1000;
}
.foas {
  position: fixed; padding: 0; margin: 0; border: 0; outline: 0;
}
.foas>a {
  position: absolute;
  bottom: 6vw; right: 1.5vw;
  transform-origin: 50% 140%;
  padding: 1vw;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 10pt var(--default);
  border-radius: 50%;
  transition: 1s;
}
.foas>a:hover {
  transform-origin: 50% 141%;
  opacity: 100%; 
  color: var(--active);
}
.foas>a:active, .foas>a.active {
  bottom: 0 !important;
  transform: none !important;
  font-size: 20pt !important;
  color: var(--dark);
  background-color: var(--shiny) !important;
  z-index: 1000000 !important;
}

#hidback {
    z-index:3; 
    position:fixed; 
    width:100%; 
    height:90%;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 50px 0 black;
}
.edBox {
  width: 50vw;
  max-height: 80vh;
  padding: 5px;
  top: 5vh;
  left: 25vw;
  position: fixed;
  background: var(--light);
  box-shadow: 0 0 .3rem var(--default);
  overflow-y: scroll;
  transition: .5s all ease;
  z-index: 1000;
}
.edBox textarea, .edBox input:not([type='checkbox']):not([type='radio']) {
  width: 90%;
}
.edBox .circle{background-color: var(--active);}

.green-msg {
  color: greenyellow;
  position: fixed;
  width: 80vw; margin: 10vw; padding: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  transform: scaleY(0);
  transition: .5s all ease;
  z-index: 1000000;
}

.cutemove {animation: cutemove .5s infinite ease-in-out;}
@keyframes cutemove {
  from { transform: scale(0.5); }
  50% { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.stroke {fill: none;
  stroke: var(--default);
  stroke-linecap: round;
}
svg.fill {fill:var(--default) !important;}

/* .guide {
  position: relative;
  border: 1px solid var(--default);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--default);
  padding: 5px;
  border-radius: 10px 0 10px 10px;
  top: 50%;
  right: 50%;
  max-width: 25vw;
  text-align: center;
  z-index: 100000000000;
} */