* {
  outline: 0;
  margin: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

a,a:link,a:visited,.a:hover,.a:focus,a:active {
  color: inherit;
  text-decoration: none;
}

body {
  background: var(--b);
  --b: #fff;
  background-size: cover;
  background-position: center;
}

.first {
  font-family: 'Yantramanav';
  --p: #df001d;
  --g: 32px;
  --gs: 2.73438em;
  --extra: 1;
  background-size: cover;
  background-position: center;
  
  overflow-x: hidden;
  overflow-y: hidden
}

.content {
  margin: 0 auto;
  /* min-height: calc(200vh + calc(1rem * calc(var(--extra) * var(--g)))); */
  width: 100%;
  max-width: calc(1px * var(--mw));
  position: relative;
  font-size: min(16px, 16 * (100vw / var(--mw)));
  min-height: 100vh;
}

.element:hover {
  cursor: auto
}

.element[data-type=text] * {
  -webkit-user-drag: auto;
  -khtml-user-drag: auto;
  -moz-user-drag: auto;
  -o-user-drag: auto;
  user-drag: auto;
  -khtml-user-select: auto;
  -o-user-select: auto;
  -moz-user-select: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

.element {
  transition: transform 0.3s ease
}

.content a .element:hover,.element[data-scrollto]:hover {
  transform: rotate(calc(1deg*var(--r))) scale(calc(var(--s) * 1.05));
  cursor: pointer
}

.content a .element:hover button {
  cursor: pointer
}

.element:not([data-type=wordart]) p {
  -webkit-transform: translate3d(0,0,0)
}

.branding {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.4));
  background: #df001d;
  z-index: 9999999999999999;
  transition: all 0.3s ease;
  transform: none
}

.branding img {
  height: 40px;
  width: 40px;
  margin-bottom: 0;
  padding: 2px
}

.brandingContent {
  display: none
}

.brandingContent p {
  margin: 0;
  font-family: 'Yantramanav';
  color: #fff;
  font-size: 16px;
  padding: 0 8px
}

.branding:hover {
  transform: scale(1.1);
  cursor: pointer
}

@media(min-width: 5px) {
  .brandingContent {
      display:block !important
  }
}

.inst {
  --scaler: 1.2
}

.inst.fb {
  --scaler: 1.15
}

.inst .element[data-type=text] .el_content, .inst .element[data-type=icon] .el_content, .inst .element[data-type=button] button {
  font-size: calc(1em * calc(var(--ts) / var(--scaler)));
}

.element[data-type=embed] iframe {
  pointer-events: all
}

.element[data-type=image]:not([data-link]):not([data-scrollto]),.element[data-type=icon]:not([data-link]):not([data-scrollto]),.element[data-type=shape]:not([data-link]):not([data-scrollto]) {
  pointer-events: none
}

.element[data-type=text]:not([data-link]):not([data-scrollable]):not([data-scrollto]) {
  pointer-events: none
}

.element[data-type=text]:not([data-link]):not([data-scrollto]) * {
  pointer-events: all
}

.element[data-type=icon][data-link] {
  pointer-events: none
}

.element[data-type=icon][data-link] i {
  pointer-events: all
}

.element[data-type=paint] {
  pointer-events: none
}

.element[data-type=paint] g {
  pointer-events: all
}

/*	GIMMICKS	*/
.element[data-type=gimmick-canvas] {
  border: 0.15em solid var(--co);
  --co: #df001d;
  --ts: 1;
  border-radius: 5px;
  transform: rotate(calc(1deg*var(--r)))
}

.element[data-type=gimmick-canvas] .innerCanvas {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column
}

.element[data-type=gimmick-canvas] .toolbox {
  margin: 0 0 0 auto;
  background: #fff;
  padding: 0.4em 0.6em;
  color: var(--co);
  display: inline-flex;
  font-size: calc(1em * var(--ts));
  position: absolute;
  top: -0em;
  left: 50%;
  transform: translate(-50%,-100%);
  border: 0.15em solid var(--co);
  border-radius: calc(5px / 2);
  align-items: center;
  max-width: 100%
}

.element[data-type=gimmick-canvas] .toolbox i {
  padding: 0 0.4em;
  font-size: 1.1em;
}

.element[data-type=gimmick-canvas] .picasso {
  background: #fff;
  flex: 1;
  border-radius: calc(5px / 2);
  overflow: hidden;
  position: relative
}

.element[data-type=gimmick-canvas] .picasso canvas {
  height: 100%;
  width: 100%
}

.element[data-type=gimmick-canvas] .sendPicasso {
  padding: 0em;
}

.element[data-type=gimmick-canvas] .sendPicasso button {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: var(--co);
  text-align: center;
  border: 0;
  border-top: 0.15em solid var(--co);
  width: 100%;
  padding: 0.5em 0.2em;
  font-family: 'Yantramanav';
  font-size: 1.1em;
  border-bottom-left-radius: calc(5px / 2);
  border-bottom-right-radius: calc(5px / 2);
  transition: all 0.3s ease
}

.element[data-type=gimmick-canvas] .sendPicasso button:hover {
  background: var(--co);
  color: #fff;
  cursor: pointer
}

.element[data-type=gimmick-ama] .askerSend button:hover {
  background: var(--co);
  color: #fff;
  cursor: pointer
}

.element[data-type=gimmick-ama] .askExtra {
  position: relative;
  transition: all 0.3s ease
}

.element[data-type=gimmick-ama] .askExtra img {
  height: 1.875em;
  width: 1.875em;
  position: absolute;
  left: calc(50% - 4px);
  top: 50%;
  transform: translate(-50%,-50%);
  object-fit: cover;
  object-position: center
}

.element[data-type=gimmick-ama] .askExtra:hover {
  opacity: 0.5;
  cursor: pointer
}

.element[data-type=gimmick-canvas] .canvCol {
  height: 1.1em;
  width: 1.1em;
  border-radius: 50%;
  margin: 0 0.4em;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
}

.element[data-type=gimmick-canvas] [type=color] {
  visibility: hidden;
  position: absolute;
}

.canvSizing {
  display: flex;
  align-items: center
}

.element[data-type=gimmick-canvas] [type=range] {
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  width: 3em;
  background: var(--co);
  border-radius: 40px;
  border: 1px solid var(--co);
  background: 0;
  margin: 0 0.5rem
}

.element[data-type=gimmick-canvas] [type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--co);
  height: 15px;
  width: 15px;
  border: 2px solid var(--co);
  border-radius: 40px
}

.element[data-type=gimmick-canvas].doneArt,.element[data-type=gimmick-ama].doneArt {
  pointer-events: none;
}

.jfr .element, .jfr .element * {
  pointer-events: all !important
}

@media(max-width: 385px) {
  .element[data-type=gimmick-canvas] [type=range]::-webkit-slider-thumb {
      height: 12px;
      width: 12px;
  }
}

.element[data-type=image] img {
  width: calc(100% * var(--s));
  height: calc(100% * var(--s));
  transform: scale(calc(1 / var(--s))) translateZ(0);
}

@-moz-document url-prefix() {
  .element[data-type=image] img {
      min-height: calc(100% * var(--s));
      min-width: calc(100% * var(--s));
  }
}

.element[data-type=majorityvote] .innerTalking p:not(.activeTalk) {
  display: none
}

.element[data-type=majorityvote] .innerTalking:hover {
  cursor: pointer
}

.element.disableTmp {
  pointer-events: none
}

.completionCasso {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--co);
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  display: flex;
  transition: opacity 0.3s ease
}

.completionCasso button {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: var(--co);
  border: 1px solid #fff;
  font-family: 'Yantramanav';
  font-size: 1em;
  padding: 0.3em 0.8em;
  transition: all 0.3s ease
}

.completionCasso button:hover {
  transform: scale(1.1);
  cursor: pointer
}

.element[data-type=gimmick-canvas].doneArt .completionCasso {
  pointer-events: all;
  opacity: 1;
}

.element[data-sound] {
  pointer-events: all !important
}

.element[data-sound]:hover {
  cursor: pointer
}

.element[data-type=spotify]:hover .imgWrap i {
  transform: translate(-50%,-50%) scale(1.1)
}

.cursorMode .cursorReal {
  background-image: var(--cu);
  height: 32px;
  width: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 999999999999999999999;
  pointer-events: none;
}

.cursorMode,.cursorMode * {
  cursor: none !important
}

.spotSearch {
  background: #18181b;
  max-height: 270px;
  position: fixed;
  bottom: -120vh;
  left: 0;
  right: 0;
  max-width: 420px;
  margin: 0 auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 15px;
  height: 100%;
  opacity: 0;
  transition: bottom 0.3s ease
}

.spotSearch.bringUp {
  bottom: 0;
  opacity: 1;
}

.spotSearch .closer {
  background: #000;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-100%);
  color: #fff;
  height: 30px;
  width: 40px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.spotSearch .closer:hover {
  opacity: 0.8;
  cursor: pointer
}

.innerSpotSearch {
  overflow-y: scroll;
  height: 100%
}

.searchWrap {
  position: sticky;
  top: 0px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  color: #8d8d8f;
  background: #27272a;
  border-radius: 40px;
  overflow: hidden
}

.searchWrap input {
  background: #27272a;
  width: 100%;
  font-family: 'Yantramanav';
  padding: 8px 8px;
  border: 0;
  font-size: 14px;
  color: #fff
}

.searchWrap input::placeholder {
  color: #8d8d8f
}

.searchWrap i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 14px;
  font-size: 13px;
}

.spotResults {
  padding: 20px 0;
  display: grid;
  grid-gap: 10px
}

.spotItem {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 20px;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.3s ease
}

.spotItem:hover {
  background: rgba(255,255,255,0.05);
  cursor: pointer
}

.spotItem img {
  height: 30px;
  width: 30px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.spotMeta {
  color: #cfcfd3;
  display: grid;
  grid-gap: 4px;
}

.spotMeta h5 {
  font-size: 13px;
  color: #fff
}

.spotMeta p {
  font-size: 13px;
}

.spotMeta i {
  font-size: 12px;
  padding-right: 4px
}

.spotActions {
  display: flex;
  align-items: center
}

.spotActions i {
  padding: 4px;
  font-size: 13px;
}

.followingDon {
  transition: all 0.3s ease
}

.followingDon:hover {
  opacity: 0.5;
  cursor: pointer
}

.element[data-type=windowsplayer] input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  font-size: 1em
}

.element[data-type=windowsplayer] input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: .25em;
  background: #9b9a99;
  border-radius: 6.25em;
  box-shadow: inset .0625em .0625em #000, inset -.0625em -.0625em #9b9a99;
}

.element[data-type=windowsplayer] input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: .625em;
  height: 1em;
  background: #9b9a99;
  box-shadow: inset .0625em .0625em #9b9a99, inset -.0625em -.0625em #000, inset .125em .125em #9b9a99, inset -.125em -.125em #000;
  margin-top: -.375em;
  position: relative;
  z-index: 1;
}

.memeInp {
  justify-content: flex-end
}

.ff .element[data-type=image] img {
  background-color: transparent
}