.article-section {
	margin: 1rem 0;
}
.section-header {
	border: var(--border-content-container);
	border-top: unset;
	border-left: unset;
	border-right: unset;
	margin: 0.5rem auto;
	width: 100%;
	font-family:
		Titan One,
		Gill Sans,
		Gill Sans MT,
		Calibri,
		Trebuchet MS,
		sans-serif;
	font-weight: 200;
}
.section-postscriptum {
	font-style: italic;
}
@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 {
	--image-border-rad: 30px;
	--image-border-hover-rad: 10px;
	--image-border: 2px solid var(--color-border);
	--thumbnail-small-width-min: 32px;
	--thumbnail-small-width-max: 80px;
	--thumbnail-small-width: clamp(var(--thumbnail-small-width-min), 100px, var(--thumbnail-small-width-max));
	--thumbnail-small-height: 100px;
	--thumbnail-small-height-max: var(--thumbnail-small-width-max);
	--thumbnail-small-height-min: var(--thumbnail-small-width-min);
	--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: #4f969f;
	--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: hsl(192, 21%, 76%);
	--color-light: hsl(188, 57%, 90%);
	--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: hsl(208, 100%, 97%);
	--text-color-dark: hsl(330, 43%, 5%);
	--text-color-bg: var(--color-body-bg);
	--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-titan-one: "Titan One", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	font-family:
		Itim,
		Trebuchet MS,
		Lucida Sans Unicode,
		Lucida Grande,
		Lucida Sans,
		Arial,
		sans-serif;
}
.font-titan-one {
	font-family: var(--font-titan-one);
}
.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);
}
html {
	font-size: medium;
}
body {
	color: var(--text-color-dark);
}
a {
	color: var(--color-border);
}
p {
	font-size: 1rem;
}
h1 {
	font-size: 1.5rem;
}
h2 {
	font-size: 1.4rem;
	margin: 1rem auto;
}
h3 {
	font-size: 1.3rem;
}
h4 {
	font-size: 1.2rem;
}
h5 {
	font-size: 1.1rem;
}
h6 {
	font-size: 1rem;
}
.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;
	}
	html {
		font-size: large;
	}
}
.header-main {
	position: relative;
	color: var(--text-color-light);
	font-family:
		Titan One,
		Gill Sans,
		Gill Sans MT,
		Calibri,
		Trebuchet MS,
		sans-serif;
}
.header-main > .wave-container-top,
.water-light {
	top: 100%;
}
html {
	min-height: 100%;
	position: relative;
	text-align: left;
}
body {
	display: block;
	width: 100%;
	margin: 0;
	background: var(--color-body-gradient-dark);
	background-size: auto;
	opacity: 1;
}
.p4 {
	padding: 4px;
}
.p8 {
	padding: 8px;
}
.p16 {
	padding: 16px;
}
.p2r {
	padding: 4vw;
}
.p4r {
	padding: 4rem;
}
.m2 {
	margin: 2px;
}
.m4 {
	margin: 4px;
}
.m8 {
	margin: 8px;
}
.m1r {
	margin: 1rem;
}
.m2r {
	margin: 2rem;
}
.m4r {
	margin: 4rem;
}
.m8r {
	margin: 8rem;
}
.flex {
	display: flex;
}
.vflex {
	display: flex;
	flex-direction: row;
}
.align-content-center {
	align-content: center;
}
.justify-content-center {
	justify-content: center;
}
.flex-wrap-h {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.artfight-username {
	display: inline;
	margin-top: 0;
	margin-bottom: 0;
}
.justify-images {
	margin: auto;
	text-align: center;
}
.art-fight-badges-container {
	margin: auto;
	display: block;
}
.art-fight-badges-container > * {
	display: inline-block;
}
.sm-hide,
.md-hide,
.lg-hide {
	visibility: hidden !important;
	display: none !important;
}
.lg-above-hide {
	visibility: visible !important;
	display: unset !important;
}
@media screen and (min-width: 501px) {
	body {
		flex-direction: column;
	}
	.column-left,
	.column-center,
	.column-right {
		margin-left: 1rem;
		margin-right: 1rem;
	}
	.sm-hide {
		visibility: visible !important;
		display: unset !important;
	}
}
@media screen and (min-width: 768px) {
	.to-left {
		align-items: start;
		margin-left: 1rem;
		left: 0;
	}
	.to-right {
		align-items: end;
		margin-left: 1rem;
		right: 0;
	}
	.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;
	}
	.md-hide {
		visibility: visible !important;
		display: unset !important;
	}
}
@media screen and (min-width: 1200px) {
	.lg-hide {
		visibility: visible !important;
		display: unset !important;
	}
	.lg-above-hide {
		visibility: hidden !important;
		display: none !important;
	}
	.xl-no-animation {
		animation: none !important;
	}
	.art-fight-badges-container {
		margin: 0;
		display: block;
	}
	.art-fight-badges-container > * {
		display: block;
	}
	.p2r {
		padding: 2vw;
	}
}
@media screen and (max-width: 501px) {
	.sm-no-animation {
		animation: none !important;
	}
}
@media screen and (max-width: 767px) {
	.md-no-animation {
		animation: none !important;
	}
}
@media screen and (max-width: 1199px) {
	.lg-no-animation {
		animation: none !important;
	}
}
footer {
	padding: 0;
	margin: 0;
	display: flex;
	width: 100%;
	flex-direction: column;
	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;
	}
}
.global-grid {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
	grid-template-areas: "h h h h" "n n n n" "m m m m" "f f f f" "d d d d";
}
.main-grid {
	display: grid;
	width: 100%;
	row-gap: 20px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: "l l l l" "c c c c" "c c c c" "r r r r";
}
.main-grid-area-left {
	grid-area: l;
}
.main-grid-area-center {
	grid-area: c;
}
.main-grid-area-right {
	grid-area: r;
}
.global-grid-area-header {
	grid-area: h;
}
.global-grid-area-navbar {
	grid-area: n;
}
.global-grid-area-main {
	grid-area: m;
}
.global-grid-area-footer {
	grid-area: f;
}
.global-grid-area-decor {
	grid-area: d;
}
@media screen and (min-width: 768px) {
	.global-grid {
		grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
		grid-template-areas: "h h h h" ". n n ." "m m m m" "f f f f" "d d d d";
	}
}
@media screen and (min-width: 1200px) {
	.global-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.main-grid {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas: "l c c r" "l c c r" "l c c r";
	}
}
.content-page {
	position: relative;
	box-sizing: border-box;
	background-color: var(--color-light-50-opacity);
	border-radius: var(--border-radius-content-container-out);
	border: 2px solid var(--color-border);
	height: fit-content;
	z-index: 10;
}
.back-to-welcome-page {
	color: #000;
	position: absolute !important;
	margin-left: 1rem;
	margin-top: 0.6rem;
	left: 0;
	text-decoration: none;
	font-size: 1.5rem;
	font-family: var(--font-titan-one);
}
.navigation-bar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	margin: 0 1rem;
	gap: 1rem;
	justify-content: space-around;
	font-family: var(--font-titan-one);
	font-weight: 200;
}
.blogpost-list {
	list-style: none;
	padding: 0;
	position: relative;
}
.blogpost-list > li {
	margin: 1rem 0;
}
.blogpost-list > li > p {
	margin: 0;
}
.blogpost-listitem-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.blogpost-listitem-header > a > * {
	margin: 0;
}
.quickupdate-list {
	list-style: none;
	position: relative;
}
.quickupdate-list > li {
	margin: 0;
}
.quickupdate-list > li > section {
	margin: 0;
}
.quickupdate-listitem-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.blogpost-list-big {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	list-style-type: none;
	padding: 0;
}
.blogpost-listitem-big > a > img {
	border-radius: var(--image-border-rad);
	transition: all 0.3s;
}
.blogpost-listitem-big > a > img:hover {
	border-radius: var(--image-border-hover-rad);
}
.blogpost-listitem-big-h4 {
	margin-top: 0.5rem;
	margin-bottom: 0.2rem;
}
.blogpost-listitem-big-date {
	margin-top: 0.2rem;
	margin-bottom: 0;
}
@media screen and (min-width: 1200px) {
	.blogpost-list-big {
		grid-template-columns: 1fr 1fr;
	}
}
.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;
}
.user-icon-container {
	margin: auto;
}
.user-icon {
	max-width: 64px;
	max-height: 64px;
	border-radius: 50%;
	border: var(--border-content-container-out);
}
.my-ocs-sign {
	position: absolute;
	display: flex;
	z-index: -100;
}
.my-ocs-sign > h2 {
	position: absolute;
	left: -100px;
	top: 20px;
	transform: rotate(-10deg);
	color: var(--text-color-light);
}
.my-ocs-sign > a {
	position: relative;
	top: 35px;
	left: -100px;
	transform: rotate(20deg);
}
.art-fight-sign {
	position: absolute;
	display: flex;
	z-index: -100;
}
.art-fight-sign > h2 {
	position: absolute;
	right: -130px;
	top: 70px;
	color: var(--text-color-light);
	transform: rotate(10deg);
}
.art-fight-sign > a {
	position: relative;
	transform: scale(-0.8, 0.8) rotate(-10deg);
	right: -100px;
	top: 50px;
}
.gallery-container {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8vw;
	margin: auto;
	height: 100%;
}
.gallery-nav-oc-bigscreen {
	visibility: collapse;
	height: 0;
	width: 0;
}
.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: 100px;
}
.gallery-character-button-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.gallery-character-button {
	border-radius: var(--button-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-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);
	}
}
.image {
	display: block;
	margin: auto;
	max-width: 100%;
	object-fit: cover;
}
.image-border {
	border-radius: var(--image-border-hover-rad);
	border: var(--image-border);
}
.image-tiny {
	min-width: 32px;
	min-height: 32px;
}
.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);
}
@media screen and (min-width: 1200px) {
	.image-border {
		transition: all 0.3s;
		border-radius: var(--image-border-rad);
		border: var(--image-border);
	}
	.image-border:hover {
		border-radius: var(--image-border-hover-rad);
	}
}
:root {
	--button-border-rad: 15px;
	--button-border-size: 3px;
	--fill-speed: 0.2s;
}
.button {
	box-sizing: border-box;
	text-decoration: none;
	background-color: #207785;
	border-radius: 10rem;
	cursor: pointer;
	border-color: var(--color-light);
	border: solid 2px;
	color: var(--text-color-light);
}
@media screen and (min-width: 768px) {
	.button {
		box-sizing: border-box;
		border: solid 2px;
		border-color: #1c181700;
		text-decoration: none;
		color: var(--text-color-dark);
		background-color: unset;
		cursor: pointer;
	}
	.button:hover {
		border-color: var(--color-light);
		border: solid 2px;
		color: var(--text-color-light);
	}
}
.navigation-button {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
@media screen and (min-width: 768px) {
	.navigation-button {
		font-size: 1.5rem;
	}
}
:root {
	--link-width: 64px;
}
.social-media-links-container {
	display: flex;
	margin-top: 1rem;
	margin-bottom: 1rem;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.social-media-link {
	min-width: 24px;
	min-height: 24px;
	width: var(--link-width);
	height: var(--link-width);
	max-width: 48px;
	max-height: 48px;
	border: 2px solid var(--color-light);
}
.social-media-link-icon {
	height: auto;
	max-width: 24px;
	max-height: 24px;
	align-self: center;
	justify-self: center;
}
@media screen and (min-width: 768px) {
	.social-media-link {
		min-width: 24px;
		min-height: 24px;
		width: var(--link-width);
		height: var(--link-width);
		border: 2px none black;
	}
}
@media screen and (min-width: 1200px) {
	.social-media-links-container {
		display: flex;
		margin-top: 1rem;
		margin-bottom: 1rem;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
	}
	.social-media-link {
		max-width: var(--link-width);
		max-height: var(--link-width);
	}
	.social-media-link-icon {
		max-width: 32px;
		max-height: 32px;
	}
}
:root {
	--wave-top-opacity: 0.4;
	--wave-bottom-opacity: 1;
	--wave-top-position: -5vw;
	--wave-bottom-position: 5vw;
}
.wave-container-top {
	position: absolute;
	top: 0;
	width: 100%;
	height: 30vw;
	max-height: 30vw;
	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: 30vw;
	background: no-repeat
		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 500"><path fill="%234f969f" 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.5, 0.4);
	transform-origin: top;
	mix-blend-mode: overlay;
	background-position: 0px;
}
.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;
	background-position: 0px;
}
.wave-bottom:nth-child(2) {
	bottom: -15px;
	opacity: 0.7;
	background-position: 200px;
}
@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;
	}
}
.liquid-button {
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.liquid-button:before {
	content: "";
	position: absolute;
	left: 0%;
	bottom: 0%;
	width: 100%;
	height: 0%;
	background-color: #207785;
	transition: all 0.3s;
	animation: none;
	z-index: -1;
}
.liquid-button:hover:before {
	height: 100%;
}
.liquid-button:after {
	content: "";
	pointer-events: none;
	opacity: 0.6;
	background:
		radial-gradient(circle at 20% 39%, transparent 0, transparent 2px, white 3px, white 4px, transparent 4px),
		radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, white 3px, white 4px, transparent 4px),
		radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, white 5px, white 6px, transparent 6px);
	width: 100%;
	height: 300%;
	top: 0;
	left: 0;
	position: absolute;
	animation: none;
}
.liquid-button:hover:after {
	animation-delay: 0.5s;
	animation: bubbles 5s linear infinite both;
}
@keyframes bubbles {
	0% {
		transform: translate(0);
	}
	to {
		transform: translateY(-66.666%);
	}
}
: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;
}
.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%;
}
.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%);
}
@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) * 3);
	--bubble-starting-offset: -150vh;
	--bubble-rise-duration-base: 25s;
	--bubble-leftRight-duration-base: 8s;
}
.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 linear,
		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 linear,
		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: 90%;
	bottom: 78%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 5s;
	animation:
		rise3 calc(var(--bubble-rise-duration-base) * 0.9) infinite linear,
		leftRight calc(var(--bubble-leftRight-duration-base) * 1.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: 75%;
	bottom: 50%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 2s;
	animation:
		rise2 calc(var(--bubble-rise-duration-base) * 0.7) infinite linear,
		rightLeft calc(var(--bubble-leftRight-duration-base) * 0.8) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
.bubble:nth-child(4) {
	width: var(--bubble-width-lg);
	height: var(--bubble-width-lg);
	left: 18%;
	bottom: 15%;
	bottom: var(--bubble-starting-offset);
	animation-delay: 1.6s;
	animation:
		rise2 var(--bubble-rise-duration-base) infinite linear,
		leftRight calc(var(--bubble-leftRight-duration-base) * 1) infinite alternate ease-out,
		rotation 2s infinite alternate ease-in-out;
}
@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(-85px);
	}
}
@keyframes rightLeft {
	to {
		transform: translate(90px);
	}
}
@keyframes rotation {
	to {
		transform: rotate(6deg);
	}
}
.neocities {
	display: flex;
	align-items: center;
	margin: 0;
}
.neocities:before {
	content: url(https://neocities.org/img/favicon.png);
	display: flex;
	position: relative;
	margin-right: 8px;
	width: 32px;
}
.astro {
	display: flex;
	align-items: center;
	margin: 0;
}
.astro:before {
	content: url(https://raw.githubusercontent.com/withastro/astro/refs/heads/main/examples/basics/public/favicon.ico);
	display: flex;
	position: relative;
	margin-right: 8px;
	width: 32px;
}