@font-face {
	font-family: "Paper Font";
	src: url(font/FOT-PopJoyStd-B.woff2);
	}
	
	a:link {
	color:#bbdaff;
	text-decoration:none;
	}
	
	a:hover {
	color:#a6cdfd !important;
	}
	
	a:active {
	color:#86bdff !important;
	}
	
	a:visited {
	color:#bbdaff;
	}
	
	html {
	overflow-x:hidden;
	}
	
	body {
	margin:0;
	background-color: #5193e3;
	background-image: url('graphics/bgchecker.png');
	background-size: 2%;
	background-position:center;
	font-family: "Paper Font";
	color:white;
	font-size:20px;
	overflow-x:hidden;
	}
	
	footer {
	width:100%;
	background-color:#4f90de;
	height:auto;
	}
	
	.mainbody, .steamtemp, .logomain, .copyright {
	margin-left:auto;
	margin-right:auto;
	}
	
	.mainbody {
	width:1200px;
	padding-bottom:10px;
	}
	
	.steamtemp, .logomain, .copyright {
	display:block;
	}
	
	.steamtemp {
	width:646px; 
	height: 200px;
	border-radius: 20px;
	margin-bottom:20px;
	}
	
	.logomain {
	width:900px;
	}
	
	.copyright {
	width:1200px;
	padding: 24px 0 24px 0;
	}
	
	.textleft {
	display: inline-flex;
	margin: 0;
	}
	
	.madeby {
	margin: 0;
	line-height:1;
	}
	
	.kmpfp {
	height: 30px;
	vertical-align: middle;
	margin-bottom: 2px;
	border-radius: 5px;
	}
	
	.socialgroup {
	display: inline;
	}
	
	.socials {
	width: 40px;
	display: inline;
	float: right;
	padding: 3px;
	border-radius: 13px;
	margin-top: 1.25%;
	}
	
	.socialdivider {
	width: 4px;
	height: 46px;
	display: inline;
	float: right;
	background-color: #4488d9;
	}
	
	.padsocialdivider {
	padding: 0px 10px 0px 10px;
	display: inline;
	float: right;
	margin-top: 1.3%;
	}
	
	
	/* banner stuff */
	
	.header {
	pointer-events:none;
	}
	
	.bannermain {
	width:100%;
	}
	
	.donobanner, .berrybanner, .soldierbanner, .taddbanner, .logobanner, .flowerbanner, .batbanner, .katakana, .bannermain, .donokickicon, footer {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	
	.berrybanner {
	pointer-events:all !important;
	}
	
	.donobanner, .berrybanner, .soldierbanner, .taddbanner, .logobanner, .flowerbanner, .batbanner, .katakana {
	position:absolute;
	z-index:20;
	}
	
	.shadow {
	z-index:1 !important;
	}
	
	.logobanner {
	width: 48%;
	left: 26%;
	--translate: translateY(245%);
	transform: var(--translate);
	animation: spin 0.7s ease-in-out;
	}
	
	.katakana {
	width:3%;
	left: 32%;
	opacity:0;
	animation: katonscr 0.9s ease-in-out;
	animation-fill-mode: forwards;
	}
	
	.do {
	left: 41.4%;
	animation-delay: 1.2s;
	}
	
	.no {
	left: 44.77%;
	animation-delay: 1.4s;
	}
	
	.noh {
	left: 48.35%;
	animation-delay: 1.6s;
	}
	
	.mono {
	left: 51.96%;
	animation-delay: 1.8s;
	}
	
	.gatari {
	left: 55.55%;
	animation-delay: 2s;
	}
	
	.donobanner {
	width:22.3%;
	left:19.55%;
	--translate: translateY(14.8%);;
	transform: var(--translate) rotate(0deg);
	animation: donomove 0.5s ease-in-out;
	}
	
	.animate {
	animation: shake 0.5s ease-in-out;
	}
	
	.berrybanner {
	width: 8.6%;
	left: 41.2%;
	--translate: translateY(72.3%);
	transform: var(--translate) rotate(0deg);
	}
	
	.soldierbanner, .taddbanner, .flowerbanner, .batbanner {
	animation-fill-mode: forwards !important;
	overflow-x:none;
	}
	
	.soldierbanner {
	width: 15%;
	right: 37.6%;
	--translate: translateY(98%);
	transform: var(--translate) translateX(6%);
	animation: enemymove 0.5s ease-in-out;
	}
	
	.taddbanner {
	width: 14.16%;
	right: 23.55%;
	--translate: translateY(93.8%);
	transform: var(--translate) translateX(14%);
	animation: enemymove3 0.5s ease-in-out;
	}
	
	.flowerbanner {
	width: 14.25%;
	right: 29.3%;
	--translate: translateY(16.2%);
	z-index:15;
	transform: var(--translate) translateX(10%);
	animation: enemymove2 0.5s ease-in-out;
	}
	
	.batbanner {
	width: 16.6%;
	right: 16.2%;
	--translate: translateY(17.3%);
	z-index:12;
	transform: var(--translate) translateX(18%);
	animation: enemymove4 0.5s ease-in-out;
	}
	
	.container {
	background-color:#4f90de;
	padding:20px;
	border-radius:20px;
	margin-bottom:60px;
	}
	
	.aboutvideo {
	border-radius:10px;
	display:inline-block;
	width:560px;
	height:315px;
	aspect-ratio: 16 / 9;
	}
	
	.abouttext {
	line-height: 1.35;
	margin: 0;
	}
	
	.holdthetext {
	float: right;
	margin: 10px 1.5% 0 0;
	width: 47%;
	}
	
	.aboutheading {
	line-height: 1;
	text-align: center;
	margin: 0;
	margin: 0 0 20px;
	}
	
	.aboutdivider {
	width:100%;
	height:4px;
	background-color:#397bcd;
	}
	
	.two {
	display:none !important;
	}
	
	@media (max-width: 1260px) {
	
	.mainbody, .copyright {
	width:95%;
	}
	
	body {
	background-size: 3%;
	}
	
	.aboutvideo {
	display:block;
	width:100%;
	height:auto;
	}
	
	.holdthetext {
	float: unset;
	margin: 30px 1.5% 0 0;
	width: 100%;
	}
	
	.abouttext {
	line-height: 1.5;
	width: 95%;
	float: unset;
	display:block;
	margin-top: 2%;
	padding:10px
	}
	
	}
	
	
	@media (max-width: 1180px) {
	
	.header {
	transform: scale(1.3) translateY(11.5%);
	padding-bottom: 15%;
	}
	
	}
	
	
	@media (max-width: 1010px) {

	.donokickstartericon {
	display:none;
	}
	
	.amountraised, .helpus {
	float:left !important;
	text-align:center;
	width: 100%;
	}

	}
	
	@media (max-width: 800px) {
	
	.header {
	transform: scale(1.6) translateY(17.3%);
	padding-bottom: 25%;
	}
	
	body {
	background-size: 5%;
	}
	
	}


	@media (max-width: 680px) {
	
	.steamtemp {
	width:100%; 
	}
	
	body {
	background-size: 6%;
	}
	
	}
	
	@media (max-width: 630px) {
	
	.header {
	transform: scale(1.9) translateY(23%);
	padding-bottom: 40%;
	}
	
	.donobanner {
	left: 24.1%;
	}
	
	.berrybanner {
	left: 46.6%;
	}
	
	.soldierbanner {
	right: 31.6%;
	}
	
	.flowerbanner {
	right: 23.5%;
	}
	
	.taddbanner {
	display:none;
	}
	
	.batbanner {
	display:none;
	}
	
	}
	
	@media (max-width: 500px) {
	
	body {
	background-size: 10%;
	}
	
	.header {
	transform: scale(2.3) translateY(28%);
	padding-bottom: 58%;
	}
	
	.logobanner {
	width: 41.8%;
	left: 29%;
	--translate: translateY(289%);
	}
	
	.donobanner {
	left: 27.3%;
	}
	
	.berrybanner {
	left: 46.6%;
	}
	
	.soldierbanner {
	right: 34.8%;
	}
	
	.flowerbanner {
	right: 25.9%;
	}
	
	.madeby {
	display:none;
	}
	
	.two, .textleft, .socialgroup {
	display:table !important;
	margin: 0 auto 0 auto;
	}
	
	.socialgroup {
	margin: 20px auto 0 auto;
	}

	
	}
	
	
	/* anim */
	
	@keyframes shake {
	0% { transform: var(--translate) rotate(0deg); }
	25% { transform: var(--translate) rotate(-8deg); }
	50% { transform: var(--translate) rotate(8deg); }
	75% { transform: var(--translate) rotate(-4deg); }
	100% { transform: var(--translate) rotate(0deg); }
	}
	
	@keyframes katonscr {
	0% { transform: translateY(1480%) rotate(180deg) scale(0.60); opacity: 0; }
	25% { transform: translateY(1360%) rotate(-30deg) scale(1.18); opacity: 1; }
	50% { transform: translateY(1360%) rotate(8deg) scale(1); opacity: 1; }
	75% { transform: translateY(1360%) rotate(-5deg) scale(1); opacity: 1; }
	100% { transform: translateY(1360%) rotate(0deg) scale(1); opacity: 1; }
	}
	
	@keyframes spin {
	0% { transform: var(--translate) rotate(-10deg) scale(0); opacity: 0; }
	50% { transform: var(--translate) rotate(2deg) scale(1.2); opacity: 1; }
	100% { transform: var(--translate) rotate(0deg) scale(1); opacity: 1; }
	}
	
	@keyframes charsdownslow {
	0% { transform: translateY(-6%); }
	100% { transform: translateY(0%); }
	}
	
	@keyframes donomove {
	0% { transform: var(--translate) translateX(-10%) rotate(-5deg); }
	100% { transform: var(--translate) translateX(0%) rotate(0deg); }
	}
	
	@keyframes enemymove {
	0% { transform: var(--translate) translateX(6%) rotate(4deg); }
	100% { transform: var(--translate) translateX(0%) rotate(0deg); }
	}
	
	@keyframes enemymove2 {
	0% { transform: var(--translate) translateX(10%) rotate(5deg); }
	100% { transform: var(--translate) translateX(0%) rotate(0deg); }
	}
	
	@keyframes enemymove3 {
	0% { transform: var(--translate) translateX(14%) rotate(6deg); }
	100% { transform: var(--translate) translateX(0%) rotate(0deg); }
	}
	
	@keyframes enemymove4 {
	0% { transform: var(--translate) translateX(18%) rotate(-7deg); }
	100% { transform: var(--translate) translateX(0%) rotate(0deg); }
	}
	

	#widget {
	border-radius: 15px;
	border-top: 0;
	border-left: 0;
	background: #3b81d6;
	box-shadow: 0;
	}

	#widget .desc {
	color: #fff;
	}

	#widget h1 em {
	color: #bbdaff;
	}
	
	.kickstartercontainer {
	background-color: #fff;
	padding: 0 20px 15px;
	border-radius: 20px;
	margin: 30px auto 40px;
	max-width: 835px;
	display: flex;
	}

	.progress-bar {
    	background: #ab0b0b;
    	width: 100%;
    	height: 30px;
	overflow:hidden;
    	border-radius: 100px;
	}
	
	.fill {
    	background: #da2e2e;
   	height: 100%;
   	width: 0;
   	transition: width 1s ease;
	}
	
	.amountraised, .helpus {
	color:#478adb;
	float:right;
	padding:3px;
	}
	
	.helpus {
	padding:0;
	}
	
	.helpus a {
	color: #97c7f3;
	}
	
	.helpus a:hover {
	color: #a6cdfd;
	}
	
	.donokickstartericon {
	flex: 1.5;
	position:relative;
	pointer-events:none;
	}
	
	.donokickicon {
	height: 335px;
	position: absolute;
	bottom: -102px;
	left: -120px;
	}
	
	.kickerstarterprogessbar {
	flex: 5;
	height: fit-content;
	padding-top: 2%;
	}