@font-face {
  font-family: 'Namecat';
  src: url('https://files.strawcdn.com/fonts/nc.ttf');
}

@font-face {
  font-family: 'Skincake';
  src: url('https://files.strawcdn.com/fonts/sc.ttf');
}

@font-face {
  font-family: 'Spring Nature';
  src: url('https://files.strawcdn.com/fonts/sn.ttf');
}

@font-face {
  font-family: 'Darling Coffee';
  src: url('https://files.strawcdn.com/fonts/dc.ttf');
}

@font-face {
  font-family: 'Coffee Spark';
  src: url('https://files.strawcdn.com/fonts/cs.ttf');
}

@font-face {
  font-family: 'Help Me';
  src: url('https://files.strawcdn.com/fonts/hm.ttf');
}

.element {
	position: absolute;
	--x: 0;
	--y: 0;
	--w: 1;
	--y: 1;
	--s: 1;
	--r: 0;
	--ts: 1;
	--c: 0;
	--f: 'Yantramanav';
	--bos: 0;
	--bot: solid;
	--boc: #000;
	--op: 1;
	top: calc(calc(1rem * var(--g)) * var(--y));
	left: calc(calc(1rem * var(--g)) * var(--x));
	width: calc(calc(1rem * var(--g)) * var(--w));
	height: calc(calc(1rem * var(--g)) * var(--h));
	transform: rotate(calc(1deg * var(--r))) scale(var(--s));
	opacity: var(--op);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-family: var(--f);
	--bl: 0;
	filter: blur(calc(var(--bl) * 1px));
	border: calc(calc(1rem * var(--g)) * var(--bos)) var(--bot) var(--boc);
}

.element:hover {
	cursor: grab
}

.element[data-type=paint] {
	overflow: visible;
	transform: none;
	display: block
}

.element[data-type=paint] svg,#drawing svg,.gimmicking svg {
	overflow: visible;
	transform-origin: center;
	transform-origin: top left;
	--ns: 0;
	transform: scale(calc(1 - var(--ns)));
}

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

.element[data-type=paint] svg * {
	transform-box: fill-box;
	transform-origin: center;
}

.element[data-type=paint] svg g {
	transform: rotate(calc(1deg * var(--r))) scale(var(--s));
}

.element[data-type=image] {
  border: none;
  --fd: 100;
  filter: brightness(calc(1% * var(--fd))) blur(calc(var(--bl) * 1px));
  transform: rotate(calc(1deg*var(--r))) scale(var(--s));
}


.element[data-type=image] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	display: block;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none;
	-khtml-user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	border-radius: calc(1em * var(--c));
	border: calc(calc(1rem * var(--g)) * var(--bos)) var(--bot) var(--boc);
}

.element[data-type=image][data-mask] img {
	-webkit-mask-image: var(--m);
	-webkit-mask-size: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.element[data-image=contain] img {
	object-fit: contain;
}

.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=text] {
	text-align: var(--ta);
	min-height: calc(calc(1rem * var(--g)) * var(--h));
	height: auto;
	--ta: center;
	--co: #000000;
	--bc: rgba(0,0,0,0);
	--px: 0;
	--toc: rgba(0,0,0,0);
	--sb: #e8e8e8;
	--stb: #f0f0f0;
	--pb: 1;
	background: var(--bc);
	color: var(--co);
    border-radius: calc(1em * var(--c));
	padding-left: calc(1em * var(--px));
	padding-right: calc(1em * var(--px));
}

.element[data-type=text][data-scrollable=true] {
	min-height: auto;
	height: calc(calc(1rem * var(--g)) * var(--h));
	overflow-y: scroll;
	justify-content: flex-start
}

.element[data-type=text][data-scrollable=true]::-webkit-scrollbar {
	width: 1.4em;
	background-color: none;
}

.element[data-type=text][data-scrollable=true]::-webkit-scrollbar-thumb {
	background-color: var(--stb);
	border: 0.25em solid #FFF;
	border-radius: calc(1em * calc(var(--c) - var(--c) / 4));
}
.element[data-type=text][data-scrollable=true]::-webkit-scrollbar-track {
	background-color: var(--sb);
	border: 0.25em solid #FFF;
	border-right: 0.25em solid #F7F7F7;
	border-radius: calc(1em * calc(var(--c) - var(--c) / 4));
}

.element[data-type=blogcontent] {
	text-align: var(--ta);
	min-height: calc(calc(1rem * var(--g)) * var(--h));
	height: auto;
	--ta: left;
	--co: #000000;
	--co2: #000000;
	--bc: rgba(0,0,0,0);
	--px: 0;
	--toc: rgba(0,0,0,0);
	background: var(--bc);
	color: var(--co);
	border-radius: calc(1em * var(--c));
	padding-left: calc(1em * var(--px));
	padding-right: calc(1em * var(--px));
}


.element[data-type=text] .el_content,.element[data-type=icon] .el_content,.element[data-type=button] button,.element[data-type=blogcontent] .blog_content,.element[data-type=button2] button {
	font-size: calc(1em * var(--ts));
	width: 100%
}

.element[data-type=text] .el_content span {
	display: inline-block
}

.element[data-type=text] * {
	-webkit-font-smoothing: antialiased;
}

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

.element[data-type=text] .el_content>*,.element[data-type=text] .el_content .tiptap>* {
	padding-bottom: calc(1em * var(--pb));
	-webkit-text-stroke: 0.03125em var(--toc);
}

.element[data-type=text].borderTextLine .el_content > *  {
	border-bottom: calc(calc(1rem * var(--g)) * var(--bos)) var(--bot) var(--boc);
	padding: 0.5em 0;
}

.element[data-type=blogcontent] .blog_content>* {
	padding-bottom: 1rem;
}

.element[data-type=text] .el_content>*:last-child,.element[data-type=blogcontent] .blog_content>*:last-child,.element[data-type=text] .el_content .tiptap>*:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.element[data-type=text] .el_content .tiptap>* {
	user-select: text
}

.element[data-type=text].borderTextLine .el_content > *:last-child  {
	padding: 0.5em 0;
}


.element[data-type=embed] {
	min-height: calc(calc(1rem * var(--g)) * var(--h));
}

.element[data-type=embed] iframe {
	width: 100%;
	height: 100%;
	pointer-events: none
}

.element[data-type=embed] .emb {
	width: 100%;
	height: 100%;
}











.element[data-type=icon] {
	color: var(--co);
	--co: #000000;
  background: var(--bc);
  border-radius: calc(1em * var(--c));
}

.element[data-type=icon] .el_content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.element[data-type=button] {
	--c: 0.3;
	height: 100%;
	height: calc(calc(1rem * var(--g)) * var(--h));
	--bc: #333;
	--co: #fff;
	border: none
}

.element[data-type=button] button {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	background: var(--bc);
	color: var(--co);
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: calc(1em * var(--c));
    border: calc(calc(1rem * var(--g)) * var(--bos)) var(--bot) var(--boc);
	transition: opacity .3s ease;
	padding: 0;
}

.element[data-type=button] button span {
	max-width: 80%;
	width: 100%;
}

.element[data-type=shape] .innerShape {
	overflow: hidden;
  overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.element[data-type=shape] {
	--bc: #000000;
	--soc: rgba(0,0,0,0);
}

.element[data-type=shape] svg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    overflow: visible;
}

.element[data-type=shape] svg path {
	fill: var(--bc);
	stroke: var(--soc);
	stroke-width: calc(calc(1rem * var(--g)) * 1);
}

.element[data-type=shape] svg path[stroke-miterlimit],svg path[stroke-miterlimit] {
	stroke: var(--bc);
	fill: none;
	stroke-width: initial;
}

.element[data-type=eyes] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: calc(calc(1rem * var(--g)) * 0.1);
	--eyel: #3355ff
}

.element[data-type=eyes] .eyeball {
	background: #fff;
	box-shadow: 0 0 0 calc(calc(1rem * var(--g)) * 0.1) #000;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	display: grid;
	position: relative;
	overflow: hidden
}

.element[data-type=eyes] .eyeball span {
	position: relative;
}

.element[data-type=eyes] .eyeball span::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	transform: translateX(50%);
	margin: 15% 0;
	height: calc(100%/2);
	width: calc(100%/2);
	background: #000;
	border-radius: 50%
}

.element[data-type=eyes] .eyeball::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: var(--eyel);
	z-index: 999;
	border-bottom: calc(calc(1rem * var(--g)) * 0.1) solid #000
}

.element[style*="rgba(0,0,0,0)"] .eyeball::before {
	border-bottom: 0;
}

.element[data-fun-threed] {
	transform: rotate(calc(1deg * var(--r))) scale(var(--s)) perspective(400px) rotateX(45deg);
}



/*
	word art
*/

.element[data-type=wordart] {
	min-height: calc(calc(1rem * var(--g)) * var(--h));
	height: auto;
  pointer-events: none;
}

.element[data-type=wordart] p {
	font-size: calc(1em * var(--ts));
  pointer-events: all
}

.wordart {
	position: relative;
}

.wordart p {
	margin: 0 0 4px
}

.wordart[data-genre=one] {
  transform: scale(1.05, 1.25);
}
.wordart[data-genre=one] p {
  font-weight: 900;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 1px #000;
}
.wordart[data-genre=two] {
  transform: scaleY(1.65);
}
.wordart[data-genre=two] p {
  font-weight: 900;
  color: #000;
  transform: rotate(-3deg) skewY(-10deg);
}
.wordart[data-genre=three] {
  transform: scaleY(1.65);
}
.wordart[data-genre=three] p {
  font-style: italic;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 1px #000;
  text-shadow: 3px 2px 0 #999;
}
.wordart[data-genre=four] p {
  font-family: Times New Roman, serif;
  font-weight: 400;
  color: #336699;
  text-shadow: 2px 1px 0 #c1c1c1;
}
.wordart[data-genre=five] {
  transform: scaleY(1.25);
}
.wordart[data-genre=five] p {
  font-weight: 900;
  color: #d8d8d8;
  -webkit-text-fill-color: #d8d8d8;
  -webkit-text-stroke: 1px #3333cc;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=five] p::before {
  position: absolute;
  content: attr(data-content);
  color: #9999ff;
  -webkit-text-fill-color: #9999ff;
  -webkit-text-stroke: transparent;
  transform: translate(0.4vw, 0.25vw);
  mix-blend-mode: darken;
}
.wordart[data-genre=six] {
  transform: scaleX(0.85) translateZ(0);
}
.wordart[data-genre=six] p {
  font-weight: 900;
  color: transparent;
  background: linear-gradient(#adadad, #fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.25rem;
}
.wordart[data-genre=six] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.125em 0.125em #717171;
}
.wordart[data-genre=seven] {
  transform: scaleY(1.25);
}
.wordart[data-genre=seven] p {
  font-family: Impact, sans-serif;
  color: #0066cc;
  -webkit-text-fill-color: #0066cc;
  -webkit-text-stroke: 0.016em #99ccff;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=seven] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.094em 0.078em #990000;
}
.wordart[data-genre=eight] {
  transform: scaleY(1.25);
}
.wordart[data-genre=eight] p {
  font-family: Impact, sans-serif;
  color: transparent;
  background: radial-gradient(ellipse at center, #fff812, #ff9a32);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=eight] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.094em 0.063em #cdcdcd;
}
.wordart[data-genre=nine] {
  transform: scale(0.9, 1.65) rotate(-3deg) skewY(-3deg) translateZ(0);
}
.wordart[data-genre=nine] p {
  font-family: Impact, sans-serif;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(#6900cc, #cb00cc);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.016em #d2a2fe;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=nine] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  -webkit-text-stroke: transparent;
  text-shadow: 0.094em 0.063em #adadff;
}
.wordart[data-genre=ten] {
  transform: scale(0.85, 1.25);
}
.wordart[data-genre=ten] p {
  font-family: Times New Roman, serif;
  font-weight: 400;
  color: #1a4b28;
  -webkit-text-fill-color: #1a4b28;
  -webkit-text-stroke: 1.5px #008000;
}
.wordart[data-genre=ten] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  font-size: 10vmin;
  color: #d2e5dc;
  -webkit-text-fill-color: #d2e5dc;
  -webkit-text-stroke: transparent;
  transform: translate(-2.5vmin, -4vmin);
}
.wordart[data-genre=eleven] {
  transform: scaleY(1.65);
}
.wordart[data-genre=eleven] p {
  font-weight: 900;
  color: transparent;
  background: linear-gradient(to left, #a104ad, #0b2be0, #329941, #f7f658, #f16412, #e92153, #aa04a7);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.016em #eaeaea;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.05em;
}
.wordart[data-genre=eleven] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  color: #cdcdcd;
  -webkit-text-fill-color: #cdcdcd;
  -webkit-text-stroke: transparent;
  transform: rotateX(63deg) skew(60deg) scaleY(0.65) translate3d(2em, -2.15em, -1em);
}
.wordart[data-genre=twelve] p {
  font-family: Times New Roman, serif;
  font-weight: 400;
  color: transparent;
  background: linear-gradient(#999cfc, #1b999c);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=twelve] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.031em 0.031em #cdcdcd;
}
.wordart[data-genre=thirteen] {
  transform: scale(0.65, 1.65);
}
.wordart[data-genre=thirteen] p {
  font-weight: 900;
  color: #896640;
}
.wordart[data-genre=thirteen] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 1px 0 #1b0d00, 2px 0 #1b0d00, 3px 0 #1b0d00, 4px 0 #1b0d00, 5px 0 #1b0d00, 6px 0 #1b0d00, 7px 0 #1b0d00;
}
.wordart[data-genre=fourteen] {
  transform: scale(0.85, 1.3) translateZ(0);
}
.wordart[data-genre=fourteen] p {
  font-family: Times New Roman, serif;
  font-weight: 400;
  background: linear-gradient(#fffecb, #ff9999);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.1vw;
}
.wordart[data-genre=fourteen] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #002245, 0 -1px 0 #0050a0, -2px -1px 0.25px #002245, -1px -2px 0.25px #0050a0, -3px -2px 0.25px #002245, -2px -3px 0.25px #0050a0, -4px -3px 0.25px #002245, -3px -4px 0.25px #0050a0, -5px -4px 0px #002245, -4px -5px 0px #0050a0;
}
.wordart[data-genre=fifteen] {
  transform: perspective(200px) rotateX(30deg) scaleY(1.65);
}
.wordart[data-genre=fifteen] p {
  font-weight: 900;
  color: transparent;
  background: linear-gradient(#551700, #fecb00);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #b2b2b2;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.1vw;
}
.wordart[data-genre=fifteen] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  color: #ab8d56;
  -webkit-text-fill-color: #ab8d56;
  -webkit-text-stroke: transparent;
  transform: perspective(250px) translateY(-0.643em) rotateX(70deg) scale(1) translateZ(-1em);
}
.wordart[data-genre=sixteen] {
  transform: scale(0.8, 1.2);
}
.wordart[data-genre=sixteen] p {
  font-family: Impact, sans-serif;
  font-weight: 900;
  color: #33ccff;
  -webkit-text-stroke: 1.25px #000099;
  text-shadow: 0.35rem -0.35rem 0 #000099;
  letter-spacing: -0.15vw;
}
.wordart[data-genre=seventeen] {
  transform: scale(1.05, 1.25);
}
.wordart[data-genre=seventeen] p {
  font-weight: 900;
  color: transparent;
  background: repeating-linear-gradient(180deg, transparent, transparent 1px, #ffff00 1px, #ffff00 4px), repeating-linear-gradient(-50deg, #808080, #808080 5px, #ffff00 5px, #ffff00 8px);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #000;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=seventeen] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 3px 2px 0 #999;
}
.wordart[data-genre=eighteen] {
  transform: scaleY(1.5) translateZ(0);
}
.wordart[data-genre=eighteen] p {
  font-family: Times New Roman, serif;
  font-weight: 400;
  background: linear-gradient(#b6b6b6 0%, #5f5f5f 20%, #b1b1b1 30%, #fff 64%, #6c6c6c 65%, #373737 66%, #515151 67%, #787878 75%, #d2d2d2 80%, #d2d2d2 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=eighteen] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #4a4a4a, 0 -1px 0 #8b8b8b, -2px -1px 0.125px #4a4a4a, -1px -1px 0.125px #8b8b8b, -3px -2px 0.125px #4a4a4a, -2px -2px 0.125px #8b8b8b, -4px -3px 0.125px #4a4a4a, -3px -3px 0.125px #8b8b8b, -5px -4px 0.125px #4a4a4a, -4px -4px 0.125px #8b8b8b, -5px -5px 0 #4a4a4a, -5px -5px 0 #8b8b8b;
}
.wordart[data-genre=nineteen] {
  transform: scale(0.65, 1.75);
}
.wordart[data-genre=nineteen] p {
  font-weight: 900;
  color: #0f3a1a;
  transform: perspective(100px) rotateY(6deg) rotateZ(-7deg);
}
.wordart[data-genre=nineteen] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #000800, 0 -1px 0 #005600, -2px -1px 0.125px #000800, -1px -2px 0.125px #005600, -3px -2px 0.125px #000800, -2px -3px 0.125px #005600, -4px -3px 0.125px #000800, -3px -4px 0.125px #005600, -5px -4px 0.125px #000800, -4px -5px 0.125px #005600, -6px -5px 0.125px #000800, -5px -6px 0.125px #005600, -7px -6px 0 #000800;
}
.wordart[data-genre=twenty] {
  transform: perspective(100px) rotateY(6deg) rotateZ(-3deg) skewY(15deg) scale(0.8, 1.25);
}
.wordart[data-genre=twenty] p {
  font-family: Impact, sans-serif;
  color: transparent;
  background: linear-gradient(to left, #747474, #fff, #747474);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=twenty] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: -1px 0 0 #72745b, 0 1px 0 #2c2d23, -2px 1px 0.5px #72745b, -1px 2px 0.5px #2c2d23, -3px 2px 0.5px #72745b, -2px 3px 0.5px #2c2d23, -4px 3px 0.5px #72745b, -3px 4px 0.5px #2c2d23, -5px 4px 0.5px #72745b, -4px 5px 0.5px #2c2d23, -6px 5px 0.5px #72745b, -5px 6px 0.5px #2c2d23, -7px 6px 0.5px #72745b, -6px 7px 0.5px #2c2d23, -8px 7px 0.5px #72745b, -7px 8px 0.5px #2c2d23, -9px 8px 0.5px #72745b, -8px 9px 0.5px #2c2d23, -10px 9px 0.5px #72745b, -9px 10px 0.5px #2c2d23, -11px 10px 0.5px #72745b, -10px 11px 0.5px #2c2d23, -12px 11px 0.5px #72745b, -11px 12px 0.5px #2c2d23, -13px 12px 0.5px #72745b, -12px 13px 0.5px #2c2d23, -14px 13px 0.5px #72745b, -13px 14px 0.5px #2c2d23, -15px 14px 0.5px #72745b, -14px 15px 0.5px #2c2d23, -16px 15px 0.5px #72745b, -15px 16px 0.5px #2c2d23, -17px 16px 0.5px #72745b, -16px 17px 0.5px #2c2d23, -18px 17px 0 #72745b, -17px 18px 0 #2c2d23;
}
.wordart[data-genre=twentyone] {
  transform: scaleY(1.5) skewY(-8deg) rotateZ(-3deg) translateZ(0);
}
.wordart[data-genre=twentyone] p {
  font-family: Impact, sans-serif;
  color: transparent;
  background: linear-gradient(to bottom left, #fee601, #fee601 15%, #fe4201);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.wordart[data-genre=twentyone] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 1px 0 0 #813300, 0 1px 0 #c14d00, 2px 1px 0.35px #813300, 1px 2px 0.35px #c14d00, 3px 2px 0.35px #813300, 2px 3px 0.35px #c14d00, 4px 3px 0.35px #813300, 3px 4px 0.35px #c14d00, 5px 4px 0.35px #813300, 4px 5px 0.35px #c14d00, 6px 5px 0.35px #813300, 5px 6px 0.35px #c14d00, 7px 6px 0.35px #813300, 6px 7px 0.35px #c14d00;
}
.wordart[data-genre=twentytwo] {
  transform: scale(0.75, 1.65) translateZ(0);
}
.wordart[data-genre=twentytwo] p {
  font-weight: 900;
  background: linear-gradient(#ccdfec 0%, #7a97bc 20%, #8aacc6 30%, #fff 50%, #b8908f 51%, #80302d 52%, #b84d4a 55%, #e7cfc9 75%, #916e66 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.2vw;
}
.wordart[data-genre=twentytwo] p::before {
  position: absolute;
  content: attr(data-content);
  z-index: -1;
  text-shadow: 0.03125em 0 0 #000, 0 0.03125em 0.03125em #a1a1a1, 0.0625em 0.03125em 0.03125em #000, 0.03125em 0.0625em 0.03125em #a1a1a1, 0.09375em 0.0625em 0.03125em #000, 0.0625em 0.09375em 0.03125em #a1a1a1, 0.125em 0.09375em 0.03125em #000, 0.09375em 0.125em 0.03125em #a1a1a1, 0.15625em 0.125em 0.03125em #000, 0.125em 0.15625em 0.03125em #a1a1a1, 0.1875em 0.15625em 0.03125em #000, 0.15625em 0.1875em 0.03125em #a1a1a1, 0.21875em 0.1875em 0.03125em #000, 0.1875em 0.21875em 0.03125em #a1a1a1, 0.25em 0.21875em 0.03125em #000, 0.21875em 0.25em 0.03125em #a1a1a1, 0.28125em 0.25em 0.03125em #000, 0.25em 0.28125em 0.03125em #a1a1a1, 0.3125em 0.28125em 0 #000
}







/*

MARQUEE

*/

.element[data-fun-markoui],.marquee {
  overflow: hidden;
  display: block;
}

.element[data-fun-markoui]::before,.marquee::before {
	display: block;
	  white-space: pre;
	  content: attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text) "        " attr(data-fun-text);
	  width: fit-content;
	  transform: translate3d(-2%, 0, 0);
	  will-change: transform;
  	font-size: calc(1em * var(--ts));
}

@media (prefers-reduced-motion: no-preference) {
	.element[data-fun-markoui=normal]::before,.marquee::before {
		animation: marquee 6s linear infinite;
	}
	
	.element[data-fun-markoui=opposite]::before {
		animation: marquee 6s linear infinite;
		animation-direction: reverse;
	}
  
	.element[data-fun-spinner] {
		animation: spinner 10s linear infinite;
	}
	.element[data-fun-spinner=opposite] {
		animation: spinneropposite 10s linear infinite;
	}
}

@keyframes marquee {
	0% {
		transform: translate3d(-2%, 0, 0);
	}
	100% {
		transform: translate3d(calc(-2% - 5% - 1px), 0, 0);
	}
}

@keyframes coolblink {
	0% {
		opacity: 1
	}
	50% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

@keyframes spinner {
	100% {
		transform: rotate(360deg) scale(var(--s));
	}
}

@keyframes spinneropposite {
	100% {
		transform: rotate(-360deg) scale(var(--s));
	}
}

@keyframes shaker {
  0% {
	-webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
	-webkit-transform: translate(-1px, -2px) rotate(-2deg);
  }
  20% {
	-webkit-transform: translate(-3px, 0px) rotate(3deg);
  }
  30% {
	-webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
	-webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
	-webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
	-webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
	-webkit-transform: translate(2px, 1px) rotate(-2deg);
  }
  80% {
	-webkit-transform: translate(-1px, -1px) rotate(4deg);
  }
  90% {
	-webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
	-webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.element[data-fun-markoui],.marquee {
  margin: 0;
  display: flex;
  align-items: center;
  flex: 1;
  pointer-events: all;
}

.element[data-fun-markoui] .el_content,.marquee p {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.element[data-fun-coolblink] {
	animation: coolblink .7s ease-in-out infinite
}

.element[data-fun-shaker] {
	animation: shaker .7s ease-in-out infinite
}

/*

	GIMMICKS

*/

.element[data-type=gimmick-canvas] {
	border: 0.15em solid var(--co);
	--co: #df001d;
	--ts: 1;
	border-radius: 5px;
}

.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
}

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

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

.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)
}

.element[data-type=gimmick-canvas] .canvCol {
	height: 1em;
	width: 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%);
}




/*

  BLOG STUFF

*/

.element[data-type=blog] {
	--ts: 1.2;
	--co: #111;
	--co2: #000;
	--c: 0.8;
	--sb: #e8e8e8;
	--stb: #f0f0f0;
	--ta: left;
	--pb: #fafafa;
	height: calc(calc(1rem * var(--g)) * var(--h));
	background: var(--bc);
	color: var(--co);
	border-radius: calc(1em * var(--c))
}

.element[data-type=blog] .innerBlog {
	overflow-y: auto;
	padding: 0.625em;
	width: 100%;
	display: grid;
	grid-gap: 0.625em;	
	height: 100%
}

.element[data-type=blog]:not(.nobar) .innerBlog::-webkit-scrollbar {
	width: 1.4em;
	background-color: none;
}

.element[data-type=blog]:not(.nobar) .innerBlog::-webkit-scrollbar-thumb {
	background-color: var(--stb);
	border: 0.25em solid #FFF;
	border-radius: calc(1em * calc(var(--c) - var(--c) / 4));
}
.element[data-type=blog]:not(.nobar) .innerBlog::-webkit-scrollbar-track {
	background-color: var(--sb);
	border: 0.25em solid #FFF;
	border-right: 0.25em solid #F7F7F7;
	border-radius: calc(1em * calc(var(--c) - var(--c) / 4));
}

.element[data-type=blog] .innerBlog .post {

}

.element[data-type=blog] .innerBlog .post:last-child {
	margin-bottom: 0px
}

.element[data-type=blog] .innerBlog .innerPost{
	text-align: var(--ta);
	padding: 0.9375em;
	background: var(--pb);
	border-radius: 0.625em;
}

.element[data-type=blog] .innerBlog .innerPost > * {
	margin-bottom: 0.4em;
}

.element[data-type=blog] .innerBlog .innerPost > p {
	margin-bottom: 0.6em;
}

.element[data-type=blog] .innerBlog .innerPost h2 {
	font-size: calc(0.9em * var(--ts));
	color: var(--co2)
}

.element[data-type=blog] .innerBlog .innerPost > p {
	font-size: calc(0.75em * var(--ts));
}

.element[data-type=blog] .innerBlog .innerPost > img {
	width: 100%
}

.element[data-type=blog] .innerBlog .meta {
	font-size: calc(0.7em * var(--ts));
	color: var(--co2);
	margin-bottom: 0;
	margin-top: 0.8em
}

.element[data-type=blog] .innerBlog .directions {
	display: grid;
	grid-template-columns: auto 1fr auto;
	margin-bottom: 0.5em;
}

.element[data-type=blog] .innerBlog .directions i {
	padding: 0.4em 1em;
	background: #fafafa;
	border-radius: 40px;
	font-size: calc(0.75em * var(--ts));
	color: var(--co2)
}

.element[data-type=blog] .innerBlog .innerTags {
	display: flex;
	flex-wrap: wrap;
	word-break: break-all
}

.element[data-type=blog] .innerBlog .innerTags p {
	padding: 0.125em 0.5em 0.125em 0;
	font-size: calc(0.65em * var(--ts));
	color: var(--co2);
}

.element[data-type=blog][data-hide-tags] .innerBlog .innerTags {
	display: none
}

.element[data-type=blog][data-hide-date] .innerPost .meta {
	display: none
}

.element[data-type=blog][data-hide-preview] .innerPost > *:not(div):not(:first-child) {
	display: none
}

/*
	
	END BLOG
	
*/

.element[data-type=gimmick-ama] {
	--co: #df001d;
	border: 0.14em solid var(--co);
	border-radius: 0.3em;
	height: auto
}

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

.element[data-type=gimmick-ama] .asker {
	color: var(--co);
	padding: 0em 0.75em;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 0.15em;
}

.element[data-type=gimmick-ama] .asker input {
	padding: 0.7em 0
}

.element[data-type=gimmick-ama] .asker .askExtra {
	padding: 0.7em 0
}

.element[data-type=gimmick-ama] .asker input,.element[data-type=gimmick-ama] .asker p {
	width: 100%;
	font-size: 1em;
	border: 0;
	color: var(--co);
	font-family: 'Yantramanav';
	padding: .7em 0;
}

.element[data-type=gimmick-ama] .asker input::placeholder {
	color: var(--co);
}

.element[data-type=gimmick-ama] .asker span {
	padding-left: 8px;
	display: none
}

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

.element[data-type=gimmick-ama] .askExtra {
	display: flex
}

.element[data-type=markdown] {
	min-height: calc(calc(1rem * var(--g)) * var(--h));
	height: auto;
	--co: #000;
	color: var(--co);
}

.element[data-type=markdown] .innerMark {
	width: 100%;
	word-break: break-word;
	word-wrap: break-word;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

.element[data-type=markdown] .innerMark img {
	max-width: 100%;
	vertical-align: middle;
}

.element[data-type=markdown] .innerMark span.align-center {
	display: block;
	text-align: center
}




/*

	UHH LIBRARY

*/

.element[data-type=windows] {
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
	padding: 0.125em;
	background: #c0c0c0;
	font-family: 'VT323';
	display: block;
	text-align: left;
	color: #000;
	height: auto;
	min-height: calc(calc(1rem * var(--g)) * var(--h));
	font-size: calc(1em * var(--ts));
	--wc: #364d78;
}

.element[data-type=windows] .winNav {
	background: var(--wc);
	color: #fff;
	padding: 0.25em;
	font-size: calc(1em * var(--ts));
	display: grid;
	grid-template-columns: 1fr auto
}

.element[data-type=windows] .winOptions {
	display: flex
}

.element[data-type=windows] .winOptions span {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	box-shadow: inset -0.0625em -0.0625em #0a0a0a, inset 0.0625em 0.0625em #fff, inset -0.125em -0.125em grey, inset 0.125em 0.125em #dfdfdf;
	background: #b9b8b8;
	height: 100%;
	min-width: 1em;
	margin-left: 0.125em;
	position: relative
}

.element[data-type=windows] .winOptions span[data-mat=minimise]::before {
	content: '';
	position: absolute;
	height: 0.125em;
	background: #0a0a0a;
	width: 60%;
	margin-bottom: 0.2em
}

.element[data-type=windows] .winOptions span[data-mat=close] {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.5em 0.5em
}

.element[data-type=windows] .winContent {
	padding: 0.4em
}

.element[data-type=windows] .innerWinContent {
	background: #fff;
	box-shadow: inset 1px 1px #9b9a99, inset -1px -1px #ffffff, inset 2px 2px #9b9a99, inset -2px -2px #ffffff;
	padding: 0.25em
}



/*
	LIBRARY WINDOWS PLAYER
*/

.element[data-type=windowsplayer] {
	box-shadow: inset -0.0625em -0.0625em #0a0a0a, inset 0.0625em 0.0625em #dfdfdf, inset -0.125em -0.125em grey, inset 0.125em 0.125em #fff;
	padding: 0.125em;
	background: #c0c0c0;
	font-family: 'VT323';
	display: block;
	color: #000;
	text-align: left;
	height: auto;
	font-size: calc(1em * var(--ts));
	--wc: #364d78;
}

.element[data-type=windowsplayer] .winNav {
	background: var(--wc);
	color: #fff;
	padding: 0.25em;
	font-size: calc(1em * var(--ts));
	display: grid;
	grid-template-columns: 1fr auto
}

.element[data-type=windowsplayer] .winOptions {
	display: flex
}

.element[data-type=windowsplayer] .winOptions span {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	box-shadow: inset -0.0625em -0.0625em #0a0a0a, inset 0.0625em 0.0625em #fff, inset -0.125em -0.125em grey, inset 0.125em 0.125em #dfdfdf;
	background: #b9b8b8;
	height: 100%;
	min-width: 1em;
	margin-left: 0.125em;
	position: relative
}

.element[data-type=windowsplayer] .winOptions span[data-mat=minimise]::before {
	content: '';
	position: absolute;
	height: 0.125em;
	background: #0a0a0a;
	width: 60%;
	margin-bottom: 0.2em
}

.element[data-type=windowsplayer] .winOptions span[data-mat=close] {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.5em 0.5em
}

.element[data-type=windowsplayer] .winContent {
	padding: 0.5em;
	display: grid;
	grid-template-columns: 6em 1fr;
	grid-gap: 0.6em
}

.element[data-type=windowsplayer] .winContent > img {
	width: 100%;
	height: 100%;
	max-height: 5.6em;
	object-fit: cover;
	border: 0.125em solid #9b9a99
}

.element[data-type=windowsplayer] .winPlayerMeta {
	display: grid;
	grid-gap: 0.25em
}

.element[data-type=windowsplayer] .winPlayerWhat {
	display: grid;
	grid-template-columns: 2em 1fr;
	grid-gap: 0.8em
}

.element[data-type=windowsplayer] .winPlayerWhat h4 {
	font-weight: 100;
	font-size: 1em;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden
}

.element[data-type=windowsplayer] .winPlayerWhat:first-child h4 {
	letter-spacing: -0.035em
}

.element[data-type=windowsplayer] .winPlayerWhat p {
	background: #fff;
	box-shadow: inset 0.0625em 0.0625em #9b9a99, inset -0.0625em -0.0625em #ffffff, inset 0.125em 0.125em #9b9a99, inset -0.125em -0.125em #ffffff;
	padding: 0.125em 0.125em 0.125em 0.25em;
	white-space: nowrap;
	overflow: hidden
}

.element[data-type=windowsplayer] .winPlayerControls {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 0.5em;
	margin-top: 1em;
}

.element[data-type=windowsplayer] .winWrap {
	display: flex;
	align-items: center
}

.element[data-type=windowsplayer] .winPlayerLine {
	width: 100%;
	background: #9b9a99;
	height: 0.25em;
	box-shadow: inset 0.0625em 0.0625em #000, inset -0.0625em -0.0625em #9b9a99;
	border-radius: 6.25em;
	position: relative
}

.element[data-type=windowsplayer] .winPlayerLine span {
	display: block;
	height: 400%;
	width: 0.625em;
	background: #9b9a99;
	box-shadow: inset 0.0625em 0.0625em #9b9a99, inset -0.0625em -0.0625em #000, inset 0.125em 0.125em #9b9a99, inset -0.125em -0.125em #000;
	position: absolute;
	top: 50%;
	left: 0.625em;
	transform: translateY(-50%)
}

.element[data-type=windowsplayer] .winPlayerButtons {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-gap: 0.25em;
}

.element[data-type=windowsplayer] .winPlayerButtons i {
	box-shadow: inset -0.0625em -0.0625em #0a0a0a, inset 0.0625em 0.0625em #fff, inset -0.125em -0.125em grey, inset 0.125em 0.125em #dfdfdf;
	width: 2.7em;
	min-height: 1.8em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7em
}

.element[data-type=talkingdonny] {
	font-family: var(--f);
	--f: 'VT323';
	display: flex;
	align-items: flex-start;
	color: #444;
	flex-direction: row;
	height: auto;
	--c: 0.8;
	--bc: #cfc4f5
}

.element[data-type=talkingdonny].reverseTalkingOrder {
	flex-direction: row-reverse;
}

.element[data-type=talkingdonny] img {
	width: 1.6875em;
	height: 1.6875em;
	border-radius: 50%;
	margin-right: 0.375em;
	border: 0.0625em solid transparent;
	object-fit: cover;
	object-position: center;
	box-shadow: 0 0 0 0.0625em var(--bc)
}

.element[data-type=talkingdonny] p {
	background: #fff;
	border-radius: calc(1em * var(--c));
	border-top-left-radius: 0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	padding: 0.5em 0.625em;
	margin-top: 0.625em;
	background: var(--bc)
}

.element[data-type=talkingdonny].reverseTalkingOrder img {
	margin-right: 0;
	margin-left: 0.375em
}

.element[data-type=talkingdonny].reverseTalkingOrder p {
	border-top-left-radius: calc(1em * var(--c));
	border-top-right-radius: 0px
}




.element[data-type=majorityvote] {
	font-family: 'M PLUS 1';
	display: flex;
	color: #404040;
	border: 0.0625em solid #000
}

.element[data-type=majorityvote] .scene {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none
}

.element[data-type=majorityvote] .scene.active {
	display: block
}

.element[data-type=majorityvote] .scene img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	display: block
}

.element[data-type=majorityvote] .scene .talking {
	position: absolute;
	bottom: 0;
	border: 0.125em solid #a2702b;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 0.0625em;
	font-family: 'M PLUS 1';
	height: 5em;
	font-size: 0.9375em
}

.element[data-type=majorityvote] .scene .talking .innerTalking {
	height: 100%;
	width: 100%;
	border: 0.0625em solid #a2702b;
	padding: 0.625em;
	box-shadow: 0 0 0 0.0625em #000
}

.element[data-type=majorityvote] .scene .talking .donny {
	position: absolute;
	top: 0;
	left: -0.125em;
	border: 0.0625em solid #a2702b;
	border-left: 0.125em solid #a2702b;
	border-bottom: 0.0625em solid #dab67d;
	transform: translateY(calc(-100% - 0.0625em));
	background: rgba(0,0,0,0.6);
	font-weight: 100;
	color: #dddeb7;
	font-size: 0.9375em;
	padding: 0.0625em
}

.element[data-type=majorityvote] .scene .talking .donny h4 {
	font-weight: 100;
	height: 100%;
	width: 100%;
	border: 1px solid #a2702b;
	padding: 0.25em 1.25em
}

.element[data-type=majorityvote] .scene .talking i {
	position: absolute;
	bottom: 0.25em;
	left: 50%;
	transform: translateX(-50%);
	animation: bounceUp 2s linear infinite;
}

@keyframes bounceUp {
	0% {
		bottom: 0.125em
	}
	50% {
		bottom: 0px
	}
	100% {
		bottom: 0.125em
	}
}

.element[data-type=spotify] {
	height: auto
}

.element[data-type=spotify] .innerSpotify {
	text-align: center;
	color: var(--co);
	-webkit-font-smoothing: antialiased;
}

.element[data-type=spotify] .innerSpotify img {
	width: 100%;
	display: block
}

.element[data-type=spotify] .innerSpotify h5 {
	text-overflow: ellipsis;
	width: calc(calc(1rem * var(--g)) * var(--w));
	white-space: nowrap;
	overflow: hidden;
	font-size: 0.7em
}

.element[data-type=spotify] .innerSpotify p {
	text-overflow: ellipsis;
	width: calc(calc(1rem * var(--g)) * var(--w));
	white-space: nowrap;
	overflow: hidden;
	font-size: 0.62em
}

.element[data-type=spotify] .innerSpotify p i {
	padding-right: 0.25em
}

.element[data-type=spotify] .imgWrap {
	padding-bottom: 0.25em;
	position: relative;
}

.element[data-type=spotify] .imgWrap i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 1em;
	color: rgba(255,255,255,0.7);
	text-shadow: 1px 1px rgba(0,0,0,0.2);
	transition: all 0.3s ease
}

.element[data-type=slideshow] .slideshowEls {
	width: 100%;
	height: 100%;
}

.element[data-type=slideshow] .slideshowEls img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.element[data-type=slideshow] > i {
	position: absolute;
	top: 50%;
	left: 20px;
	color: #fff;
	z-index: 99;
	background: rgba(0, 0, 0, 0.3);
	height: 26px;
	width: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.element[data-type=slideshow] > i.fa-chevron-right {
	left: initial;
	right: 20px;
}


.element[data-type=button2] {
	--c: 0.3;
	height: calc(calc(1rem * var(--g)) * var(--h));
	--bc: #ffe0b4;
	--co: #000;
	border: none
}

.element[data-type=button2] button {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 100%;
	background: var(--bc);
	color: var(--co);
	font-family: inherit;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 1.625em;
	border-radius: calc(1em * var(--c));
	border: calc(calc(1rem * var(--g)) * var(--bos)) var(--bot) var(--boc);
	transition: opacity .3s ease;
	padding: 0 1.625em;
}

.element[data-type=button2] button * {
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center
}

.element[data-type=button2][data-hide-icon] button {
	grid-template-columns: auto;
	padding: 0;
}

.element[data-type=button2][data-hide-icon] i {
	display: none
}




.element[data-type=strawsearch] {
	font-family: 'Yantramanav';
	text-align: left
}

.element[data-type=strawsearch] .innerSearchWrap {
	position: relative;
	width: 100%
}

.element[data-type=strawsearch] input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	border: 1px solid #e6e6e6;
	padding: 8px 28px 8px 14px;
	font-family: 'Yantramanav';
	font-size: 14px;
	border-radius: 10px;
	color: #444;
	background: #fff
}

.element[data-type=strawsearch] .innerSearchWrap i {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: #6e6e6e;
	font-size: 13px
}

.element[data-type=strawsearch] .innerSearchWrap input {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.element[data-type=strawsearch] .searchResults {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-top: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	width: 100%
}

.element[data-type=strawsearch] .searchResult {
	padding: 6px 14px 6px 14px;
	color: #444;
	font-size: 14px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 8px
}

.element[data-type=strawsearch] .searchResult i {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	font-size: 13px;
	padding-top: 2px
}

.element[data-type=friends] {
	--bc: #FFFF00;
	--co: #000;
	align-items: flex-start;
	color: var(--co);
}

.element[data-type=friends] > h4 {
	display: inline-block;
	background: var(--bc);
	padding: 0.5em;
	border: 0.155em solid var(--co);
	border-bottom: 0;
	border-top-left-radius: 0.625em;
	border-top-right-radius: 0.625em;
	font-size: 0.875em;
	font-family: 'Yantramanav';
	font-weight: 900;
	min-width: 6.25em;
	text-align: center
}

.element[data-type=friends] .friendsListSplit {
	background: var(--bc);
	border: 0.125em solid var(--co);
	border-radius: 0.625em;
	border-top-left-radius: 0;
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
	overflow-y: scroll
}

.element[data-type=friends] .innerFriendsList {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 1.25em;
	padding: 0.625em;
	align-items: flex-start;
}

.element[data-type=friends] .friendsList .followingDon {
	font-family: 'Yantramanav';
	font-size: 0.875em;
	text-align: center;
	overflow-x: hidden
}

.element[data-type=friends] .friendsList .followingDon .innerFollowingDon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow-x: hidden
}

.element[data-type=friends] .friendsList .followingDon img {
	height: 1.875em;
	width: 1.875em;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	margin-bottom: 0.5em;
}

.element[data-type=friends] .friendsListMeta {
	background: #df001d;
	color: #fff;
	padding: 0.625em;
	position: relative;
}

.element[data-type=friends] .friendsListMeta p {
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-family: 'Yantramanav';
	font-size: 0.9375em;
}

.element[data-type=friends] .friendsListMeta p span {
	transform: rotate(-90deg);
	position: sticky;
	top: 0;
}

.element[data-type=blogdate] {
	text-align: var(--ta);
	--ta: left;
	--co: #000000;
	--bc: rgba(0,0,0,0);
	--px: 0;
	--toc: rgba(0,0,0,0);
	--sb: #e8e8e8;
	--stb: #f0f0f0;
	--pb: 1;
	background: var(--bc);
	color: var(--co);
	border-radius: calc(1em * var(--c));
	padding-left: calc(1em * var(--px));
	padding-right: calc(1em * var(--px));
}

.element[data-type=blogdate] p {
	width: 100%;
	font-size: calc(1em * var(--ts));
}

.element[data-type=blogcontent] .blog_content>h1 {
	font-size: calc(1em * 1.4);
	color: var(--co2)
}

.element[data-type=blogcontent] .blog_content>h2 {
	font-size: calc(1em * 1.2);
	color: var(--co2)
}


.element[data-type=strawputer] {
	font-family: 'Yantramanav';
	text-align: left;
	color: #000;
	--co2: #fee8ef
}

.element[data-type=strawputer] .mainPuter {
	border: 0.625em solid #bfbebe;
	border-radius: 0.625em;
	height: 100%;
	width: 100%;
	background: #fff;
	padding: 0.625em;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	position: relative;
}

.element[data-type=strawputer] .mainPuter .puterMessages {
	overflow-y: scroll;
	padding-bottom: 0.625em
}

.element[data-type=strawputer] .mainPuter .puterMessages::-webkit-scrollbar { 
	display: none; 
}

.element[data-type=strawputer] .mainPuter .puterMessages > *:not(:last-child){
	margin-bottom: 0.375em
}

.element[data-type=strawputer] .mainPuter .puterMessages p {
	background: var(--co2);
	padding: 0.375em;
	border-radius: 0.375em;
	font-size: 0.875em;
	border: 0.0625em solid #f0f0f0;
	display: table
}

.element[data-type=strawputer] .mainPuter .puterMessages p.opposite {
	margin: 0 0 .375em auto;
	background: #d2d2d2
}

.element[data-type=strawputer] .mainPuter .puterControls {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 0.375em;
	box-shadow: 0 0 0 0.375em #fff;
	position: relative;
}

.element[data-type=strawputer] .mainPuter .puterControls button {
	-webkit-appearance: none;
	appearance: none;
	background: var(--co2);
	border: 0.0625em solid #f0f0f0;
	padding: 0.125em 0.25em;
	font-size: 0.8125em;
	transition: all 0.3s ease
}

.element[data-type=strawputer] .mainPuter .puterControls button:hover {
	opacity: 0.7;
	cursor: pointer
}

.element[data-type=strawputer] .mainPuter .puterControls input {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	font-family: 'Yantramanav';
	font-size: 0.8125em;
	border: 0.125em solid var(--co2);
	padding: 0.125em 0.25em
}

.element[data-type=strawputer] .puterStand {
	display: flex;
	width: 100%
}

.element[data-type=strawputer] .puterStand .innerPuterStand {
	background: linear-gradient(-180deg, rgba(255,255,255,0.50) 0%, rgba(100,100,100,0.50) 100%);
	margin: 0 auto;
	padding: 0.5em;
	max-width: 70%;
	width: 100%;
	border: 0.25em solid #bfbebe;
	border-radius: 2.5em;
}

.element[data-type=strawputer] .waiter {
	background: 0;
	display: table;
}

.element[data-type=strawputer] .waiter span {
	height: 0.625em;
	width: 0.625em;
	display: inline-block;
	background: var(--co2);
	border-radius: 50%;
	opacity: 0.2;
	animation: blinkload 1.5s infinite ease-in-out;
}

.element[data-type=strawputer] .waiter span:not(:last-child){
	margin-right: 3px
}

.element[data-type=strawputer] .waiter span:nth-child(1) {
	animation-delay: 0s;
}

.element[data-type=strawputer] .waiter span:nth-child(2) {
	animation-delay: 0.5s;
}

.element[data-type=strawputer] .waiter span:nth-child(3) {
	animation-delay: 1s;
}

@keyframes blinkload {
	0%, 100% {
		opacity: 0.2;
	}
	50% {
		opacity: 1;
	}
}

.element[data-type=memegen] {
	--bc: #fccf8c;
}

.element[data-type=memegen] .innerMemeGen {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
	position: relative;
}

.element[data-type=memegen] .innerMemeGen .memeContainer {
	border: 0.25em solid #000;
	border-radius: 0.625em;
	position: relative;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.element[data-type=memegen] .innerMemeGen .memeContainer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.element[data-type=memegen] .innerMemeGen .officialMemeContainer {
	height: 100%;
	width: 100%
}

.element[data-type=memegen] .innerMemeGen .memeControls {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
}

.element[data-type=memegen] .innerMemeGen .memeControls i {
	background: var(--bc);
	height: 1.7em;
	width: 1.7em;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0.125em solid #000;
	color: #000;
	font-size: 0.775em;
	margin: 0 0em;
	transition: all 0.3s ease
}

.element[data-type=memegen] .innerMemeGen .memeControls i:hover {
	background: #000;
	color: var(--bc);
	cursor: pointer
}

.element[data-type=memegen] .innerMemeGen .memeButtons {
	display: flex;
}

.element[data-type=memegen] .innerMemeGen .memeButtons button {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	border: 0.25em solid #000;
	border-top: 0;
	background: var(--bc);
	font-family: 'Lexend Deca';
	font-size: 0.875em;
	padding: 0.25em;
	text-transform: lowercase;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0.625em;
	color: #000;
	transition: all 0.3s ease
}

.element[data-type=memegen] .innerMemeGen .memeButtons button:hover {
	color: rgba(0,0,0,0.5);
	cursor: pointer
}

.element[data-type=memegen] .innerMemeGen .memeButtons button:not(:last-child) {
	border-right: 0.125em solid #000;
	border-bottom-left-radius: 0.625em;
	border-bottom-right-radius: 0
}

.element[data-type=memegen] .innerMemeGen .memeButtons button.resetMeme {
	border-left: 0.125em solid #000
}

.element[data-type=memegen] .memeGallery {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--bc);
	border-radius: 0.625em;
	border: 0.25em solid #000;
	display: grid;
	grid-template-rows: 1fr auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease
}

.element[data-type=memegen] .memeGallery.showMemeGallery,.element[data-type=memegen] .stickerButtons.showMemeGallery {
	opacity: 1;
	pointer-events: all
}

.element[data-type=memegen] .memeGallery .memeGallResults {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow-y: scroll;
	height: 100%	
}

.element[data-type=memegen] .memeGallery .memeGallResults img {
	width: 100%;
	object-fit: cover;
	object-position: center;
	padding: 0.625em;
	transition: all 0.3s ease
}

.element[data-type=memegen] .memeGallery .memeGallResults img:hover {
	opacity: 0.7;
	cursor: pointer
}

.element[data-type=memegen] .memeGallery .memeInp {
	padding: 0.625em;
	display: flex
}

.element[data-type=memegen] .memeGallery .memeInp i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125em
}

.element[data-type=memegen] .memeGallery .memeInp input {
	width: 100%;
	background: 0;
	font-family: 'Yantramanav';
	font-size: 1.125em;
	border: 0;
	font-weight: 900;
	color: #000
}

.element[data-type=memegen] .memeGallery .memeInp input::placeholder {
	color: #000
}

.element[data-type=memegen] .stickerButtons {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none
}

.element[data-type=memegen] .stickerButtons button {
	-webkit-appearance: none;
	appearance: none;
	background: var(--bc);
	border: 0;
	color: #000;
	height: 1.5em;
	width: 1.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.25em;
	border-radius: 0.25em
}

.element[data-type=customhtml] iframe {
	height: 100%;
	width: 100%;
	border: 0;
}


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