:root {}

* {
	box-sizing: border-box
}

body {
	font-family: nunito, sans-serif;
	font-weight: 600;
	background: #0054FA;
	background: #000;
	font-size: 1.4em;
	line-height: 1.2em;
	color: #fff
}

#preloader {
	background: #000;
	position: fixed;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	gap: 40px;
	top: 0;
	left: 0
}

#preloader img {
	width: 200px
}

.progress {
	width: 200px;
	height: 20px;
	background: #303030;
	border-radius: 100px;
	overflow: hidden
}

#progressBar {
	height: 20px;
	background: #fff;
	border-radius: 100px;
	transition: all .5s ease;
	width: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: chewy, system-ui;
	line-height: 1.2em;
	letter-spacing: .02em
}

h1 {
	font-size: 4em
}

h2 {
	font-size: 3.5em
}

h3 {
	font-size: 3em
}

h4 {
	font-size: 2.5em
}

h5 {
	font-size: 2em
}

h6 {
	font-size: 1.6em
}

h1.title {
	position: relative;
	-webkit-text-stroke: 6px #270e0e;
	color: #6a00ff;
	text-shadow: 0 10px 12px rgba(0, 0, 0, .8), 3px 6px 0 rgba(0, 0, 0, .5);
	user-select: none
}

h1.title.fw {
	width: 100%;
	text-align: center
}

.title-dance .title {
	display: inline-block;
	width: auto
}

h1.title span {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgb(255 254 0) 0%, rgb(255 0 179) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0;
	text-shadow: none;
	width: 100%
}

img {
	user-select: none;
	-webkit-user-drag: none
}

section,
.section-content {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw
}

section {
	padding: 50px 40px;
	overflow-x: clip;
	background: #0054FA
}

#characters {
	padding-top: 150px
}

#collections {
	background: #002787;
	padding-bottom: 150px
}

.resize {}

.section-content {
	max-width: 1500px;
	width: 100%
}

.box {
	display: flex;
	flex-flow: column;
	align-items: start;
	gap: 20px;
	border-radius: 3em;
	background: linear-gradient(180deg, rgba(230, 226, 241, 1) 0%, rgba(203, 208, 231, 1) 100%);
	color: #2f2f2f;
	padding: 2em;
	box-shadow: inset 0 -5px 0 #a99ec9, inset 0 5px 0 #fff, 0 10px 30px rgba(0, 0, 0, .5), 0 10px 2px rgba(0, 0, 0, .3);
	border: 4px solid #28160c;
	transition: all .3s ease;
	transform: rotate(3deg)
}

.shadow {
	box-shadow: inset 0 -5px 0 #a99ec9, inset 0 5px 0 #fff, 0 10px 30px rgba(0, 0, 0, .5), 0 10px 2px rgba(0, 0, 0, .3)
}

.box:nth-child(2n) {
	transform: rotate(-3deg)
}

nav {
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	padding: 20px;
	z-index: 10
}

nav .nav-icons,
nav .nav-links {
	flex-grow: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px
}

nav .nav-links a {
	color: #fff;
	text-decoration: none
}

nav .nav-icons,
nav .nav-logo {
	width: 20%
}

nav .nav-logo img {
	width: 100px
}

nav .nav-icons {
	flex-grow: 0;
	gap: 10px;
	justify-content: end
}

nav .nav-icons,
nav .nav-links {
	display: none
}

nav .nav-icons,
nav .nav-logo {
	width: auto
}

#header {
	flex-flow: column;
	position: relative;
	height: 600px;
	padding: 0
}

#header .section-content {
	width: 100vw;
	max-width: 100vw
}

.header-bg {
	position: relative;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden
}

.header-logo {
	position: absolute;
	width: 125%;
	z-index: 9999;
	bottom: -1000px;
	filter: drop-shadow(0px 50px 30px black)
}

.header-art {
	display: flex;
	justify-content: center;
	position: absolute;
	margin-top: 100px;
	aspect-ratio: 1
}

.layer-1,
.layer-2 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0
}

.layer-1 {
	background-image: url(../img/art/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center
}

.layer-2 {
	background-image: url(../img/art/rocks.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center bottom;
	transform: translateY(1px)
}

.art-character {
	position: absolute;
	transform: scale(0);
	bottom: -20%
}

.art-character:nth-child(1) {
	transform-origin: bottom center;
	animation: character1 3s ease-in-out both alternate infinite
}

@keyframes character1 {
	0% {
		transform: rotate(0deg) scaleY(1)
	}

	100% {
		transform: rotate(3deg) scaleY(1.04)
	}
}

.art-character:nth-child(2) {
	transform-origin: bottom center;
	animation: character2 2.3s ease-in-out both alternate infinite
}

@keyframes character2 {
	0% {
		transform: scaleY(1) rotate(0deg)
	}

	100% {
		transform: scaleY(1.05) rotate(-1deg)
	}
}

.art-character:nth-child(3) {
	transform-origin: bottom center;
	animation: character3 2.5s ease-in-out both alternate infinite
}

@keyframes character3 {
	0% {
		transform: scaleY(1) rotate(1deg)
	}

	100% {
		transform: scaleY(1.03)rotate(-1deg)
	}
}

.art-character:nth-child(4) {
	transform-origin: bottom center;
	animation: character4 2.6s ease-in-out both alternate infinite
}

@keyframes character4 {
	0% {
		transform: scaleY(1) rotate(-1deg)
	}

	100% {
		transform: scaleY(1.03)rotate(1deg)
	}
}

.art-character:nth-child(5) {
	transform-origin: bottom center;
	animation: character5 2s ease-in-out both alternate infinite
}

@keyframes character5 {
	0% {
		transform: scaleY(1) rotate(-1deg)
	}

	100% {
		transform: scaleY(1.03)rotate(1deg)
	}
}

.art-character:nth-child(6) {
	transform-origin: bottom center;
	animation: character6 2s ease-in-out both alternate infinite
}

@keyframes character6 {
	0% {
		transform: scaleY(1) rotate(1deg)
	}

	100% {
		transform: scaleY(1.03)rotate(-1deg)
	}
}

#killaverse-media {
	flex-flow: column
}

#modal {
	position: fixed;
	height: 100vh;
	width: 100vw;
	background: #000000e6;
	z-index: 9999;
	display: none;
	justify-content: center;
	align-items: center;
	animation: modal .5s ease both
}

#modal .modal-content {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative
}

#modal .modal-content video {
	width: 1200px;
	max-width: 95%;
	position: absolute;
	aspect-ratio: 16/9
}

#closeModal {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer
}

#videoLoader {
	position: absolute
}

@keyframes modal {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.scroll-downs {
	position: absolute;
	right: 0;
	bottom: 40px;
	left: 0;
	margin: auto;
	width: 34px;
	height: 55px;
	pointer-events: none
}

.mousey {
	width: 3px;
	padding: 10px 15px;
	height: 35px;
	border: 2px solid #fff;
	border-radius: 25px;
	opacity: .75;
	box-sizing: content-box
}

.scroller {
	width: 3px;
	height: 10px;
	border-radius: 25%;
	background-color: #fff;
	animation-name: scrolldown;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(.15, .41, .69, .94);
	animation-iteration-count: infinite
}

@keyframes scrolldown {
	0% {
		opacity: 0
	}

	10% {
		transform: translateY(0);
		opacity: 1
	}

	100% {
		transform: translateY(15px);
		opacity: 0
	}
}

#footer {}

#footer .section-content {
	border-top: 4px solid #fff;
	padding-top: 20px;
	flex-wrap: wrap;
	align-items: start
}

#footer .copyright {
	width: 100%;
	text-align: center;
	font-size: .8em;
	opacity: .5;
	margin-top: 100px
}

#footer a {
	text-decoration: none;
	color: #fff;
	transition: all .3s ease
}

#footer a:hover {
	text-decoration: underline
}

#footer ul {
	margin-right: 50px
}

#footer .logo {
	flex-grow: 1;
	display: flex;
	justify-content: end
}

#footer .logo img {
	width: 100px
}

#contact {
	margin-bottom: -1px
}

#contact .section-content {
	flex-flow: column
}

#contact h1 {
	font-size: 8em;
	margin-bottom: 50px;
	text-align: center
}

#build {
	padding-bottom: 100px;
	padding-top: 150px;
	border-top: 4px solid #0054FA;
	margin-bottom: -1px
}

#build .section-content {
	flex-flow: column
}

#build .builder-box {
	display: flex;
	background: linear-gradient(180deg, #ffea00 0%, #ff6d00 100%);
	border-radius: 50px;
	color: #28160c;
	position: relative;
	padding-bottom: 200px;
	border: 4px solid #28160c
}

#build .info {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: start;
	padding: 50px;
	gap: 20px;
	width: 50%
}

#build .section-content>.title-dance {
	display: none;
	margin-bottom: 20px
}

#build .cub-builder {
	width: 50%;
	display: flex;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(1.5) translateX(-15px)
}

#build .cub-builder img {
	position: absolute;
	width: 100%;
	margin-top: -30%
}

#build .traits {
	display: flex;
	flex-direction: column;
	position: absolute;
	right: -30px;
	gap: 20px;
	top: 100px
}

#build .trait {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 4px solid #28160c;
	padding: 10px;
	width: 80px;
	aspect-ratio: 1;
	align-items: center;
	background: #894215;
	border-radius: 20px;
	transition: all .2s ease
}

#build .trait.selected {
	background: #ff0
}

#build .trait img {
	max-height: 100%;
	max-width: 100%;
	filter: drop-shadow(0px 5px 1px rgba(39, 21, 12, 0.4))
}

#build p {
	font-size: 1.4em;
	line-height: 1.1em
}

#cubs {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	position: absolute;
	bottom: 0;
	border-radius: 0 0 46px 46px
}

.community-cubs {
	display: flex;
	flex-flow: row;
	align-content: center;
	animation: scroll 20s linear infinite
}

.community-cubs img {
	flex: 0 0 auto;
	align-self: center;
	max-height: 200px;
	max-width: 200px;
	margin-right: 0
}

#killaverse-media {
	background: #1e1a2c;
	margin-bottom: -400px;
	padding-bottom: 200px
}

#killaverse-media .text {
	font-size: 1.5em;
	line-height: 1.2em;
	padding: 0 50px;
	color: #8278a9;
	width: 70%
}

#killaverse-media .section-content {
	flex-flow: column;
	text-align: center;
	gap: 20px
}

#killaverse-media .shorts {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
	width: 100%
}

#killaverse-media .short {
	width: 500px;
	max-width: calc(33% - 20px);
	overflow: hidden;
	border-radius: 25px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
	transform: scale(.95);
	transition: all .3s ease;
	background-color: #000;
	border: 4px solid #000;
	cursor: pointer
}

#killaverse-media .short:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
	transform: scale(1);
	background: #000;
	border-color: #fff
}

#killaverse-media .short .video {
	display: flex;
	flex-flow: column;
	justify-content: center;
	aspect-ratio: 3/2;
	width: 100%;
	overflow: hidden
}

#killaverse-media .short .video video {
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	transition: all .3s ease
}

#killaverse-media .short:hover .video video {
	transform: scale(1.3)
}

#killaverse-media .video-overlay {
	padding: 20px;
	text-align: left;
	color: #857ba6
}

#killaverse-media .short:hover .video-overlay {
	color: #fff
}

#killaverse-media .video-overlay p {
	font-size: .8em;
	font-weight: 600;
	color: #dfd9f2
}

#nfts {
	position: relative;
	min-height: 100vh;
	background: #1a1a1a;
	overflow: hidden;
	padding: 40px 20px;
}

.nft-showcase {
	position: relative;
	width: 100%;
	height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 2000px;
	margin-top: 60px;
}

.nft-circle {
	position: relative;
	width: 800px;
	height: 400px;
	transform-style: preserve-3d;
	transform: rotateX(10deg);
}

.nft {
	position: absolute;
	width: 180px;
	height: 180px;
	left: 50%;
	top: 50%;
	margin: -90px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	cursor: pointer;
	transform-style: preserve-3d;
	transition: all 0.4s ease;
	backface-visibility: hidden;
}

.nft img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(5px);
	pointer-events: none;
}

.nft.active {
	transform: scale(1.2) translateZ(100px);
	z-index: 10;
}

.nft.active img {
	border-color: rgba(255, 215, 0, 0.5);
	box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

#shop {}

#shop .title {
	font-size: 8em
}

#shop .intro {
	display: flex;
	justify-items: center;
	align-items: center;
	flex-flow: column;
	width: 33%;
	padding: 20px
}

#shop .intro div {
	display: flex
}

#shop .intro p {
	font-size: 1.8em;
	line-height: 1em;
	text-align: center;
	margin-bottom: 20px
}

#shop .items {
	display: flex;
	justify-content: center;
	gap: 0;
	width: 66%
}

#shop .item {
	background: #fff;
	border-radius: 30px;
	overflow: hidden;
	color: #000;
	box-shadow: 0 20px 30px #0000007f, 0 6px 5px #00000054;
	border: 4px solid #fff
}

#shop .item:nth-child(1) {}

#shop .item:nth-child(2) {
	transform: scale(1.2)
}

#shop .item div {
	padding: 20px
}

#shop .item img {
	width: 100%
}

#canvas {
	position: fixed;
	top: 0;
	z-index: -1
}

#header,
#about,
#bridge {
	background: 0 0
}

#team {
	margin-bottom: -1px
}

#team .section-content {
	display: flex;
	flex-flow: column
}

#team .team-members {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 90px
}

#team .team-member {
	display: flex;
	flex-flow: column;
	width: calc(25% - 20px)
}

#team .team-member img {
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: 20px
}

#team .team-member:nth-child(2) img,
#team .team-member:nth-child(4) img {
	transform: scale(1.5) rotate(-11deg)
}

#team .team-member:nth-child(1) img,
#team .team-member:nth-child(3) img {
	transform: scale(1.5) rotate(11deg)
}

#team .team-member .team-info {
	transform: rotate(0deg);
	display: flex;
	flex-flow: column;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
	gap: 5px
}

#team .team-member .team-info a {
	margin-top: 20px
}

#about {
	font-size: 2em;
	line-height: 2em;
	margin-top: -2px;
	padding-top: 100px;
	background: #000
}

#about .section-content {
	z-index: 10
}

#about .section-content p {}

#digial {}

#digital .section-content {
	flex-flow: column
}

#digital .toys {
	display: flex;
	flex-flow: row
}

#digital .toy {
	width: 25%;
	padding: 25px
}

#digital .toy img {
	width: 100%
}

#bridge {
	padding: 0;
	background: #000;
	overflow: hidden
}

#bridge .section-content {
	flex-direction: column
}

#bridge video {
	position: absolute;
	top: 0;
	min-width: 100vw;
	min-height: 100vh;
	opacity: .3
}

#bridge .bridge {
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 0
}

#bridge .ship {
	position: absolute;
	z-index: 100;
	width: 500px;
	max-width: 50%;
	aspect-ratio: 3023/2822;
	transform: scale(0);
	filter: brightness(0)
}

#bridge .ship img {
	width: 100%;
	animation: ship 5s ease-in-out infinite
}

@keyframes ship {
	0% {
		transform: translate(0, 0) rotate(-5deg)
	}

	50% {
		transform: translate(0, 5%) rotate(5deg)
	}

	100% {
		transform: translate(0, 0) rotate(-5deg)
	}
}

.bridge-tl {
	display: flex;
	width: 70%;
	position: absolute;
	bottom: 50px;
	height: 200px;
	justify-content: center
}

.bridge-travel,
.bridge-track {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.bridge-travel {
	justify-content: center;
	width: calc(100% - 304px)
}

.bridge-eth,
.bridge-sol {
	width: 160px;
	height: 110px;
	z-index: 100;
	position: relative;
	display: flex;
	justify-content: end;
	align-items: center;
	border-radius: 23px;
	background: #cdd6d8;
	border: 3px solid #3e3f4d;
	box-shadow: inset 0 -5px 0 #a68d9a
}

.bridge-eth {
	justify-content: start
}

.bridge-eth img,
.bridge-sol img {
	position: absolute
}

.bridge-cub,
.bridge-bear {
	width: 90px;
	height: 90px;
	position: absolute;
	right: 100%;
	border-radius: 15px;
	overflow: hidden;
	z-index: 101;
	margin-top: -5px
}

.bridge-eth img,
.bridge-sol img,
.bridge-cub img,
.bridge-bear img {
	width: 100%
}

.bridge-eth img,
.bridge-sol img {
	width: 40px;
	margin-right: 10px
}

.bridge-eth img {
	margin-left: 10px;
	margin-right: 0
}

.bridge-bear {
	left: 100%;
	background: #ff0
}

.bridge-loop {
	width: 100%;
	height: 50px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center
}

.bridge-loop span {
	position: absolute;
	color: #607fa8
}

.bridge-loop path {
	stroke-dasharray: 8px, 12px;
	stroke-width: 4px;
	stroke: #607fa8
}

.bridge-info {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 800px;
	max-width: 100%;
	gap: 20px
}

.bridge-info p {
	text-align: center;
	font-size: 1.6em;
	line-height: 1.2em
}

#brands {
	border-top: 4px solid #0054FA;
	margin-bottom: -1px
}

#brands .section-content {
	gap: 80px;
	flex-wrap: wrap;
	width: 80%
}

#brands .title {
	margin-bottom: 20px;
	margin-top: 30px
}

#brands .section-content h3 {
	font-size: 3em
}

.brand {
	width: calc(50% - 40px);
	position: relative
}

.brand .box {
	align-items: center;
	position: relative
}

.killadinks .box {
	transform: rotate(3deg)
}

.brand-logo {
	width: 200px;
	position: absolute;
	top: -70px;
	filter: drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.4))
}

.killakush .brand-logo {
	top: -100px
}

.brand-video,
.brand-img {
	width: 100%;
	border-radius: 20px;
	border: 4px solid #fff
}

.brand-mascot {
	position: absolute;
	top: -200px;
	width: 500px
}

.killakush .brand-mascot {
	left: -350px
}

.killadinks .brand-mascot {
	right: -350px
}

#characters {
	border-top: 4px solid #0054FA;
	margin-bottom: -1px
}

#characters .section-content {
	align-items: normal
}

.character {
	width: 50%;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	overflow: hidden
}

.character-select .box h3,
.character-select .box p {
	transition: opacity 0.3s ease;
}

.character img {
	transition: transform 0.7s ease, opacity 0.7s ease;
	max-width: 100%;
	height: auto;
}

.character {
	overflow: hidden;
}

.character-select .box {
	gap: 20px
}

.character-select {
	width: 50%;
	display: flex;
	flex-flow: column;
	gap: 20px
}

.character-select ul {
	display: flex;
	gap: 20px;
	margin-top: 30px
}

.character-select li {
	text-align: center;
	display: flex;
	flex-flow: column;
	gap: 10px;
	width: 25%
}

.character-select li .thumb {
	width: 100%;
	aspect-ratio: 1;
	position: relative;
	display: flex;
	justify-content: center;
	border-radius: 30px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .498);
	border: 4px solid #fff;
	transition: all .3s ease-in-out
}

.character-select li:hover .thumb {
	transform: scale(1.1)
}

.character-select li .thumb img {
	width: 100%;
	position: absolute;
	transition: all .3s ease;
	pointer-events: none
}

.character-select li .thumb img:nth-child(1) {
	border-radius: 30px;
	filter: brightness(.5)
}

.character-select li.selected .thumb img:nth-child(1),
.character-select li:hover .thumb img:nth-child(1) {
	filter: brightness(1)
}

.character-select li .thumb img:nth-child(2) {
	bottom: 0;
	height: 95%;
	width: auto;
	filter: drop-shadow(2px 0px 0px black)
}

.character-select li.selected .thumb img:nth-child(2),
.character-select li:hover .thumb img:nth-child(2) {
	height: 120%
}

.character-select li.selected .thumb img:nth-child(2) {
	animation: characterSelect .25s ease both;
	transform-origin: bottom center
}

@keyframes characterSelectBtn {
	0% {
		transform: scaleX(1)
	}

	50% {
		transform: scaleX(1.3)
	}

	100% {
		transform: scaleX(1)
	}
}

.character-select li h6 {
	font-size: .6em
}

#collections {
	border-bottom: 4px solid #3b1f94
}

#collections .section-content {
	gap: 80px;
	flex-wrap: wrap
}

#collections .section-content h3 {
	font-size: 3em
}

.collection {
	position: relative;
	width: calc(50% - 40px)
}

.collection-image {
	width: 300px;
	position: absolute;
	top: -100px;
	right: -100px;
	filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.4))
}

.collection-stats {
	display: flex;
	margin: 10px 0;
	gap: 10px
}

.collection-stats li {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-size: .7em;
	padding: 20px;
	color: #14111a;
	background: #f8f5fe;
	border-radius: 20px;
	text-align: center;
	line-height: 1em;
	gap: 1px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.collection-stats li:last-child {
	border: none
}

.collection-stats li span {
	font-size: 2em;
	line-height: 1em;
	font-weight: 900;
	color: #14111a
}

.btns {
	display: flex;
	gap: 10px
}

.btn {
	display: inline-flex;
	padding: 20px;
	border-radius: 20px;
	text-decoration: none;
	transition: all .3s ease;
	font-size: 1.3em;
	font-weight: 800;
	font-family: chewy, system-ui;
	background: #fbab24;
	color: #28160c;
	box-shadow: inset 0 -3px 0 #ae441b, inset 0 3px 0 #fffb94, 0 10px 30px rgba(0, 0, 0, .5), 0 5px 2px rgba(0, 0, 0, .5);
	border: 4px solid #28160c;
	align-items: center;
	text-align: center;
	justify-content: center;
	gap: 10px
}

.btn.btn-small {
	font-size: 1.1em;
	padding: 10px 15px
}

.btn:hover {
	background: #ff0;
	transform: scale(1.05);
	box-shadow: inset 0 -3px 0 #ae441b, inset 0 3px 0 #fffb94, 0 10px 30px rgba(0, 0, 0, .5), 0 8px 10px rgba(0, 0, 0, .3)
}

.title-dance .title {
	animation: titleDance .5s ease-in-out infinite
}

.title-dance .title:nth-child(2n) {
	animation-delay: .15s
}

.title-dance .title:nth-child(3n) {
	animation-delay: .3s
}

.title-dance .title:nth-child(4n) {
	animation-delay: .4s
}

@keyframes titleDance {
	0% {
		transform: rotate(0deg) scaleY(1) scaleX(1) translateY(0px)
	}

	25% {
		transform: rotate(5deg) scaleY(.9) scaleX(1.05) translateY(-5px)
	}

	50% {
		transform: rotate(-2deg) scaleY(1) scaleX(1) translateY(6px)
	}

	75% {
		transform: rotate(3deg) scaleY(.95) scaleX(1.1) translateY(-3px)
	}

	100% {
		transform: rotate(0deg) scaleY(1) scaleX(1) translateY(0)
	}
}

@media only screen and (max-width:1500px) {}

@media only screen and (max-width:1300px) {
	body {
		font-size: 1.3em
	}

	#brands .brand {
		width: 80%
	}

	#brands .brand .box {
		transform: rotate(0deg)
	}
}

@media only screen and (max-width:1000px) {
	body {
		font-size: 1.2em
	}
}

@media only screen and (max-width:800px) {
	body {
		font-size: 1em
	}

	section {
		padding: 50px 20px
	}

	h1.title {
		width: 100%;
		text-align: center;
		line-height: 1em;
		text-shadow: 3px 6px 0 rgba(0, 0, 0, .5)
	}

	h1.title span {
		text-align: center;
		width: 100%
	}

	.section-content {
		width: 100%
	}

	.box {
		transform: rotate(0deg) !important
	}

	.btn {
		font-size: 1.6em
	}

	.header-art {
		width: 78% !important;
		margin-top: -20px
	}

	nav .nav-icons,
	nav .nav-links {
		display: none
	}

	nav .nav-icons,
	nav .nav-logo {
		width: auto
	}

	#about {
		font-size: 1.5em;
		line-height: 1.5em;
		padding-top: 320px
	}

	#characters .section-content {
		flex-flow: column;
		gap: 60px
	}

	#characters .character {
		display: none
	}

	#characters .character-select {
		width: 100%
	}

	#characters .character-select li {
		width: calc(33.33% - 8px)
	}

	#characters .character-select ul {
		flex-wrap: wrap;
		gap: 12px
	}

	#collections .section-content {
		flex-flow: column;
		gap: 60px
	}

	#collections .collection-stats li {
		padding: 12px
	}

	#collections .btn {
		width: 100%;
		justify-content: center
	}

	#collections .collection-image {
		width: 255px;
		right: -80px;
		top: -80px
	}

	#collections .collection {
		width: 100%
	}

	#collections h3 {
		width: 50%;
		display: flex;
		flex-wrap: wrap;
		line-height: .8em;
		font-size: 4em !important
	}

	#killaverse-media .shorts {
		flex-flow: column
	}

	#killaverse-media .short {
		width: 100%;
		max-width: 100%
	}

	#killaverse-media .text {
		padding: 0;
		width: 100%
	}

	#team .team-members {
		margin-top: 40px
	}

	#team .team-member {
		width: calc(50% - 15px);
		margin-bottom: 40px
	}

	#team .team-member .team-info a {
		margin-top: 0;
		font-size: 1.2em
	}

	#team .team-member img {
		margin-bottom: 10px
	}

	#team .team-member:nth-child(2) img,
	#team .team-member:nth-child(4) img {
		transform: scale(1.5) rotate(0deg) translateX(7px)
	}

	#team .team-member:nth-child(1) img,
	#team .team-member:nth-child(3) img {
		transform: scale(1.5) rotate(0deg) translateX(7px)
	}

	#nfts .nft {
		width: 140px
	}

	#bridge .bridge {
		padding: 0 25px
	}

	#bridge .bridge-tl {
		width: calc(100% - 50px);
		height: 100px;
		bottom: 25px
	}

	#bridge .bridge-cub,
	.bridge-bear {
		width: 60px;
		height: 60px
	}

	#bridge .bridge-travel {
		width: calc(100% - 240px)
	}

	#bridge .bridge-eth,
	.bridge-sol {
		width: 130px;
		height: 82px
	}

	#bridge .bridge-eth img,
	.bridge-sol img {
		width: 30px
	}

	#bridge .bridge-loop span {
		font-size: .8em
	}

	#build .builder-box {
		flex-flow: column;
		padding-bottom: 100px;
		border-radius: 30px
	}

	#build .section-content>.title-dance {
		display: flex
	}

	#build .builder-box .title-dance {
		display: none
	}

	#build .cub-builder {
		aspect-ratio: 1;
		margin-top: -150px;
		transform: scale(1) translateX(0px)
	}

	#build .cub-builder img {
		margin-top: 0;
		transform: scale(1)
	}

	#build .cub-builder,
	#build .info {
		width: 100%
	}

	#build .title-dance {}

	#build .info .title {
		display: none
	}

	#build .info {
		padding: 25px;
		order: 2;
		padding-top: 10px
	}

	#build p {
		font-size: 1.2em
	}

	#build .btn {
		width: 100%;
		justify-content: center
	}

	#build .community-cubs img {
		max-height: 100px;
		max-width: 100px
	}

	#build .trait {
		width: 60px;
		border-radius: 10px
	}

	#build .trait:nth-child(4) {
		display: none
	}

	#build .traits {
		right: -18px;
		gap: 10px;
		top: 40px
	}

	#cubs {
		border-radius: 0 0 26px 26px
	}

	#brands .brand {
		width: 100%
	}

	#brands .section-content {
		width: 100%;
		gap: 115px
	}

	#brands .brand-mascot {
		display: none
	}

	#brands .brand-logo {
		filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 1))
	}

	#brands .killakush .brand-logo {
		top: -144px
	}

	.layer-2 {
		background-size: 230% auto;
		background-position: left bottom
	}

	#footer .logo {
		width: 100%;
		justify-content: center;
		margin-top: 40px
	}

	#footer ul {
		margin-right: 15px
	}

	#footer .section-content {
		justify-content: space-between
	}
}

@media (max-width: 768px) {
	.nft-circle {
		width: 400px;
		height: 300px;
		transform: rotateX(5deg);
	}
	
	.nft {
		width: 140px;
		height: 140px;
		margin: -70px;
	}
}

.character-select .title {
	text-align: center;
	width: 100%;
	justify-content: center;
	margin-bottom: 40px;
}

.giveaway-highlight {
	padding: 24px;
	margin: 20px 0;
}

.giveaway-highlight h3 {
	color: var(--primary);
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
	font-family: 'Chewy', cursive;
	text-align: center;
	text-transform: uppercase;
	position: relative;
}

.giveaway-highlight h3::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	color: var(--secondary);
	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}

.giveaway-highlight p {
	color: var(--primary);
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 12px;
	font-family: 'Chewy', cursive;
	text-align: center;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

/* Animated dollar amounts with gradient */
.highlight-amount {
	display: inline-block;
	position: relative;
	font-family: 'Chewy', cursive;
	font-size: 32px;
	font-weight: 800;
	padding: 0 4px;
	color: var(--primary);
}

.highlight-amount::after {
	content: attr(data-amount);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 50%;
	color: var(--secondary);
	overflow: hidden;
}

@keyframes amount-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}