html,body,div,li,img,a {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	color: #2b2e31;
}
body {
	font-family: -apple-system, Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background-color: #e7e8e7;
	transition: background-color .5s;
	padding-bottom: 1em;
}
body.ns {
	overflow: hidden;
}
b {
	font-weight: 900;
}
.h, body.pur {
	background-color: #ac53fe;
}
.logo {
	width: 16em;
	max-width: 70%;
}
.logo svg {
	width: 100%;
	height: auto;
}
.logo path {
	fill: #FFF;
}
#drp svg {
	color: #646464;
}
.nt #drp:hover svg {
	color: #000000;
}
#ab {
	transition: all .3s;
	height: 0;
	overflow: hidden;
}
#bb {
	max-width: 40em;
	margin-right: auto;
	margin-left: auto;
	font-size: 1.1em;
	padding: 0 1em 1em;
	color: white;
}
#bb b {
	display: block;
	font-size: 1.3em;
	color: #572c97;
}
#bb a {
	font-weight: 900;
	color: #572c97;
	text-decoration: none;
	transition: all .3s;
	transform: scale(1);
}
.nt #bb a:hover {
	color: #2a154b;
	transform: scale(1.1);
}
#drp {
	cursor: pointer;
	padding: .6em .8em 0 0;
	transition: all .3s;
	transform: scale(1);
	position: absolute;
	top: 0;
	right: 0;
}
#drp svg {
	height: 1.2em;
	transition: transform .3s;
	transform: rotate(0);
	width: 1.2em;
}
#drp.a svg, body.pur #drp svg {
	transform: rotate(180deg);
}
.logo, #drp {
	display: inline-block;
}
#n {
	padding-right: 1em;
	padding-left: 1em;
	text-align: center;
	overflow: hidden;
	height: 0;
	transition: height .3s;
}
.n {
	padding-bottom: .5em;
}
.nt #n > div > div {
	transition: all .3s;
}
#n > div > div {
	display: inline-block;
	border-radius: 9em;
	padding: .5em .8em;
	margin-right: 0;
	margin-bottom: .4em;
	cursor: pointer;
	transform: scale(1);
	background-color: #572c98;
	color: #ac53fe;
	font-weight: bold;
	font-size: .9em;
}
.nt #n > div > div:hover {
	transform: scale(1.05);
	color: white;
}
#n > div > div.a, .nt #n > div > div.a:hover {
	background-color: #ffffff;
	color: #572c97;
}
#loader svg, .loader svg {
  width: 4em;
  transform-origin: center;
  animation: rotate 2s linear infinite;
}
#loader circle, .loader circle {
  fill: none;
  stroke: #ac53fe;
  stroke-width: 4;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dashoffset: -125px;
  }
}
#loader {
	text-align: center;
}
#c {
	padding: 1em;
	background-color: #f4f5f4;
}
#c a, #c li {
	display: block;
	max-width: 40em;
	margin-right: auto;
	margin-left: auto;
	border-radius: 1em;
	padding: 1em 1em 1em 5em;
	margin-bottom: 1em;
	background-color: #e8e8e8;
	text-decoration: none;
	position: relative;
	transition: all .3s;
	transform: scale(1);
	cursor: pointer;
}
.nt #c a:hover, .nt #c li:hover {
	transform: scale(1.02);
}
#c>* .t {
	font-weight: 900;
	font-size: 1.4em;
}
#c>* .d {
	color: gray;
}
#c>* .i {
	position: absolute;
	border-radius: 100%;
	overflow: hidden;
	height: 3em;
	width: 3em;
	left: 1em;
	top: 1em;
	background-color: #ac53fd;
}
#c img, #c span {
	width: 100%;
	min-width: 100%;
	display: block;
}
#c>* .i span {
	text-align: center;
	font-weight: bold;
	color: #e7e8e7;
	padding-top: 0.4em;
	font-size: 1.4em;
	text-transform: uppercase;
}
#c>* .y {
	font-style: italic;
	font-size: .9em;
	margin-top: .2em;
}
#add {
	display: none;
	border-radius: 9em;
	color: white;
	background-color: #ac53fd;
	margin-top: 1em;
	padding: 1em 2em;
	font-weight: bold;
	cursor: pointer;
}
#d {
	position: fixed;
	z-index: 2;
	width: 100%;
	background-color: #e7e8e7;
	top: 0;
	left: 0;
	transition: transform .3s;
	transform: translate3d(100%,0,0);
	overflow: auto;
	height: 100%;
}
#d.a {
	transform: translate3d(0,0,0);
}
#d label {
	display: block;
	font-size: .8em;
	font-weight: bold;
	color: gray;
}
#d input, #d textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	box-sizing: border-box;
	border-radius: .7em;
	font-size: 1em;
	padding: 0.7em 0.7em 0.7em 1em;
	border: 3px solid #e7e7e6;
	outline: none;
	font-weight: bold;
	margin-bottom: 1em;
	width: 100%;
}
#d input:focus, #d textarea:focus {
	border-color: #ac53fd;
}
#back {
	display: inline-block;
	background-color: #c4c4c4;
	font-weight: bold;
	color: #565656;
	padding: .6em 1em;
	border-radius: .5em;
	margin-bottom: 1em;
	cursor: pointer;
}
#tags div {
	display: inline-block;
	background-color: #d8d8d8;
	padding: .5em 0.8em;
	border-radius: 9em;
	font-size: .9em;
	margin-right: .3em;
	margin-top: .5em;
	cursor: pointer;
	color: #575757;
}
#tags div.a {
	color: white;
	background-color: #ac53fd;
}
.but {
	color: white;
	background-color: #ac53fd;
	margin-top: 1em;
	margin-right: auto;
	border-radius: 9em;
	text-align: center;
	font-weight: bold;
	padding-top: 1em;
	padding-bottom: 1em;
	cursor: pointer;
	transition: all .3s;
	transform: scale(1);
	margin-left: auto;
	max-width: 24em;
}
.but.d {
	background-color: red;
}
.nt .but:hover {
	transform: scale(1.02);
}
.dt {
	padding: 1em;
}
.foot {
	padding-top: 1em;
}
#abo {
	display: inline-block;
	background-color: #ced0ce;
	font-weight: bold;
	border-radius: 9em;
	padding: .6em 2.2em .6em 1.2em;
	color: #505050;
	cursor: pointer;
	position: relative;
	transition: all .3s;
	transform: scale(1);
	font-size: .8em;
}
.nt #abo:hover {
	transform: scale(1.1);
	color: black;
}
.nt #abo:hover svg {
	transform: scale(1.4);
	color: black;
}
body.pur #abo {
	background-color: #f4f4f3;
	color: #ac57fc;
	transform: scale(1.1);
}
body.pur #abo svg, body.pur #abo svg:hover, body.pur #abo:hover svg {
	color: #ac57fc;
	transform: rotate(180deg) scale(1.4);
}
body.pur #abo:hover {
	color: #ac57fc;
}
#fil {
	background-color: #572f98;
	display: inline-block;
	color: #ac57fc;
	font-weight: bold;
	position: relative;
	border-radius: 9em;
	padding: .4em 2em .4em 1em;
	margin-bottom: .4em;
	cursor: pointer;
	transition: all .3s;
	transform: scale(1);
}
.nt #fil:hover {
	transform: scale(1.1);
}
#fil svg {
	position: absolute;
	right: 0.6em;
	width: 1.2em;
	height: 1.2em;
	transition: all .3s;
	transform: rotate(0deg)
}
#fil.x svg {
	transform: rotate(180deg);
}
#fil.x {
	background-color: #ac57fc;
	color: white;
}
.sups {
	font-weight: bold;
	font-size: .6em;
	color: #572f98;
}
/* DARK MODE */
@media (prefers-color-scheme: dark) {
	#c {
		background-color: #1c1d1e;
	}
	#c a {
		background-color: #5b5452;
	}
	#c a .d {
		color: #aaaaaa;
	}
	#c a .t, #c a .y {
		color: white;
	}
}