@font-face {
	font-family: Chicory;
	src: url(../font/Chiicory/Chiicory-Regular.otf) format("opentype");
}
@font-face {
	font-family: Pretzel;
	src: url(../font/Pretzel_v1.1/OTF/SS\ Pretzel.otf) format("opentype");
	font-style: normal;
	font-weight: 100;
}
@font-face {
	font-family: Pretzel;
	src: url("../font/Pretzel_v1.1/OTF/SS Pretzel Bold.otf") format("opentype");
	font-style: normal;
	font-weight: 500;
	font-weight: 700;
}
:root {
	--thumbnail-small-width-min: 64px;
	--thumbnail-small-width-max: 100px;
	--thumbnail-small-width: clamp(var(--thumbnail-small-width-min), 100px, var(--thumbnail-small-width-max));
	--thumbnail-small-height: 100px;
	--thumbnail-small-height-max: 100px;
	--thumbnail-small-height-min: 64px;
	--thumbnail-medium-width-min: 128px;
	--thumbnail-medium-width-max: 180px;
	--thumbnail-medium-width: clamp(var(--thumbnail-medium-width-min), 100%, var(--thumbnail-medium-width-max));
	--thumbnail-medium-height: 180px;
	--thumbnail-medium-height-max: 180px;
	--thumbnail-medium-height-min: 128px;
	--thumbnail-large-width-min: 256px;
	--thumbnail-large-width-max: 384px;
	--thumbnail-large-width: clamp(var(--thumbnail-large-width-min), 100%, var(--thumbnail-large-width-max));
	--thumbnail-large-height: 256px;
	--thumbnail-large-height-max: 384px;
	--thumbnail-large-height-min: 256px;
	--image-small-width-min: 100px;
	--image-small-width-max: 148px;
	--image-small-width: clamp(var(--image-small-width-min), 100%, var(--image-small-width-max));
	--image-small-height: 148px;
	--image-small-height-max: 148px;
	--image-small-height-min: 100px;
	--image-medium-width-min: 100px;
	--image-medium-width-max: 256px;
	--image-medium-width: clamp(var(--image-medium-width-min), 100%, var(--image-medium-width-max));
	--image-medium-height: 256px;
	--image-medium-height-max: 256px;
	--image-medium-height-min: 100px;
	--image-large-width-min: 100px;
	--image-large-width-max: 512px;
	--image-large-width: clamp(var(--image-small-width-min), 100%, var(--image-small-width-max));
	--image-large-height: 512px;
	--image-large-height-max: 512px;
	--image-large-height-min: 100px;
	--color-body-bg: hsl(189, 50%, 38%);
	--color-body-gradient-light: hsl(178, 47%, 51%);
	--color-body-gradient-dark: hsl(189, 50%, 30%);
	--color-gunmetal: hsl(190, 70%, 13%);
	--color-button: var(--color-border);
	--color-light-50-opacity: hsla(0, 0%, 100%, 0.6);
	--color-light: hsl(188, 57%, 90%);
	--color-background: hsl(170, 76%, 33%);
	--color-border: hsl(190, 64%, 18%);
	--color-abigail-primary: hsl(355, 65%, 25%);
	--color-abigail-secondary: hsl(27, 80%, 75%);
	--color-noah-primary: hsl(221, 65%, 25%);
	--color-noah-secondary: hsl(197, 80%, 82%);
	--color-francis-primary: hsl(4, 65%, 25%);
	--color-francis-secondary: hsl(34, 80%, 70%);
	--color-oscar-primary: hsl(192, 65%, 25%);
	--color-oscar-secondary: hsl(166, 80%, 45%);
	--color-charlie-primary: hsl(277, 80%, 65%);
	--color-charlie-secondary: hsl(293, 27%, 13%);
	--text-color-light: aliceblue;
	--text-color-dark: var(--color-gunmetal);
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;
	--border-content-container: 2px dashed var(--color-border);
	--border-content-container-out: 2px solid var(--color-border);
	--border-radius-content-container-out: 40px;
	--border-radius-content-container-in: 30px;
	font-family:
		Itim,
		Trebuchet MS,
		Lucida Sans Unicode,
		Lucida Grande,
		Lucida Sans,
		Arial,
		sans-serif;
}
.water-light {
	position: absolute;
	width: 100%;
	top: 0;
	box-shadow: 0 100px 700px 150px var(--color-body-gradient-light);
	z-index: -1100;
	opacity: 0.5;
	mix-blend-mode: overlay;
}
.banner-image {
	content: url(/assets/banner/bannertext3.png);
}
a {
	color: var(--color-border);
}
p {
	font-size: medium;
}
h1 {
	font-size: xx-large;
}
h2 {
	font-size: x-large;
	margin: 1rem auto;
}
h3,
h4 {
	font-size: large;
}
h5 {
	font-size: medium;
}
h6 {
	font-size: small;
}
.animation-up-down {
	animation-name: up-down;
	animation-iteration-count: infinite;
	animation-timing-function: steps(2);
	animation-duration: 2s;
}
.animation-up-down-reverse {
	animation-name: up-down-reverse;
	animation-iteration-count: infinite;
	animation-timing-function: steps(2);
	animation-duration: 2s;
}
@keyframes up-down {
	0% {
		transform: translateY(5px);
	}
	to {
		transform: translateY(-10px);
	}
}
@keyframes up-down-reverse {
	0% {
		transform: translateY(-5px);
	}
	to {
		transform: translateY(10px);
	}
}
.animation-idle {
	animation-name: idle;
	animation-iteration-count: infinite;
	animation-timing-function: steps(2);
	animation-duration: 2s;
}
.animation-idle-reverse {
	animation-name: idle-reverse;
	animation-iteration-count: infinite;
	animation-timing-function: steps(2);
	animation-duration: 2s;
}
@keyframes idle {
	0% {
		transform: rotate(5deg);
	}
	to {
		transform: rotate(-10deg);
	}
}
@keyframes idle-reverse {
	0% {
		transform: rotate(-5deg);
	}
	to {
		transform: rotate(10deg);
	}
}
@media screen and (min-width: 501px) {
	:root {
		--thumbnail-medium-width: clamp(64px, 100%, 180px);
		--thumbnail-medium-height: 180px;
		--thumbnail-large-width: clamp(64px, 100%, 384px);
		--thumbnail-large-height: 256px;
	}
}
@media screen and (min-width: 768px) {
	:root {
		--thumbnail-medium-width: clamp(64px, 100%, 180px);
		--thumbnail-medium-height: 180px;
		--thumbnail-large-width: clamp(64px, 100%, 384px);
		--thumbnail-large-height: 256px;
	}
}
header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	color: var(--text-color-light);
	font-family:
		Titan One,
		Gill Sans,
		Gill Sans MT,
		Calibri,
		Trebuchet MS,
		sans-serif;
}
.header-container {
	padding: 1rem 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: center no-repeat;
	background-image: linear-gradient(#0d0d0d), url(/assets/bg.BGrwmuLM.png);
	background-blend-mode: screen;
	background-size: cover;
}
.banner-container {
	max-height: 300px;
	height: clamp(64px, 300px, 20vw);
	width: 100%;
	display: flex;
	justify-content: center;
}
.banner-container > * {
	height: inherit;
}
.banner-figures {
	display: flex;
	flex-wrap: nowrap;
	row-gap: 0px;
	margin: auto;
	justify-content: center;
	width: 80%;
}
.banner-text {
	position: absolute;
	max-height: 300px;
	z-index: 10;
	margin: auto;
}
:root {
	--banner-figures-margin: 8vw;
	--banner-figures-margin-negative: -6vw;
	--banner-figures-margin-large-screen: -90px;
}
.banner-triangle,
.banner-circle {
	position: relative;
	margin: 0 var(--banner-figures-margin-negative) 0 0;
	padding: 0;
}
.banner-rectangle {
	position: relative;
	z-index: 2;
}
.banner-cloud {
	position: relative;
	margin: 0 0 0 var(--banner-figures-margin-negative);
	padding: 0;
	z-index: 1;
}
.banner-hex {
	position: relative;
	margin: 0 0 0 var(--banner-figures-margin-negative);
	padding: 0;
}
@media screen and (min-width: 768px) {
	.header-container h1 {
		font-size: 10vw;
		-webkit-text-stroke: 0.3vw var(--text-color-dark);
		transform: rotate(-2deg);
	}
}
@media screen and (min-width: 1200px) {
	.header-container h1 {
		font-size: 5vw;
		-webkit-text-stroke: 0.2vw var(--text-color-dark);
		transform: rotate(-2deg);
	}
	.banner-triangle,
	.banner-circle {
		margin: 0 var(--banner-figures-margin-large-screen) 0 0;
	}
	.banner-cloud,
	.banner-hex {
		margin: 0 0 0 var(--banner-figures-margin-large-screen);
	}
}
html {
	min-height: 100%;
	position: relative;
}
body {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: 1.5rem;
	background: var(--color-body-gradient-dark);
	background-size: auto;
	opacity: 1;
}
.welcome-main {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	grid-template-areas: ". . . ." "a a a a" ". . . .";
}
section {
	margin: 1vw;
}
#main-nav-bar {
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
}
nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}
.column-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: auto;
}
.section-header {
	border: var(--border-content-container);
	border-top: unset;
	border-left: unset;
	border-right: unset;
	margin: 0.5vw auto;
	padding-bottom: 0.5vw;
	width: 100%;
}
.vflex {
	display: flex;
	flex-direction: row;
}
.content-container-out {
	padding: 0.6rem;
	box-sizing: border-box;
	background-color: var(--color-light-50-opacity);
	border-radius: var(--border-radius-content-container-out);
	margin-top: 1rem;
	margin-bottom: 1rem;
	height: fit-content;
}
.content-container-out-last {
	margin-bottom: auto;
}
.content-container-in {
	border: var(--border-content-container);
	border-radius: var(--border-radius-content-container-in);
	border: none;
}
.welcome-card {
	margin: auto;
	grid-area: a;
	justify-self: center;
	align-self: center;
}
.order-1 {
	order: 2;
}
.order-2 {
	order: 1;
}
.order-3 {
	order: 3;
}
.flex-wrap-h {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.artfight-username {
	margin-top: 0;
	margin-bottom: 0;
}
#miscellaneous,
.sm-hide,
.md-hide,
.lg-hide {
	visibility: hidden;
	display: none;
}
@media screen and (min-width: 501px) {
	body {
		flex-direction: column;
	}
	.welcome-card {
		max-width: 40rem;
	}
	.column-left,
	.column-center,
	.column-right {
		margin-left: 1rem;
		margin-right: 1rem;
	}
	.sm-hide {
		visibility: visible;
		display: inherit;
	}
}
@media screen and (min-width: 768px) {
	.column-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin: auto;
		justify-content: center;
	}
	.column-left {
		width: clamp(10vw, 30vw, 25rem);
	}
	.column-center {
		width: clamp(30vw, 50vw, 100rem);
		gap: 1vw;
	}
	.column-right {
		width: clamp(10vw, 30vw, 25rem);
		gap: 1vw;
	}
	.order-1 {
		order: 1;
	}
	.order-2 {
		order: 2;
	}
	.order-3 {
		order: 3;
	}
	#miscellaneous {
		visibility: visible;
		display: block;
	}
	.md-hide {
		visibility: visible;
		display: inherit;
	}
}
@media screen and (min-width: 1200px) {
	.welcome-header {
		min-height: 20vh;
	}
	.welcome-main {
		grid-template-areas: ". . . ." ". a a ." ". . . .";
	}
	.column-left {
		margin-left: 10rem;
	}
	.column-right {
		margin-right: 10rem;
	}
	.lg-hide {
		visibility: visible;
		display: inherit;
	}
	.xl-no-animation {
		animation: none;
	}
}
@media screen and (max-width: 501px) {
	.sm-no-animation {
		animation: none;
	}
}
@media screen and (max-width: 767px) {
	.md-no-animation {
		animation: none;
	}
}
@media screen and (max-width: 1199px) {
	.lg-no-animation {
		animation: none;
	}
}
footer {
	padding: 0;
	margin: 0;
	display: flex;
	width: 100%;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	color: #f0f8ff;
	gap: 0;
	flex-wrap: wrap-reverse;
	bottom: 0;
}
footer a {
	max-height: 3rem;
	display: block;
	align-self: center;
	color: var(--text-color-light);
}
@media screen and (min-width: 501px) {
	footer {
		flex: auto;
		flex-direction: row;
		max-height: 4rem;
		gap: 3rem;
	}
}
:root {
	--tpos: 5px;
	--tpos-def: 0px;
	--border-rad: 15px;
}
.button-container-column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-content: center;
	justify-content: space-around;
	font-weight: 700;
}
.button-container-row {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-content: center;
	justify-content: space-around;
	font-weight: 700;
}
.button-link {
	margin: auto;
	min-height: 2rem;
	min-width: 2rem;
	cursor: pointer;
	width: 85%;
}
.button-link-content {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	text-decoration: none;
	color: var(--text-color-dark);
	border-radius: var(--border-rad);
	padding: 0.5rem;
	min-height: inherit;
	border: 3px dashed var(--color-button);
	transform: rotate(3deg);
}
.button-link:hover > .button-link-content {
	border-color: var(--color-light);
	background-color: var(--color-button);
	transform: rotate(3deg);
	color: var(--text-color-light);
}
.button-link:hover:nth-child(2n) > .button-link-content {
	transform: rotate(-1deg);
}
.button-link-content img {
	margin: auto;
	flex: 1;
	max-width: 32px;
	max-height: 32px;
	border-radius: 25px;
}
@media screen and (min-width: 501px) {
	.button-link-content {
		background-color: #f0f8ff00;
		transform: rotate(0);
	}
	.button-link-content a {
		color: var(--text-color-dark);
	}
	.button-container-row {
		flex-direction: row;
		flex-wrap: wrap;
	}
}
.social-media-links {
	display: flex;
	margin-top: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.social-media-link-icon {
	height: auto;
	max-width: 24px;
	max-height: 24px;
}
.social-media-simple {
	margin: 0.5rem;
	width: 48px;
	height: 48px;
}
.social-media-simple:hover > .social-media-simple-container {
	transform: rotate(-6deg);
}
.social-media-simple:hover:nth-child(2n) > .social-media-simple-container {
	transform: rotate(6deg);
}
.social-media-simple-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: inherit;
	width: inherit;
	border-radius: 16px;
	background-color: var(--color-button);
}
.social-media-simple-content {
	width: 24px;
	height: 24px;
	padding: 6px;
	border-radius: 12px;
	border: var(--border-content-container);
	border-color: var(--color-light);
	display: flex;
	justify-content: center;
	align-items: center;
}
.icon-container {
	max-width: 100px;
	max-height: 100px;
	margin: 1rem auto;
}
.rotate-container {
	perspective: 400px;
	border-radius: 20px;
}
.rotate-container:hover > .rotate {
	transition: transform 0.5s;
	transform: rotateY(360deg);
}
.rotate {
	transform: rotateY(0);
	transition: transform 0.5s;
}
#icon {
	max-width: 100px;
	max-height: 100px;
	border-radius: 20px;
}
.user-icon-container {
	margin: auto;
}
.user-icon {
	max-width: 64px;
	max-height: 64px;
	border-radius: 50%;
	border: var(--border-content-container-out);
}
.notfoundtext {
	position: relative;
}
.notfoundtext:before {
	content: "";
	width: 2rem;
	height: 2rem;
	display: inline-block;
	background-size: 2.2rem 2.2rem;
	background-image: url(/assets/cry150.DxfBT_Sj.png);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	top: 0.5rem;
}
.notfoundtext:after {
	content: "";
	width: 2rem;
	height: 2rem;
	display: inline-block;
	background-size: 2.2rem 2.2rem;
	background-image: url(/assets/cry150.DxfBT_Sj.png);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	top: 0.5rem;
}
.gallery-container {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8vw;
	margin: auto;
	height: 100%;
}
.gallery-nav-accordion {
	padding: 0.5rem;
	margin: 1rem;
	border: var(--border-content-container);
	border-radius: var(--border-radius-content-container-out);
}
.gallery-nav-oc-bigscreen {
	visibility: collapse;
	height: 0;
	width: 0;
}
.gallery-nav-accordion .gallery-character-button {
	margin: 1rem;
}
.image-a {
	display: block;
	padding: 0;
	margin: 0.2rem;
	text-decoration: none;
	color: var(--color-dark);
}
.image {
	max-width: 100%;
	object-fit: cover;
}
.image-border {
	border-radius: var(--border-rad);
	border: var(--border-content-container-out);
}
.image-small {
	min-width: var(--image-small-width-min);
	min-height: var(--image-small-height-min);
	max-height: var(--image-small-height-max);
}
.image-medium {
	min-width: var(--image-medium-width-min);
	min-height: var(--image-medium-height-min);
	max-height: var(--image-medium-height-max);
}
.image-large {
	min-width: var(--image-large-width-min);
	min-height: var(--image-large-height-min);
	max-height: var(--image-large-height-max);
}
.thumbnail-small {
	min-width: var(--thumbnail-small-width-min);
	min-height: var(--thumbnail-small-height-min);
	max-height: var(--thumbnail-small-height-max);
}
.thumbnail-medium {
	min-width: var(--thumbnail-medium-width-min);
	min-height: var(--thumbnail-medium-height-min);
	max-height: var(--thumbnail-medium-height-max);
}
.thumbnail-large {
	min-width: var(--thumbnail-large-width-min);
	min-height: var(--thumbnail-large-height-min);
	max-height: var(--thumbnail-large-height-max);
}
.gallery-button-container-row {
	display: flex;
	margin-top: 1rem;
	margin-bottom: 1rem;
	gap: 1rem;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	font-weight: 700;
}
.gallery-character-icon {
	max-width: 150px;
}
.gallery-character-button-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.gallery-character-button {
	border-radius: var(--border-rad);
	padding: 0.2rem;
	min-width: 7rem;
	cursor: pointer;
	text-decoration: none;
	border: 3px dashed var(--color-border);
	color: var(--color-dark);
	transform: rotate(3deg);
}
.gallery-character-button * {
	color: var(--text-color-dark);
	text-decoration: none;
}
.gallery-character-button-abi {
	border-color: var(--color-abigail-primary);
	background-color: var(--color-abigail-secondary);
}
.gallery-character-button-abi * {
	color: var(--color-abigail-primary);
}
.gallery-character-button-noah {
	border-color: var(--color-noah-primary);
	background-color: var(--color-noah-secondary);
}
.gallery-character-button-noah * {
	color: var(--color-noah-primary);
}
.gallery-character-button-francis {
	border-color: var(--color-francis-primary);
	background-color: var(--color-francis-secondary);
}
.gallery-character-button-francis * {
	color: var(--color-francis-primary);
}
.gallery-character-button-oscar {
	border-color: var(--color-oscar-primary);
	background-color: var(--color-oscar-secondary);
}
.gallery-character-button-oscar * {
	color: var(--color-oscar-primary);
}
.gallery-character-button-charlie {
	border-color: var(--text-color-light);
	background-color: var(--color-charlie-secondary);
}
.gallery-character-button-charlie * {
	color: var(--text-color-light);
}
@media screen and (min-width: 501px) {
	.gallery-container {
		padding: 0.8rem;
		justify-content: center;
		align-items: center;
		gap: 2vw;
	}
	.gallery-nav-accordion {
		visibility: hidden;
		height: 0;
		margin: 0;
		padding: 0;
		border-width: 0;
	}
	.gallery-nav-oc-bigscreen {
		visibility: visible;
		height: auto;
		width: unset;
	}
	.gallery-button-container-row {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.gallery-character-button {
		padding: 0.5rem;
		min-height: inherit;
		min-width: 6rem;
		transform: rotate(3deg);
	}
	.gallery-character-button * {
		color: var(--color-dark);
	}
	.gallery-character-button-abi * {
		color: var(--color-abigail-primary);
	}
	.gallery-character-button-noah * {
		color: var(--color-noah-primary);
	}
	.gallery-character-button-francis * {
		color: var(--color-francis-primary);
	}
	.gallery-character-button-oscar * {
		color: var(--color-oscar-primary);
	}
	.gallery-character-button-charlie * {
		color: var(--text-color-light);
	}
}
@media screen and (min-width: 1200px) {
	.gallery-container {
		gap: 1vw;
	}
	.gallery-character-button {
		transform: rotate(0);
	}
	.gallery-character-button:hover {
		transform: rotate(3deg);
	}
	.gallery-character-button-abi {
		border-color: var(--color-border);
		background-color: unset;
	}
	.gallery-character-button-abi * {
		color: var(--color-dark);
	}
	.gallery-character-button-abi:hover {
		background-color: var(--color-abigail-secondary);
		border-color: var(--color-abigail-primary);
	}
	.gallery-character-button-abi:hover * {
		color: var(--color-abigail-primary);
	}
	.gallery-character-button-noah {
		border-color: var(--color-border);
		background-color: unset;
	}
	.gallery-character-button-noah * {
		color: var(--color-dark);
	}
	.gallery-character-button-noah:hover {
		background-color: var(--color-noah-secondary);
		border-color: var(--color-noah-primary);
	}
	.gallery-character-button-noah:hover * {
		color: var(--color-noah-primary);
	}
	.gallery-character-button-francis {
		border-color: var(--color-border);
		background-color: unset;
	}
	.gallery-character-button-francis * {
		color: var(--color-dark);
	}
	.gallery-character-button-francis:hover {
		background-color: var(--color-francis-secondary);
		border-color: var(--color-francis-primary);
	}
	.gallery-character-button-francis:hover * {
		color: var(--color-francis-primary);
	}
	.gallery-character-button-oscar {
		border-color: var(--color-border);
		background-color: unset;
	}
	.gallery-character-button-oscar * {
		color: var(--color-dark);
	}
	.gallery-character-button-oscar:hover {
		background-color: var(--color-oscar-secondary);
		border-color: var(--color-oscar-primary);
	}
	.gallery-character-button-oscar:hover * {
		color: var(--color-oscar-primary);
	}
	.gallery-character-button-charlie {
		border-color: var(--color-border);
		background-color: unset;
	}
	.gallery-character-button-charlie * {
		color: var(--color-dark);
	}
	.gallery-character-button-charlie:hover {
		background-color: var(--color-charlie-secondary);
		border-color: var(--text-color-light);
	}
	.gallery-character-button-charlie:hover * {
		color: var(--text-color-light);
	}
}
:root {
	--button-border-rad: 15px;
	--button-border-size: 3px;
}
.button-new-container-column {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-content: center;
	justify-content: space-around;
	font-weight: 700;
}
.button-new-container-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-content: center;
	justify-content: center;
	font-weight: 700;
	margin: 0;
}
.nav-container {
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}
.nav-container > .content-container-in {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	width: 100%;
}
.button-new-link {
	margin: auto;
	min-height: 2rem;
	min-width: 2rem;
	cursor: pointer;
	width: 85%;
}
.nav-link {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	text-decoration: none;
	color: var(--text-color-dark);
	border-radius: var(--button-border-rad);
	padding: 0.3rem;
	min-height: inherit;
	cursor: pointer;
	min-width: 2rem;
	margin: 0.2rem 2rem;
}
.nav-link:hover {
	border-color: var(--color-light);
	background-color: var(--color-button);
	color: var(--text-color-light);
}
.button-new-link-content {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	text-decoration: none;
	color: var(--text-color-dark);
	border-radius: var(--button-border-rad);
	padding: 0.5rem;
	min-height: inherit;
	transform: rotate(3deg);
	cursor: pointer;
	min-width: 2rem;
	margin: 0 2rem;
}
.button-new-link:hover > .button-new-link-content {
	border-color: var(--color-light);
	background-color: var(--color-button);
	transform: rotate(3deg);
	color: var(--text-color-light);
}
.button-new-link:hover:nth-child(2n) > .button-new-link-content {
	transform: rotate(-1deg);
}
.button-new-link-content img {
	margin: auto;
	flex: 1;
	max-width: 32px;
	max-height: 32px;
	border-radius: 25px;
}
@media screen and (min-width: 501px) {
	.button-new-link-content {
		background-color: #f0f8ff00;
		transform: rotate(0);
	}
	.button-new-link-content a {
		color: var(--text-color-dark);
	}
	.button-new-container-row {
		flex-direction: row;
		flex-wrap: wrap;
	}
}
:root {
	--ocean-lights-width-default: clamp(300vh, 150%, 150%);
	--ocean-lights-width-narrow: clamp(290vh, 140%, 140%);
	--ocean-lights-width-wide: clamp(310vh, 160%, 160%);
}
.ocean-lights-container {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1000;
	overflow: hidden;
}
.ocean-lights {
	position: absolute;
	width: var(--ocean-lights-width-default);
	height: 100%;
	background:
		linear-gradient(0.28turn, #3f87a600 51%, #ebf8e1, #f69c3c00 59%), linear-gradient(0.28turn, #3f87a600 60%, #ebf8e1, #f69c3c00 64%),
		linear-gradient(0.28turn, #3f87a600 22%, #ebf8e1, #f69c3c00 25%), linear-gradient(0.28turn, #3f87a600 71%, #ebf8e1, #f69c3c00 79%);
	opacity: 0.2;
	translate: 0%;
	background-size: 100% 100%;
	background-position: center;
	animation-delay: 0s;
	animation:
		ocean-lights-visible alternate infinite 8s ease-in-out,
		ocean-lights-move alternate infinite 30s ease-in-out,
		wave-effect alternate infinite 1s ease-in-out;
}
.ocean-lights:nth-child(2) {
	background: linear-gradient(0.28turn, #3f87a600 2%, #ebf8e1, #f69c3c00 8%), linear-gradient(0.28turn, #3f87a600 37%, #ebf8e1, #f69c3c00 44%);
	translate: -5%;
	animation:
		ocean-lights-visible alternate infinite 4s linear,
		ocean-lights-move alternate-reverse infinite 16s ease-in-out,
		wave-effect alternate-reverse infinite 3s ease-in-out;
	opacity: 0.16;
	animation-delay: 15s;
}
.ocean-lights:nth-child(3) {
	background:
		linear-gradient(0.28turn, #3f87a600 35%, #ebf8e1, #f69c3c00 54%), linear-gradient(0.28turn, #3f87a600 89%, #ebf8e1, #f69c3c00 99%),
		linear-gradient(0.28turn, #3f87a600 8%, #ebf8e1, #f69c3c00 13%);
	animation:
		ocean-lights-visible alternate infinite 5s linear,
		ocean-lights-move2 alternate infinite 25s ease-in-out,
		wave-effect alternate infinite 2s ease-in-out;
	opacity: 0.18;
	animation-delay: 10s;
}
@keyframes ocean-lights-move {
	0% {
		translate: 0%;
		width: var(--ocean-lights-width-default);
	}
	50% {
		width: var(--ocean-lights-width-narrow);
	}
	to {
		translate: -5%;
		width: var(--ocean-lights-width-default);
	}
}
@keyframes ocean-lights-move2 {
	0% {
		translate: 0%;
		width: var(--ocean-lights-width-default);
	}
	50% {
		width: var(--ocean-lights-width-wide);
	}
	to {
		translate: -3%;
		width: var(--ocean-lights-width-default);
	}
}
@keyframes ocean-lights-skew {
	0% {
		transform: skew(0);
	}
	to {
		transform: skew(2deg);
	}
}
@keyframes ocean-lights-visible {
	0% {
		opacity: 0.18;
	}
	40% {
		opacity: 0.1;
	}
	80% {
		opacity: 0.27;
	}
	to {
		opacity: 0;
	}
}
:root {
	--bubble-position: absolute;
	--bubble-width-base: 100px;
	--bubble-width-xs: calc(var(--bubble-width-base) * 0.35);
	--bubble-width-sm: calc(var(--bubble-width-base) * 0.7);
	--bubble-width-md: var(--bubble-width-base);
	--bubble-width-lg: calc(var(--bubble-width-base) * 2);
	--bubble-width-xl: calc(var(--bubble-width-base) * 3);
	--bubble-width-xx: calc(var(--bubble-width-base) * 5);
	--bubble-translateX-left: -85px;
	--bubble-translateX-right: 90px;
	--bubble-starting-offset: -150vh;
	--bubble-ease: linear;
	--bubble-rise-duration-base: 25s;
	--bubble-rise-duration-slow: abs(calc(var(--bubble-rise-duration-base) * 1.4));
	--bubble-rise-duration-normal: var(--bubble-rise-duration-base);
	--bubble-rise-duration-fast: abs(calc(var(--bubble-rise-duration-base) * 0.8));
	--bubble-rise-duration-faster: abs(calc(var(--bubble-rise-duration-base) * 0.6));
	--bubble-leftRight-duration-base: 8s;
	--bubble-leftRight-duration-slow: abs(calc(var(--bubble-rise-duration-base) * 1.4));
	--bubble-leftRight-duration-normal: var(--bubble-leftRight-duration-base);
	--bubble-leftRight-duration-fast: abs(calc(var(--bubble-rise-duration-base) * 0.7));
}
.bubbles {
	position: absolute;
	inset: 0;
	width: 100%;
	z-index: -1000;
	overflow: hidden;
	text-align: center;
}
.bubble {
	position: var(--bubble-position);
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	background: #7095a4;
	box-shadow: 0 0 20px #fff inset;
	border-radius: 50%;
	opacity: 0.1;
	mix-blend-mode: overlay;
	bottom: var(--bubble-starting-offset);
	animation-delay: 2s;
	animation:
		rise var(--bubble-rise-duration-base) infinite var(--bubble-ease),
		leftRight var(--bubble-leftRight-duration-base) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:before {
	content: "";
	display: inline-block;
	position: relative;
	right: 15%;
	top: 6%;
	border-radius: 50%;
	transform: rotate(50deg);
	width: 16%;
	height: 22%;
	background-color: #fff;
}
.bubble:after {
	content: "";
	display: inline-block;
	position: absolute;
	right: 75%;
	top: 25%;
	border-radius: 50%;
	transform: rotate(35deg);
	width: 5%;
	height: 8%;
	background-color: #fff;
}
.bubble:nth-child(1) {
	width: var(--bubble-width-xx);
	height: var(--bubble-width-xx);
	left: -5%;
	bottom: 88%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 1s;
	animation:
		rise3 calc(var(--bubble-rise-duration-base) * 0.7) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(2) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 15%;
	bottom: 15%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 1.6s;
	animation:
		rise2 var(--bubble-rise-duration-normal) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(3) {
	width: var(--bubble-width-md);
	height: var(--bubble-width-md);
	left: 35%;
	bottom: 22%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise calc(var(--bubble-rise-duration-base) * 0.8) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 1.2) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(4) {
	width: var(--bubble-width-md);
	height: var(--bubble-width-md);
	left: 50%;
	bottom: 33%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 2s;
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 0.7) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 0.8) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(5) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 64%;
	bottom: 52%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise calc(var(--bubble-rise-duration-base) * 1.2) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 0.8) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(6) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 62%;
	bottom: 78%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 5s;
	animation:
		rise3 calc(var(--bubble-rise-duration-base) * 0.9) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 1.1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(7) {
	width: var(--bubble-width-sm);
	height: var(--bubble-width-sm);
	left: 25%;
	bottom: 36%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise calc(var(--bubble-rise-duration-base) * 0.4) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(8) {
	width: var(--bubble-width-xx);
	height: var(--bubble-width-xx);
	left: 70%;
	bottom: 69%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 17s;
	animation:
		rise calc(var(--bubble-rise-duration-base) * 1.2) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 0.9) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(9) {
	width: var(--bubble-width-xl);
	height: var(--bubble-width-xl);
	left: 25%;
	bottom: 27%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 8s;
	animation:
		rise3 calc(var(--bubble-rise-duration-base) * 1.5) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 0.9) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(10) {
	width: var(--bubble-width-xl);
	height: var(--bubble-width-xl);
	left: 93%;
	bottom: 10%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 1s;
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 0.7) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 1.1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(11) {
	width: var(--bubble-width-xs);
	height: var(--bubble-width-xs);
	left: 23%;
	bottom: 72%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 0.45) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 0.7) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(12) {
	width: var(--bubble-width-xs);
	height: var(--bubble-width-xs);
	left: 88%;
	bottom: 55%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 20s;
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 0.65) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 0.6) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(13) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 77%;
	bottom: 12%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise3 calc(var(--bubble-rise-duration-base) * 0.7) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 1.1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(14) {
	width: var(--bubble-width-xx);
	height: var(--bubble-width-xx);
	left: 34%;
	bottom: 86%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 0.5s;
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 1.1) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 0.7) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(15) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 6%;
	bottom: 70%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise calc(var(--bubble-rise-duration-base) * 1) infinite var(--bubble-ease),
		rightLeft calc(var(--bubble-leftRight-duration-base) * 1.1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(16) {
	width: var(--bubble-width-xs);
	height: var(--bubble-width-xs);
	left: 67%;
	bottom: 25%;
	bottom: var(--bubble-starting-offset);
	animation:
		rise calc(var(--bubble-rise-duration-base) * 0.5) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 0.8) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(17) {
	width: var(--bubble-width-md);
	height: var(--bubble-width-md);
	bottom: 50%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 2s;
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 0.5) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 2) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(18) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 95%;
	bottom: 20%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 1s;
	animation:
		rise calc(var(--bubble-rise-duration-base) * 0.5) infinite var(--bubble-ease),
		leftRight calc(var(--bubble-leftRight-duration-base) * 2) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
@keyframes rise1 {
	0% {
		bottom: var(--bubble-starting-offset);
	}
	to {
		bottom: 100%;
	}
}
@keyframes rise2 {
	0% {
		bottom: calc(var(--bubble-starting-offset) + 300px);
	}
	to {
		bottom: 100%;
	}
}
@keyframes rise3 {
	0% {
		bottom: calc(var(--bubble-starting-offset) + 600px);
	}
	to {
		bottom: 100%;
	}
}
@keyframes leftRight {
	to {
		transform: translate(var(--bubble-translateX-left));
	}
}
@keyframes rightLeft {
	to {
		transform: translate(var(--bubble-translateX-right));
	}
}
@keyframes rotation {
	to {
		transform: rotate(6deg);
	}
}
:root {
	--wave-top-opacity: 0.1;
	--wave-bottom-opacity: 1;
	--wave-top-position: -5vw;
	--wave-bottom-position: 5vw;
}
.wave-container-top {
	position: absolute;
	top: 100%;
	width: 100%;
	height: 20vw;
	max-height: 20vw;
	overflow-y: visible;
	z-index: -900;
	overflow: hidden;
}
.wave-container-top-welcome {
	position: absolute;
	top: 0;
	width: 100%;
	height: 20vw;
	max-height: 20vw;
	overflow-y: visible;
	z-index: -900;
	overflow: hidden;
}
.wave-container-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20vw;
	max-height: 20vw;
	overflow-y: visible;
	z-index: -900;
	overflow: hidden;
}
.wave-top {
	position: absolute;
	width: 100%;
	height: 100%;
	max-height: 20vw;
	background: no-repeat
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 500"><path fill="%23a7d4d7" fill-opacity="1" d="M0,64L17.1,64C34.3,64,69,64,103,106.7C137.1,149,171,235,206,256C240,277,274,235,309,186.7C342.9,139,377,85,411,80C445.7,75,480,117,514,154.7C548.6,192,583,224,617,202.7C651.4,181,686,107,720,69.3C754.3,32,789,32,823,58.7C857.1,85,891,139,926,149.3C960,160,994,128,1029,117.3C1062.9,107,1097,117,1131,144C1165.7,171,1200,213,1234,218.7C1268.6,224,1303,192,1337,154.7C1371.4,117,1406,75,1423,53.3L1440,32L1440,0L1422.9,0C1405.7,0,1371,0,1337,0C1302.9,0,1269,0,1234,0C1200,0,1166,0,1131,0C1097.1,0,1063,0,1029,0C994.3,0,960,0,926,0C891.4,0,857,0,823,0C788.6,0,754,0,720,0C685.7,0,651,0,617,0C582.9,0,549,0,514,0C480,0,446,0,411,0C377.1,0,343,0,309,0C274.3,0,240,0,206,0C171.4,0,137,0,103,0C68.6,0,34,0,17,0L0,0Z"></path></svg>');
	background-size: cover;
	transform: scale(2, 0.5);
	transform-origin: top;
	mix-blend-mode: overlay;
	opacity: var(--wave-top-opacity);
	animation: waveAnimation-top 5s alternate-reverse infinite ease-in-out;
	background-position: var(--wave-top-position) 0px;
}
.wave-top:nth-child(2) {
	opacity: 0.05;
	animation-delay: 0.5s;
}
.wave-bottom {
	position: absolute;
	width: 100%;
	height: 100%;
	max-height: 20vw;
	background: no-repeat
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%231d525d" fill-opacity="1" d="M0,64L17.1,64C34.3,64,69,64,103,106.7C137.1,149,171,235,206,256C240,277,274,235,309,186.7C342.9,139,377,85,411,80C445.7,75,480,117,514,154.7C548.6,192,583,224,617,202.7C651.4,181,686,107,720,69.3C754.3,32,789,32,823,58.7C857.1,85,891,139,926,149.3C960,160,994,128,1029,117.3C1062.9,107,1097,117,1131,144C1165.7,171,1200,213,1234,218.7C1268.6,224,1303,192,1337,154.7C1371.4,117,1406,75,1423,53.3L1440,32L1440,320L1422.9,320C1405.7,320,1371,320,1337,320C1302.9,320,1269,320,1234,320C1200,320,1166,320,1131,320C1097.1,320,1063,320,1029,320C994.3,320,960,320,926,320C891.4,320,857,320,823,320C788.6,320,754,320,720,320C685.7,320,651,320,617,320C582.9,320,549,320,514,320C480,320,446,320,411,320C377.1,320,343,320,309,320C274.3,320,240,320,206,320C171.4,320,137,320,103,320C68.6,320,34,320,17,320L0,320Z"></path></svg>');
	background-size: cover;
	transform: scale(2, 0.5);
	transform-origin: bottom;
	animation: waveAnimation-bottom 5s alternate infinite ease-in-out;
	background-position: calc(var(--wave-bottom-position) * -1) 0;
}
.wave-bottom:nth-child(2) {
	bottom: -15px;
	opacity: 0.7;
	animation-delay: 1.5s;
}
@keyframes waveAnimation-top {
	0% {
		background-position: var(--wave-top-position) 0px;
	}
	25% {
		background-position-y: -20px;
	}
	50% {
		background-position-y: 0;
	}
	75% {
		background-position-y: -20px;
	}
	to {
		background-position: calc(var(--wave-top-position) * -1) 0px;
	}
}
@keyframes waveAnimation-bottom {
	0% {
		background-position: calc(var(--wave-bottom-position) * -1) 0px;
	}
	25% {
		background-position-y: 20px;
	}
	50% {
		background-position-y: 0;
	}
	75% {
		background-position-y: 20px;
	}
	to {
		background-position: var(--wave-bottom-position) 0px;
	}
}
@media screen and (min-width: 768px) {
	.wave-top {
		animation: waveAnimation-top 5s alternate-reverse infinite ease-in-out;
		background-position: calc(var(--wave-top-position) * -1) 0px;
	}
	.wave-bottom {
		animation: waveAnimation-bottom 5s alternate infinite ease-in-out;
		background-position: calc(var(--wave-bottom-position) * -1) 0px;
	}
}