@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: url("roboto-thin.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("roboto-black.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("roboto-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Akira";
  font-style: normal;
  font-weight: 900;
  src: url("akira-bold.woff2") format("woff2");
}

:root {
}

html, body {
	background-color:black;
}

html {
	max-width: 120rem;
	margin-left: auto;
	margin-right: auto;
}

header.section {
	overflow: hidden;
}

.navbar a {
	font-family: "Akira", sans-serif !important;
	font-weight: 900;
	font-style: normal;
	font-size: 10pt;
	text-transform: uppercase;
	letter-spacing: 0.2pt;
}

@media screen and (min-width: 1023px) and (max-width: 1215px) {
	.navbar a {
		font-size: 8pt;
	}
}

.plasma {
	background-image: url("bg.svg");
	background-size: cover;
	background-repeat: no-repeat;

}

.navbar-brand {
	background-image: url("logo.svg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin-inline-start: 1.5rem !important;
	margin-top: 1.5rem;
	margin-right: 2rem;
	width: 5rem;
	height: 5rem;
}

nav.navbar {
	--bulma-navbar-background-color: transparent;
	--bulma-navbar-z: inherit !important;
	background: linear-gradient(to bottom, rgba(234,234,254,0.2), rgba(234,234,254,0));
	border-radius: 0.8rem 0.8rem 0 0;
}


a.navbar-item, .buttons > a {
	color: white;
	transition: all 0.3s ease-out;
	transition: font-size none;
}

a.navbar-item:hover, .buttons > a:hover {
	background-color: transparent;
	color: #ff7 !important;
	border: red 1px !important;
}

div.navbar-end .buttons {
	padding-right: 1.5rem;
}

div.navbar-end .buttons > a {
	color: white;
}

div > strong {
	font-weight: 900 !important;
	color: white !important;
}

.button {
	color: black !important;
	background: white;
	mix-blend-mode: screen;
}

.button:hover {
	background: transparent !important;

}

a.button.is-light {
	color: black !important;
}

.button.is-white {
	border-color: white;
}

.intro {
	display: flex;
	justify-content: space-evenly;
	padding-top: 2rem;
	padding-bottom: 0rem;
}

.description {
	display: flex;
	flex-direction: column;
	align-content: center;
	text-align: left;
	justify-content: center;
	color: white;
}

.description .wide {
	margin-bottom: 0.6rem;
}

.description > .one {
	text-align: center;
	font-family: "Roboto", sans-serif !important;
	font-weight: 100 !important;
	font-size: 17pt;
}

.description > .two {
	padding-top: 1rem;
	text-align: left;
	font-family: "Roboto", sans-serif !important;
	font-weight: 100 !important;
	font-size: 12pt;
}

.inverted {
	text-align: center;
	font-family: "Roboto", sans-serif !important;
	font-weight: 900 !important;

	text-transform: uppercase;
	font-stretch: ultra-expanded;
	font-size: 16pt;

	color: black !important;
	background: linear-gradient(to right, #2222ff, #44cc77);
	mix-blend-mode: screen;
}

.section {
	padding: 0;
	text-align: center;
}

.ball {
position: relative;
	/*background: radial-gradient(circle at 50%, rgba(50, 255, 170, 0.9), rgba(200, 0, 0, 0) 57%, rgba(0, 200, 130, 1) 61%, rgba(0, 130, 130, 0) 70%);*/
	padding: 1.5rem;
	/*height: 50rem;*/
}

.ball img {
	width: 38rem;
	height: auto;
	/*filter: brightness(75%);*/
	margin-right: -6rem;
}

.mountains {
	position: relative;
	height: 25vw;
	max-height: 40rem;
	background-size: min(160rem, 101vw) auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-image: url("mountains.svg");
	overflow: hidden;
}

.breaker {
	bottom: 0;
	position: absolute;
	height: 18rem;
	width: 100%;
	background-size: min(160rem, 101vw) auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-image: url("breaker.svg");
	/*filter: drop-shadow(0px -3px 3px #000);*/
}

.momo {
	position: relative;
	height: 25vw;
	overflow: hidden;
}

.breaker-bottom {
	top: 0;
	position: absolute;
	height: 25rem;
	width: 100%;
	background-size: min(160rem, 101vw) auto;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url("breaker-bottom.svg");
	/*filter: drop-shadow(0px -3px 3px #000);*/
}

.section.dark {
	background-color: black;
}

.under-parallax {
	margin-top: max(-1rem, -6vw);
}

.ornaments {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

h1, h2, .description > .two > span {
	text-align: center;
	font-family: "Akira", sans-serif !important;

	background: linear-gradient(to right, #2222ff, #44cc77);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-stretch: ultra-expanded;
	filter: brightness(130%);
}

h1, h2 {
	font-weight: 500 !important;
	text-transform: uppercase;
}

.description > .two > span {
	font-weight: 900 !important;
	font-size: 15pt;
}

h1 {
	font-size: 32pt;
}

h2 {
	font-weight: 100 !important;
	font-size: 14pt;
}

p {
	text-align: center;
	font-family: "Roboto", sans-serif !important;
	font-weight: 100 !important;

	font-size: 16pt;
	color: #fff;
}

.cardy {
	align-content: center;
	padding: 3rem;
}

.box.zoom-target {
	min-width: 20rem;
}

.box {
	/*min-width: 24rem;*/
	height: auto;
	padding: 2px;
	background: linear-gradient(to right, #2222ff, #44cc77);
	border-radius: 0.4rem;
}

.box.white {
	background: transparent;
	border: 2px solid white;
}

.box > .gradient, .box > .black {
	background: black;
	border-radius: 0.4rem;
	padding: 0.4rem 0.5rem;
}

.box > .black {
	padding: 4rem;
}

.gradient img {
	padding: 2rem 4rem;
	border-radius: 0.4rem;
	background: linear-gradient(to bottom, rgba(80,80,80,1.0), rgba(50,50,50,0.8) 15%, rgba(30,30,30,0));
	width: 100%;
	height: 100%;
}

.wings {
	margin: 0.5rem 1rem;
	background: url("wings.svg");
	background-size: 100% 100%;
	height: 48rem;
	padding: 1rem;
	display: contents;
}

.wings p {
	font-size: 20pt;
	font-stretch: ultra-expanded;
	text-align: left;
}

.wings .points {
	width: 40%;
}

.wings .points p {
	font-size: 16pt !important;
}

hr {
	height: 2px;
	background: linear-gradient(to right, #2222ff, #44cc77);
	margin: 0.8rem 0;
	
}

img.mobile-app {
	margin-left: 3rem;
	width: 55rem;
	background: transparent;
}


img.mobile-app-2 {
	width: 43rem;
	background: transparent;
}

img.roadmap {
	width: 100%;

}

.tokenomics img {
	width: 56rem;
	height: auto;
	filter: drop-shadow(4px 2px 3px rgb(255 255 255 / 0.3));
}

.ornaments > img {
	width: 12rem;
	max-width: 20%;
	height: auto;
	filter: none;
	padding: 1.5rem;
}

h1.white {
	padding-top: 1rem;
	background: transparent;
	color: white !important;
	-webkit-text-fill-color: unset;
}

.bolder {
	font-weight: 500 !important;
}

img.wide {
	margin-bottom: 1rem;
	width: 30rem;
}

a.apply {
	font-size: 20pt;
	text-transform: uppercase;
	letter-spacing: 2pt;
}

a.apply:hover {
	color: yellow !important;
}

p.apply {
	padding: 1rem 5rem;
	font-weight: 500 !important;
}

footer hr {
	margin-top: 1rem;
}

footer img.wide {
	width: 16rem;
	margin-bottom: 0;
}

footer a {
	color: white;
	text-align: left !important;
	text-transform: uppercase;
}

footer p {
	text-align: left !important;
	font-size: 10pt;
	font-weight: 500 !important;
	padding-left: 0.2rem;
	padding-bottom: 1.5rem;
}

img {
	z-index: 5;
}

.zoom-target {
	z-index: 5;
	transition: transform 0.05s ease;
}

@media screen and (max-width: 1024px) {
	:root {
		--bulma-navbar-height: 5rem;
		--bulma-column-gap: 1rem;
		--bulma-burger-item-width: 1.3rem;
		--bulma-burger-item-height: 3px;
	}

	.ball {
		padding: 0;
	}

	.ball > img {
		margin: 0;
	}

	.intro {
		padding-top: 0;
		flex-direction: column-reverse;
	}

	.intro > .description {
		padding: 2rem 1rem 2rem 1rem;
		align-self: center;
	}

	.navbar-brand {
		background: none;
		width: inherit;
		height: inherit;
		margin: 0;
	}

	.navbar-burger {
		color: white;
		height: 4rem;
		z-index: 1500;
	}

	.navbar-start {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: black;
		z-index: 1000;
	}

	.navbar-start a {
		padding: 2rem 0 0 0;
	}

	.navbar-start a:last-child {
		padding-bottom: 2rem;
	}

	.navbar-start a, .buttons a {
		font-size: 11pt;
	}

	nav.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 0;
	}

	.mb .is-flex {
		flex-direction: column-reverse;
	}

	.mb .is-flex.reverse {
		flex-direction: column;
	}

	.mb .box {
		align-self: center;
		max-width: 75%;
	}

	.box.apply {
		flex-direction: column-reverse;
	}

	.wings > div.is-flex {
		flex-direction: column-reverse;
	}

	.wings .points {
		width: 100%;
	}

	.wings .bolder {
		text-align: center;
	}

	.points {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}

	.box.app, .box.apply {
		margin-left: 0;
		margin-right: 0;
	}

	hr.last {
		visibility: hidden;
		margin-bottom: 0;
	}

	footer {
		padding: 0 0.5rem 0 0.5rem !important;
	}

	.roadmap .column {
		padding-top: 0;
	}
}

.mt-minus-7 {
	margin-top: -7rem;
}

@media screen and (min-width: 1024px) {
	.pt-5-desktop {
		padding-top: 1.5rem !important;
	}
}

.glyph {
	height: 16rem;
	background-image: url("roadmap-glyph.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	align-content: end;
	color: black;
	font-size: 24pt !important;
	line-height: 28pt;
	padding-bottom: 56pt;
	z-index: 0;
}

.glyph > strong {
	color: black !important;
	font-size: 42pt !important;
}

.glyph.small {
	height: 10rem;
	font-size: 14pt !important;
	line-height: 16pt;
	padding-bottom: 36pt;
}

.glyph.small > strong {
	color: black !important;
	font-size: 24pt !important;
}

.glyph.smaller {
	filter: brightness(50%);
	height: 6rem;
	font-size: 10pt !important;
	line-height: 12pt;
	padding-bottom: 20pt;
}

.glyph.smaller > strong {
	color: black !important;
	font-size: 16pt !important;
}

@media screen and (max-width: 1283px) {
	.glyph {
		padding-bottom: 40pt;
		font-size: 1pt;
	}
}

@media screen and (max-width: 1023px) {
	.glyph {
		font-size: 20pt !important;
		line-height: 24pt;
		padding-bottom: 34pt;
	}

	.glyph > strong {
		color: black !important;
		font-size: 34pt !important;
	}	
}

.line {
	width: 0.35rem;
	background-image: linear-gradient(#1369a1, #1195b6);
	height: 100%;
	justify-self: center;
	z-index: -2500;
}

.line.small {
	background-image: linear-gradient(#1369a1, rgba(17,149,182, 0.5));
}

.line.smaller {
	filter: brightness(50%);
}

div.column:has(.line) {
	padding-top: 0;
	padding-bottom: 0;
}

.roadmap div {
	font-size: 14pt;
}

.extra-line-height {
	line-height: 26pt;
}

@media screen and (max-width: 1024px) {
	.roadmap .has-text-centered-mobile {
		padding-top: 0.8rem;
		padding-bottom: 0rem;
	}

	.roadmap .has-text-centered-mobile:last-child {
		padding-bottom: 2.2rem;
	}

	.glyph {
		font-size: 24pt !important;
		padding-bottom: 26pt;
		line-height: 32pt;
	}

	.glyph > strong {
		font-size: 44pt !important;
	}

	h1#tokenomics, h1#roadmap {
		font-size: 1.3rem;
	}

	h1#tokenomics, h1#roadmap, h1#ai-tools {
		padding-bottom: 1.54rem;
	}

	footer img.wide {
		width: 11rem !important;
	}
}

@media screen and (max-width: 768px) {
	.glyph {
		font-size: 36pt !important;
		padding-bottom: 48pt;
		line-height: 40pt;
	}

	.glyph > strong {
		font-size: 50pt !important;
	}

	.navbar-end a {
		font-size: 0.7rem;
	}
}