@font-face {
	font-family: "Quirky Spring";
	src: url("quirky-spring.ttf") format("woff"),
		/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
			url("quirky-spring.woff") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-family: "Quirky Spring", Sans-serif;
	scroll-behavior: smooth;
}
body {
	background-color: #141414;
	overflow-x: hidden;
}
/* ==================== BUTTON ============== */
.btn_link {
	box-shadow: inset 0 0 0 4px #58afd1;
	color: #58afd1;
	transition: color 0.25s 0.0833333333s;
	position: relative;
}
.btn_link::before,
.btn_link::after {
	border: 0 solid transparent;
	box-sizing: border-box;
	content: "";
	pointer-events: none;
	position: absolute;
	width: 0;
	height: 0;
	bottom: 0;
	right: 0;
}
.btn_link::before {
	border-bottom-width: 4px;
	border-left-width: 4px;
}
.btn_link::after {
	border-top-width: 4px;
	border-right-width: 4px;
}
.btn_link:hover {
	color: #ffe593;
}
.btn_link:hover::before,
.btn_link:hover::after {
	border-color: #ffe593;
	transition: border-color 0s, width 0.25s, height 0.25s;
	width: 100%;
	height: 100%;
}
.btn_link:hover::before {
	transition-delay: 0s, 0s, 0.25s;
}
.btn_link:hover::after {
	transition-delay: 0s, 0.25s, 0s;
}
.btn {
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1.5;
	font-weight: 700;
	font-size: 100%;
	padding: 1em 1.5em;
	letter-spacing: 0.05rem;
}

/* ======================= MAIN ================== */

header {
	margin: 3% 1.5%;
	box-shadow: #555bff 0px 0px 0px 3px, #1fc11b 0px 0px 0px 6px,
		#ffd913 0px 0px 0px 9px, #ff9c55 0px 0px 0px 12px,
		#ff5555 0px 0px 0px 15px;
	height: 100px;
	border-radius: 20px;
	background-color: #ededed2c;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
header > .header_item {
	width: 16%;
	cursor: pointer;
	font-size: 170%;
}
.header_item {
	display: flex;
	justify-content: center;
	align-items: center;
}
header > .header_logo > img {
	max-width: 80px;
	width: 100%;
	transition: all 1s;
}
.text_link {
	background: linear-gradient(
		to bottom,
		var(--mainColor) 0%,
		var(--mainColor) 100%
	);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 3px 3px;
	color: #fff;
	text-decoration: none;
	transition: all 1s;
}
.text_link:hover,
.header_logo > img:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
	background-position: 0 100%;
	background-size: auto 6px;
	background-repeat: repeat-x;
	text-decoration: none;
	transform: scale(1.2);
}

.mobile {
	justify-content: space-between;
}
.mobile_section {
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
	background-color: #323131;
	width: 100vw;
	height: 100vh;
}
.mobile_section.active {
	display: block;
	z-index: 999;
}
.mobile_section > .close_section,
.mobile_section > .header_item > span {
	justify-content: end;
	cursor: pointer;
}
.mobile_section > .header_item > * {
	color: #fff;
}
.mobile_section > .header_item {
	padding: 20px;
}
.wave_down,
.wave_up {
	fill: #fff;
	transition: animation 2s;
	animation: svg_fill 1s infinite;
}
.wave_up {
	transform: rotate(180deg);
}

.home {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
a {
	text-decoration: none;
}
.home h1 {
	color: rgba(255, 0, 0, 0.1);
	font-size: 9vw;
	text-transform: uppercase;
	font-weight: 700;
	background-size: cover;
	background-image: url("./images/logo.jpg");
	-webkit-background-clip: text;
	animation: background-text-animation 15s linear infinite;
}
.home .logo_header_container {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	align-items: flex-end;
}
.logo_header_animation {
	width: 35vw;
	transition: animation 2s;
	animation: main_logo 1s infinite;
	border-radius: 50%;
	box-shadow: #555bff 0px 0px 0px 3px, #1fc11b 0px 0px 0px 6px,
		#ffd913 0px 0px 0px 9px, #ff9c55 0px 0px 0px 12px,
		#ff5555 0px 0px 0px 15px;
}
.container_cross {
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0px;
	flex-direction: column;
	position: relative;
}

.cross_1 {
	height: 100px;
	width: 200%;
	background-color: orange;
	transform: rotate(8deg);
}
.cross .marquee {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 60px;
	color: #fff;
	overflow: hidden;
	text-wrap: nowrap;
	transition: animation 10s;
	animation: marquee 10s ease-in-out infinite;
}
.cross_2 {
	position: absolute;
	height: 100px;
	width: 200%;
	background-color: orange;
	transform: rotate(-8deg);
}
.contract {
	background-color: orange;
	padding: 30px 0px;
	margin: 5%;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 200%;
	text-justify: auto;
	color: #fff;
	box-shadow: #555bff 0px 0px 0px 3px, #1fc11b 0px 0px 0px 6px,
		#ffd913 0px 0px 0px 9px, #ff9c55 0px 0px 0px 12px,
		#ff5555 0px 0px 0px 15px;
}
.socials_link {
	margin: 30px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10%;
}
.socials_link a {
	width: 15%;
	border-radius: 50%;
}
.socials_link a img {
	border-radius: 50%;
	width: 100%;
	box-shadow: #555bff 0px 0px 0px 3px, #1fc11b 0px 0px 0px 6px,
		#ffd913 0px 0px 0px 9px, #ff9c55 0px 0px 0px 12px,
		#ff5555 0px 0px 0px 15px;
}
.home_contract {
	margin: 100px 0px;
}

.about {
	/* clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 100%, 50% 90%, 0 100%); */
	border-radius: 50px;
	display: flex;
	padding: 50px 0px;
	box-shadow: #555bff 0px 0px 0px 3px, #1fc11b 0px 0px 0px 6px,
		#ffd913 0px 0px 0px 9px, #ff9c55 0px 0px 0px 12px,
		#ff5555 0px 0px 0px 15px;
	margin: 30px 50px;
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.about .about_items {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 48%;
	flex-direction: column;
}

.about .about_items:nth-child(1) img {
	width: 100%;
	border-radius: 10%;
	animation: fly 2s linear infinite;
	transition: animation 2s;
}
.title {
	font-size: 10vw;
	text-shadow: 3px 3px 0 #555bff, 6px 6px 0 #1fc11b, 9px 9px #ffd913,
		12px 12px 0 #ff9c55;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	color: #ff5555;
	animation: shadows 1.2s ease-in infinite, move 1.2s ease-in infinite;
	letter-spacing: 0.4rem;
}

.about .about_items:nth-child(2) p {
	color: #fff;
	margin: 20px 0px;
	font-size: 1vw;
}

.about .about_items:nth-child(2) .socials {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: 1vw;
}
.about .about_items:nth-child(2) .socials img {
	width: 5vw;
}

.tokenomics {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 50px 0px;
}

.container_tokenomics {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}

.tokenomics_items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px;
	width: 30%;
	box-shadow: #555bff 0px 0px 0px 3px, #1fc11b 0px 0px 0px 6px,
		#ffd913 0px 0px 0px 9px, #ff9c55 0px 0px 0px 12px,
		#ff5555 0px 0px 0px 15px;
	color: #fff;
	border-radius: 20px;
}
.tokenomics_items h2 {
	text-shadow: 3px 3px 0 #555bff, 6px 6px 0 #1fc11b, 9px 9px #ffd913,
		12px 12px 0 #ff9c55;
	font-size: 2vw;
	color: #ff5555;
}

.chart {
	padding: 50px;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	color: orange;
	padding: 50px 0px;
}

@keyframes move {
	0% {
		transform: translate(0px, 0px);
	}
	40% {
		transform: translate(-12px, -12px);
	}
	50% {
		transform: translate(-12px, -12px);
	}
	60% {
		transform: translate(-12px, -12px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}

@keyframes fly {
	0% {
		transform: translateX(-20px) translateY(-20px);
	}
	50% {
		transform: translateX(20px) translateY(20px);
	}
	100% {
		transform: translateX(-20px) translateY(-20px);
	}
}

@keyframes marquee {
	0% {
		transform: translate(0%, 0%);
	}
}

@keyframes main_logo {
	0% {
		transform: rotate(20deg) scale(1.1);
	}
	25% {
		transform: rotate(-20deg) scale(0.9);
	}
	50% {
		transform: rotate(20deg) scale(1.1);
	}
	75% {
		transform: rotate(-20deg) scale(0.9);
	}
	100% {
		transform: rotate(20deg) scale(1.1);
	}
}
@keyframes svg_fill {
	0% {
		fill: linear-gradient(
			90deg,
			#555bff,
			#1fc11b,
			#ffd913,
			#ff9c55,
			#ff5555
		);
	}
	25% {
		fill: #05ff09;
	}
	50% {
		fill: #eeff05;
	}
	75% {
		fill: #05b4ff;
	}
	100% {
		fill: linear-gradient(
			90deg,
			#555bff,
			#1fc11b,
			#ffd913,
			#ff9c55,
			#ff5555
		);
	}
}
@keyframes background-text-animation {
	0% {
		background-position: left 0px top 50%;
	}
	50% {
		background-position: left 1500px top 50%;
	}
	100% {
		background-position: left 0px top 50%;
	}
}
@media screen and (min-width: 992px) {
	.desktop {
		display: flex;
	}
	.mobile {
		display: none;
	}
}
@media screen and (max-width: 992px) {
	.desktop {
		display: none;
	}
	.mobile {
		display: flex;
	}
	header {
		margin: 10% 5%;
	}
	.cross_2,
	.cross_1 {
		height: 50px;
	}
	.container_cross {
		height: 300px;
		margin: 0px;
	}
	.cross .marquee {
		font-size: 30px;
		text-wrap: nowrap;
	}
	.contract {
		margin-bottom: 50px;
	}
	.about {
		flex-direction: column;
	}
	.about .about_items {
		width: 100%;
	}
	.about .about_items:nth-child(2) p {
		font-size: 100%;
		text-align: justify;
	}
	.about .about_items:nth-child(2) .socials img {
		width: 25vw;
	}
	.tokenomics {
		gap: 50px;
	}
	.container_tokenomics {
		flex-direction: column;
	}
	.tokenomics_items {
		width: 90%;
	}
	.tokenomics_items h2 {
		font-size: 200%;
	}
	footer {
		font-size: 2vw;
		text-align: center;
	}
}