:root {
    --shadow-offset-x: 0.06em;
    --shadow-offset-y: 0.06em;
}
@font-face {
  font-family: 'NerkoOne';
  src: 	url('fonts/NerkoOne-Regular.woff2') format('woff2'),
  		url('fonts/NerkoOne-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
a { text-decoration: none; }
* { 
	cursor: url("images/Cursor_Pointer.png") 8 8, auto;
	margin:0;
	padding:0;

}
a, a *, button, button *, input, label {
	cursor: url("images/Cursor_Hand.png") 4 6, auto;
}
html {
	scroll-behavior: smooth;
	overflow-x: clip;
}
body {
	position: relative;
	overflow-x: clip;
	width: 100%;
	background-color: #ffffff;
	color: #ffffff;
	font-family: "NerkoOne";
	font-size: 36px;
	letter-spacing: normal; 
	/*transform: translate(0px, 0px);*/
}
h1, h2, h3, h4, h5, h6 {
	text-align: center;
	font-family: "NerkoOne";
	font-weight: normal;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #e52532;
}
h1 {
	font-size: 4.16em;
}
h2 {
	font-size: 2.77em;
}
h3 {
	font-size: 1.78em;
}
h4 {
	font-size: 1.52em;
}
h5 {
	font-size: 0.9em;
}
h6 {
	font-size: 0.777em;
}
p {
	width: 100%;
}
header, nav, main, aside, footer, section, article {
	display:block;
}
article {
	position: relative;
}
section {
	width: auto;
}
button {
	font-family: "NerkoOne", sans-serif;
	padding: 6px 16px 3px 16px;
	font-size: 24px;
	line-height: 24px;
	background-color: #ffffff00;
	border-color: #ffffff;
	color: #ffffff;
	text-shadow: 0px 2px 0px rgba(255, 255, 255, 0.5);
	border: 3px solid;
	transition: 333ms ease;
	box-shadow: 0px 2px 0 #00000080;
}
button:hover {
	background-color: #ffffff80;
	transition: 50ms ease;
}
button:active {
	transition: 50ms ease;
	background-color: #ffc600;
	text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
}
button span {
	display: inline-block;
	transition: 333ms ease;
}
button:active span {
	transform: translateY(2px);
	transition: 50ms ease;
}
button:disabled {
	color: #000000;
	border-color: #00000000;
	background-color: #ffc600;
	text-shadow: none;
	pointer-events: none;
	box-shadow: 0px 0px;
}
.logo-text {
	font-family: "NerkoOne";
	color:#ffffff;
	text-shadow: 0px 0px;
	font-weight: normal;
}
.logo-text span {
	display: inline-block;
	color:#ffc600;
}
main {
	display: flex;
    flex-direction: column;
	max-width: 1746px;
	/* save space for the footer */
	min-height: calc(100vh - 315px);
	margin: auto;
	/* leave space for top bar*/
	padding: 62px 0px 0px 0px;
	overflow-y: clip;
}
header {
	position: fixed;
	z-index: 100;
	height: 62px;
	width: 100%;
	background-color: #56a9e9;
	box-shadow: 0px var(--shadow-offset-y) #56a9e980;
}
#menu {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #56a9e9;
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	display: flex;
    flex-direction: column;
	transition: 333ms ease;
}

#menu > div:nth-of-type(1) {
	height: 65px;
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}
#menu > div:nth-of-type(2) {
	display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;
	gap: 42px;
	flex: 1 1 auto;
}
#menu > div:nth-of-type(3) {
	height: 220px;
	flex: 0 0 auto;
}
#menu.open {
	opacity: 1;
	pointer-events: all;
}
#menu #close-menu {
	position: absolute;
	right: 10px;
	top: 10px;
}
#menu-button {
	position: absolute;
	right: 10px;
	top: 10px;
	display: none;
	pointer-events: none;
}
#menu .logo-text {
	font-size: 30px;
	align-self: center;
}
#menu #join-our-journey {
	padding-top: 20px;
	color:#ffffff;
}
#top-bar-logo {
	position: absolute;
	top: 0px;
	left: 20px;
	font-size: 28px;
	height: 100%;
	gap: 10px;
	display: flex;
	align-items: center;
	z-index: 201;
}
#top-bar-logo img {
	filter: drop-shadow(2px 2px 2px #000000c0);
}
#top-bar-logo:hover .logo-text span {
	animation: bounce 333ms forwards;
}
#top-bar-logo .logo-text span:nth-child(2) {
  	animation-delay: 0.15s;
}
@keyframes bounce {
  0%   { transform: translate(0px, 0px) }
  50%  { transform: translate(0px, -10px) }
  100% { transform: translate(0px, 0px) }
}
#top-bar {
	height: 100%;
	gap: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#top-bar button {
	padding: 3px 16px 3px 16px;
	font-size: 24px;
	line-height: 24px;
	box-shadow: 0px 2px 0 #ffffff80;
}
#top-bar button:disabled {
	box-shadow: 0px 0px;
}
#banner {
	padding: 60px 0px 0px 0px;
	display: flex;
  	justify-content: center;
  	align-items: flex-end;
}
#banner .bg {
	background-color: #56a9e9;
}
#multimon {
	position: relative;
	aspect-ratio: 1.182692;
	width: 246px;
	height: auto;
	filter: drop-shadow(5px 5px 5px #000000c0);
}
#speech-bubble {
	position: absolute;
	top: 0px;
	right: calc(100% + 20px);
	padding: 20px;
	border-radius: 30px;
	background-color: #000000;
	display: inline-block;
	white-space: nowrap;
	opacity: 0;
	transition: 333ms ease;
}
#speech-bubble::after {
	content: "";
	position: absolute;
	bottom: -35px;
	right: -36px;
	transform: skewX(19deg) rotate(326deg);
	border-width: 30px;
	border-style: solid;
	/* Trick to create the triangle, element is 100% border, paint 3 sides as transparent */
	border-color: #000000 transparent transparent transparent;
}
footer {
	position: relative;
}
footer p {
	color: #ffffff;
}
footer .footer-bg {
	background-color: #56a9e9;
}
footer .footer-bg svg {
	position: absolute;
	top: -233px;
	left:50%;
	transform: translate(calc(-50% + 0px), 0px);
	overflow-y: hidden;
}
footer .footer-bg #round {
	position: absolute;
	top: -233px;
	left:50%;
	transform: translate(calc(-50% + 0px), 0px);
	overflow-y: hidden;
}
footer .footer-bg box {
	display: block;
	position: absolute;
	top: 20px;
	width: 120vw;
	height: calc(100% - 20px);
	background-color: #000000;
}
footer .footer-bg .logo {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	transform: translate(calc(-50% + 0px), -150px);
}
footer .footer-bg .logo img {
	position: absolute;
	width: 158px;
	left: 50%;
	bottom: 36px;
	transform: translate(-50%, 0px);
}
footer .footer-bg .logo .logo-text {
	position: absolute;
	left: 50%;
	bottom: 0px;
	width: 200px;
	font-size: 33px;
	transform: translate(-50%, 0px);
}
#join-our-journey {
	position:relative;
	padding: 60px 0px 70px 0px;
	display: flex;
  	flex-direction: column;
  	align-items: center;
	gap: 50px;
}
#join-our-journey p {
	width: auto;
}
#join-our-journey .squig-highlight::before {
	background-image: url("images/yellow_line_002.svg");
	bottom: -22px;
	width: 120%;
}
#join-our-journey-buttons {
	flex-direction: row;
	gap: 30px;
}
#join-our-journey-buttons > div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 30px;
}
#join-our-journey-buttons > div > *:hover::after, #join-our-journey-buttons > div > a > *:hover::after {
	background-color: #ffc600;
}
#join-our-journey #x {
	width: 37.32px;
	height: 37.32px;
	background-image: url("images/icons/x.svg");
}
#join-our-journey #x::after {
	mask-image: url("images/icons/x.svg");
}
#join-our-journey #tiktok {
	width: 37.6px;
	height: 42.96px;
	background-image: url("images/icons/tiktok.svg");
}
#join-our-journey #tiktok::after {
	mask-image: url("images/icons/tiktok.svg");
}
#join-our-journey #instagram {
	width: 40px;
	height: 40px;
	background-image: url("images/icons/instagram.svg");
}
#join-our-journey #instagram::after {
	mask-image: url("images/icons/instagram.svg");
}
#join-our-journey #youtube {
	width: 44.57px;
	height: 31.46px;
	background-image: url("images/icons/youtube.svg");
}
#join-our-journey #youtube::after {
	mask-image: url("images/icons/youtube.svg");
}
#join-our-journey #kofi {
	width: 53px;
	height: 42px;
	background-image: url("images/icons/kofi.svg");
}
#join-our-journey #kofi::after {
	mask-image: url("images/icons/kofi.svg");
}
#join-our-journey #discord {
	width: 50.17px;
	height: 37.97px;
	background-image: url("images/icons/discord.svg");
}
#join-our-journey #discord::after {
	mask-image: url("images/icons/discord.svg");
}
#join-our-journey #patreon {
	width: 39.03px;
	height: 42.96px;
	background-image: url("images/icons/patreon.svg");
}
#join-our-journey #patreon::after {
	mask-image: url("images/icons/patreon.svg");
}
#join-our-journey > p:nth-of-type(2) {
	font-size: 0.7em;
}
.clickable {
	cursor: url("images/Cursor_Hand.png") 4 6, auto;
}
.hover-overlay {
	position:relative;
	transition: 666ms;
}
.hover-overlay:hover {
	transform: scale(1.1);
	transition: 10ms;
}
.hover-overlay::after {
	content: "";
	background-color: #ffc60000;
	position: absolute;
  	inset: 0;
  	mask-size: cover;
  	mask-repeat: no-repeat;
	transition: 666ms;
}
.hover-overlay:hover::after {
	transform: scale(1.1);
	transition: 10ms;
}
.bg, .footer-bg {
	position: absolute;
	width:120vw;
	top: 0;
  	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: -10;
}
.bg > * {
	position: absolute;
	left: 50%;
	transform: translate(calc(-50% - 0px), 0px);
}
.seperator {
	border: 2px solid;
	margin: 15px 0 15px 0;
}
.horizontal {
	display: flex;
	align-items: center;
}
.vertical {
	display: flex;
	justify-content: center;
}
.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.relative {
	position: relative;
}
.box-highlight-yellow, .box-highlight-yellow-no-hover {
	color: #000000;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #ffffff;
}
.box-highlight-yellow::before, .box-highlight-yellow-no-hover::before {
	background-color: #ffc600;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #ffc60080;
}
.box-highlight-yellow:hover::before {
	background-color: #e52532;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #e5253280;
}
.box-highlight-red, .box-highlight-red-no-hover {
	color: #ffffff;
	text-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #000000;
}
.box-highlight-red::before, .box-highlight-red-no-hover::before {
	background-color: #e52532;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #e5253280;
}
.box-highlight-red:hover::before {
	background-color: #56a9e9;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #56a9e980;
}
.box-highlight-blue, .box-highlight-blue-no-hover {
	color: #ffffff;
}
.box-highlight-blue::before, .box-highlight-blue-no-hover::before {
	background-color: #56a9e9;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #56a9e980;
}
.box-highlight-blue:hover::before {
	background-color: #ffc600;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #ffc60080;
}
.box-highlight-black {
	color: #ffc600;
}
.box-highlight-black:before {
	background-color: #000000;
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) #00000080
}
.box-highlight, .box-highlight-red, .box-highlight-blue, .box-highlight-yellow, .box-highlight-black, .box-highlight-red-no-hover, .box-highlight-yellow-no-hover, .box-highlight-blue-no-hover {
	display: inline-block;
	position: relative
}
.box-highlight::before, .box-highlight-red::before, .box-highlight-blue::before, .box-highlight-yellow::before, .box-highlight-black::before, .box-highlight-red-no-hover::before, .box-highlight-yellow-no-hover::before, .box-highlight-blue-no-hover::before  {
	content: "";
	position: absolute;
  	top: 5px;
  	left: 50%;
  	width: 110%;
  	height: 90%;
	transform: translate(-50%, 0%) rotate(-2deg);
	transform-origin: center;
	z-index: -1;
	transition: 333ms;
}
.box-highlight-reverse::before {
	transform: translate(-50%, 0%) rotate(2deg);
}
.box-highlight-reverse.box-highlight-black::before {
	box-shadow: calc(var(--shadow-offset-x) * -1) var(--shadow-offset-y) #00000080
}
.box-highlight-reverse.box-highlight-red::before, .box-highlight-reverse.box-highlight-red-no-hover::before  {
	box-shadow: calc(var(--shadow-offset-x) * -1) var(--shadow-offset-y) #e5253280;
}
.box-highlight-reverse.box-highlight-yellow::before, .box-highlight-reverse.box-highlight-yellow-no-hover::before  {
	box-shadow: calc(var(--shadow-offset-x) * -1) var(--shadow-offset-y) #ffc60080;
}
.box-highlight-reverse.box-highlight-blue::before, .box-highlight-reverse.box-highlight-blue-no-hover::before  {
	box-shadow: calc(var(--shadow-offset-x) * -1) var(--shadow-offset-y) #56a9e980;
}
.box-highlight:hover::before, .box-highlight-red:hover::before, .box-highlight-blue:hover::before, .box-highlight-yellow:hover::before, .box-highlight-black:hover::before {
	transition: 50ms;
}
.squig-highlight {
	display: inline-block;
	position: relative;
}
.squig-highlight::before {
	content: "";
	position: absolute;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
  	bottom: -20px;
  	left: 50%;
  	width: 130%;
  	height: 100%;
	transform: translate(-50%, 0%);
	transform-origin: center;
	z-index: -1;
}
.yellow-shadow {
	box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) 0 #ffc60080;
}
.left-header {
	display: flex;
    flex-direction: row;
    gap: 20px;
}
.left-header > div {
	display: flex;
    flex-direction: column;
	align-items: start;
	gap: 20px;
}
.left-header > div > h2 {
	padding: 0px 0px 0px 0px;
}
.right-header {
	display: flex;
    flex-direction: row-reverse;
	align-items: end;
    gap: 25px;
}
.right-header > div {
	display: flex;
    flex-direction: column;
	align-items: end;
}
.right-header > div > h2 {
	padding: 0px 0px 0px 0px;
}
.right-header > div > h2:nth-of-type(2) {
	margin-top: -20px;
}
.middle-header {
	width: 900px;
	text-align: center;
	margin: auto;
}
.header-white span {
	color: #ffffff;
}
.left-text {
	color: #000000;
	display: flex;
	justify-content: start;
}
.left-text .box-highlight-blue-no-hover {
	padding: 40px 20px 70px 20px;
}
.right-text {
	display: flex;
	justify-content: end;
}
.right-text p {
	margin: 0px 40px 0px auto;
}
.right-text .box-highlight-blue-no-hover {
	padding: 40px 20px 70px 20px;
}
.middle-text {
	text-align: center;
	margin: 0px auto 0px auto;
	color: #000000;
}
.middle-text p {
	text-align: center;
	margin: 0px auto 0px auto;
}
.spacing {
	height: 184px;
	pointer-events: none;
}
.bob-up-down {
	position: relative;
}
.bob-up-down:hover {
	background-color: #000000;
	animation: up-down 1s ease-in-out infinite alternate;
}
@keyframes up-down {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
	33% {
		transform: translate(0px, 10px) rotate(10deg);
	}
    66% {
        transform: translate(0px, 10px) rotate(-10deg);
    }
	100% {
        transform: translate(0px, 10px) rotate(0deg);
    }
}

@media (max-width : 1746px) {
	body {
		font-size: 28px;
	}
	main {
		max-width: 800px;
		padding: 62px 15px 0px 15px;
	}
	#multimon {
		width: 220px;
	}
	#speech-bubble {
		width: 200px;
		white-space: unset;
		text-align: center;
	}
	.squig-highlight::before {
		bottom: -15px;
		width: 115%;
	}
	.left-header {
		align-items: center;
		flex-direction: column;
	}
	.left-header > div {
		align-items: center;
	}
	.right-header {
		align-items: center;
		flex-direction: column;
	}
	.right-header > div {
		align-items: center;
		gap: 20px;
	}
	.left-text p {
		margin: auto;
	}
	.middle-header {
		width: 100%;
	}
}

@media (max-width: 1170px) {
	#top-bar {
		gap: 10px;
		justify-content: flex-end;
		width: calc(100% - 10px);
	}
	#top-bar button {
		padding: 6px 16px 3px 16px;
		font-size: 18px;
		line-height: 22px;
		padding: 6px 16px 3px 16px;
	}
	#top-bar-logo {
		gap: 10px;
		justify-content: start;
		align-items: center;
	}
}

@media (max-width: 800px) {
	#top-bar-logo .logo-text {
		display: none;
	}
}
@media (max-width : 734px) {
	main {
		padding-top: 30px;
	}
	#banner {
		justify-content: end;
		padding-right: 40px;
	}
	#multimon {
		width: 150px;
	}
	#speech-bubble {
		width: 150px;
	}
}
@media (max-width: 660px) {
	:root {
		--shadow-offset-x: 2px;
		--shadow-offset-y: 2px;
	}
	body {
		font-size: 20px;
	}
	main {
		min-height: calc(100vh - 249px - 65px);
	}
	header {
		background-color: #ffffff00;
		background: linear-gradient(to bottom, #56a9e9, #56a9e900);
		box-shadow: none;
	}
	#top-bar {
		display: none;
		pointer-events: none;
	}
	#menu-button {
		display: block;
		pointer-events: all;
	}
	#top-bar button {
		font-size: 8px;
		line-height: 14px;
		padding: 2px 3px 2px 3px;
	}
	#join-our-journey {
		padding: 40px 0px 50px 0px;
		gap: 34px;
	}
	footer .footer-bg .logo {
		width: 70px;
		height: 70px;
		transform: translate(calc(-50% + 0px), -36px);
	}
	footer .footer-bg #round {
		width: 850px;
		top: -100px;
	}
	footer .footer-bg .logo img {
		width: 70px;
		bottom: 16px;
		transform: translate(-50%, 0px);
	}
	footer .footer-bg .logo .logo-text {
		font-size: 15px;
	}
	#join-our-journey-buttons {
		flex-direction: column;
		gap: 30px;
	}
	#join-our-journey-buttons > div {
		gap: 30px;
	}
	.right-text .box-highlight-blue-no-hover {
		padding: 10px 20px 20px 20px;
	}
	.left-text .box-highlight-blue-no-hover {
		padding: 10px 20px 20px 20px;
	}
	.box-highlight::before, .box-highlight-red::before, .box-highlight-blue::before, .box-highlight-yellow::before, .box-highlight-black::before, .box-highlight-red-no-hover::before, .box-highlight-yellow-no-hover::before, .box-highlight-blue-no-hover::before  {
		top: -1%;
		height: 100%;
	}
}
@media (max-width: 408px) {
	#banner {
		padding-right: 0px;
	}
}
@media (max-width: 370px) {
	#speech-bubble {
		width: 120px;
		font-size: 16px;
	}
}