/* copyright © 2022, calebwebdesigner */

/*///////////////////////////////*/
/*///// DEFAULTS/PAGE-WIDE ///// */
@font-face {
	font-family: 'Libre Franklin';
	src: url('../asset/font/Libre_Franklin/LibreFranklin-Regular.woff2') format('woff2'), url('../asset/font/Libre_Franklin/LibreFranklin-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Libre Franklin';
	src: url('../asset/font/Libre_Franklin/LibreFranklin-SemiBold.woff2') format('woff2'), url('../asset/font/Libre_Franklin/LibreFranklin-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Libre Franklin';
	src: url('../asset/font/Libre_Franklin/LibreFranklin-Bold.woff2') format('woff2'), url('../asset/font/Libre_Franklin/LibreFranklin-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Englebert';
	src: url('../asset/font/Englebert/Englebert-Regular.woff2') format('woff2'), url('../asset/font/Englebert/Englebert-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Chelsea Market';
	src: url('../asset/font/Chelsea_Market/ChelseaMarket-Regular.woff2') format('woff2'), url('../asset/font/Chelsea_Market/ChelseaMarket-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* {
	cursor: default;
	font-family: 'Libre Franklin', Arial, sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
html {
	color: #ffffff;
	font-size: 16px;
}
body {
	overflow-x: auto;
	background-image: url("../asset/img/landing-bg.png");
	background-repeat: repeat;
	background-size: 600px 700px;
	/* make footer stick to the bottom */
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
h1 {
	font-family: 'Chelsea Market', Arial, sans-serif;
	font-size: 5rem;
}
h2 {
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 3rem;
}
h3 {
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 2rem;
}
p {
	font-family: 'Libre Franklin', Arial, sans-serif;
	font-size: 1rem;
	white-space: pre-line;
}

/* change colour of highlighted text */
::selection {
	color: #00bcff;
	background: #fff;
}

.socials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 44px;
}
.socials img {
	height: 32px;
	width: 32px;
}
/* if not on a touch device then produce hover effects */
@media (hover: hover) and (pointer: fine) {
	.insta:hover {
		transform: scale(1.2, 1.2) rotate(7deg);
	}
	.github:hover {
		transform: scale(1.2, 1.2) rotate(-7deg);
	}
	/* set values consistent with both imgs */
	.socials img:hover {
		cursor: pointer;
		transition: transform 150ms;
	}
}

@keyframes glow-q-mark {
	0% {
		text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #009063, 0 0 13px #009063, 0 0 15px #009063, 0 0 18px #009063;
	}
	50% {
		text-shadow: 0 0 5px #fff, 0 0 8px #fff, 0 0 15px #009063, 0 0 20px #009063, 0 0 25px #009063, 0 0 30px #009063, 0 0 35px #009063;
	}
	100% {
		text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #009063, 0 0 13px #009063, 0 0 15px #009063, 0 0 18px #009063;
	}
}
@keyframes glow-text-white {
	0% {
		text-shadow: 0 0 2px #ffffff95, 0 0 5px #ffffff95, 0 0 10px #ffffff95, 0 0 13px #ffffff95, 0 0 15px #ffffff95, 0 0 18px #ffffff95;
	}
	50% {
		text-shadow: 0 0 5px #ffffff95, 0 0 8px #ffffff95, 0 0 15px #ffffff95, 0 0 20px #ffffff95, 0 0 25px #ffffff95, 0 0 30px #ffffff95, 0 0 35px #ffffff95;
	}
	100% {
		text-shadow: 0 0 2px #ffffff95, 0 0 5px #ffffff95, 0 0 10px #ffffff95, 0 0 13px #ffffff95, 0 0 15px #ffffff95, 0 0 18px #ffffff95;
	}
}
@keyframes glow-text-green {
	0% {
		text-shadow: 0 0 2px #00c780, 0 0 5px #00c780, 0 0 10px #00c780, 0 0 13px #00c780, 0 0 15px #00c780, 0 0 18px #00c780;
	}
	50% {
		text-shadow: 0 0 5px #00c780, 0 0 8px #00c780, 0 0 15px #00c780, 0 0 20px #00c780, 0 0 25px #00c780, 0 0 30px #00c780, 0 0 35px #00c780;
	}
	100% {
		text-shadow: 0 0 2px #00c780, 0 0 5px #00c780, 0 0 10px #00c780, 0 0 13px #00c780, 0 0 15px #00c780, 0 0 18px #00c780;
	}
}
@keyframes glow-text-red {
	0% {
		text-shadow: 0 0 2px #c70000, 0 0 5px #c70000, 0 0 10px #c70000, 0 0 13px #c70000, 0 0 15px #c70000, 0 0 18px #c70000;
	}
	50% {
		text-shadow: 0 0 5px #c70000, 0 0 8px #c70000, 0 0 15px #c70000, 0 0 20px #c70000, 0 0 25px #c70000, 0 0 30px #c70000, 0 0 35px #c70000;
	}
	100% {
		text-shadow: 0 0 2px #c70000, 0 0 5px #c70000, 0 0 10px #c70000, 0 0 13px #c70000, 0 0 15px #c70000, 0 0 18px #c70000;
	}
}
@keyframes glow-button-white {
	0% {
		box-shadow: 0 0 1px 0 #fff, 0 0 2px 0.5px #fff, 0 0 4px 1px #fff, 0 0 6px 1px #fff, 0 0 9px 1px #fff;
		background: #fff;
	}
	50% {
		box-shadow: 0 0 5px 1px #fff, 0 0 8px 1px #fff, 0 0 15px 1px #fff, 0 0 20px 2px #fff, 0 0 25px 2px #fff, 0 0 30px 2px #fff, 0 0 35px 2px #fff;
		background: #fff;
	}
	100% {
		box-shadow: 0 0 1px 0 #fff, 0 0 2px 0.5px #fff, 0 0 4px 1px #fff, 0 0 6px 1px #fff, 0 0 9px 1px #fff;
		background: #fff;
	}
}
@keyframes glow-button-green {
	0% {
		box-shadow: 0 0 1px 0 #009063, 0 0 2px 0.5px #009063, 0 0 4px 1px #009063, 0 0 6px 1px #009063, 0 0 9px 1px #009063;
		background: #009063;
	}
	50% {
		box-shadow: 0 0 5px 1px #009063, 0 0 8px 1px #009063, 0 0 15px 1px #009063, 0 0 20px 2px #009063, 0 0 25px 2px #009063, 0 0 30px 2px #009063, 0 0 35px 2px #009063;
		background: #009063;
	}
	100% {
		box-shadow: 0 0 1px 0 #009063, 0 0 2px 0.5px #009063, 0 0 4px 1px #009063, 0 0 6px 1px #009063, 0 0 9px 1px #009063;
		background: #009063;
	}
}
@keyframes glow-button-green-light {
	0% {
		box-shadow: 0 0 1px 0 #00c780, 0 0 2px 0.5px #00c780, 0 0 4px 1px #00c780, 0 0 6px 1px #00c780, 0 0 9px 1px #00c780;
		background: #00c780;
	}
	50% {
		box-shadow: 0 0 5px 1px #00c780, 0 0 8px 1px #00c780, 0 0 15px 1px #00c780, 0 0 20px 2px #00c780, 0 0 25px 2px #00c780, 0 0 30px 2px #00c780, 0 0 35px 2px #00c780;
		background: #00c780;
	}
	100% {
		box-shadow: 0 0 1px 0 #00c780, 0 0 2px 0.5px #00c780, 0 0 4px 1px #00c780, 0 0 6px 1px #00c780, 0 0 9px 1px #00c780;
		background: #00c780;
	}
}
@keyframes glow-button-red {
	0% {
		box-shadow: 0 0 1px 0 #c70000, 0 0 2px 0.5px #c70000, 0 0 4px 1px #c70000, 0 0 6px 1px #c70000, 0 0 9px 1px #c70000;
		background: #c70000;
	}
	50% {
		box-shadow: 0 0 5px 1px #c70000, 0 0 8px 1px #c70000, 0 0 15px 1px #c70000, 0 0 20px 2px #c70000, 0 0 25px 2px #c70000, 0 0 30px 2px #c70000, 0 0 35px 2px #c70000;
		background: #c70000;
	}
	100% {
		box-shadow: 0 0 1px 0 #c70000, 0 0 2px 0.5px #c70000, 0 0 4px 1px #c70000, 0 0 6px 1px #c70000, 0 0 9px 1px #c70000;
		background: #c70000;
	}
}
.glow-text-white {
	animation: glow-text-white 3300ms ease-out infinite;
}
.glow-text-green {
	animation: glow-text-green 3300ms ease-out infinite;
}
.glow-text-red {
	animation: glow-text-red 3300ms ease-out infinite;
}

/*//////////////////*/
/*///// TOOLS ///// */
.semi-bold {
	font-weight: 600;
}
.paragraph-spacing-top {
	margin-top: 8px;
}

.display-inline {
	display: inline;
}

.overflow-hidden {
	overflow: hidden;
}

/*///////////////////*/
/*///// HEADER ///// */
header {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* push about link to far right */
	width: 100%;
	margin-bottom: 40px;
}
#header-qmark {
	display: none;
	z-index: 1000;
}
#header-qmark h3 {
	font-family: 'Chelsea Market', Arial, sans-serif !important;
	font-size: 2rem;
	margin: 8px 40px;
	animation: glow-q-mark 3000ms ease-out infinite;
}
@media (hover: hover) and (pointer: fine) {
	#header-qmark h3:hover {
		cursor: help;
		scale: 1.15;
		transition: scale 75ms, text-shadow 75ms;
	}
}

#header-link-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#about-link {
	margin: 8px 40px 8px 12px;
	text-shadow: 8px 8px 4px #0e0e0e40;
}
#home-link {
	display: none;
	margin: 8px 12px;
	text-shadow: 0 0 4px #fff;
}
@media (hover: hover) and (pointer: fine) {
	#home-link:hover,
	#about-link:hover {
		cursor: pointer;
		scale: 1.15;
		transition: scale 75ms, text-shadow 75ms;
	}
}

#home-modal-bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1100;
	height: 100%;
	width: 100%;
	background-color: #0e0e0ea3;
	display: none;
	align-items: center;
	justify-content: center;
}
#home-modal {
	z-index: 1101;
	min-height: 100px;
	width: auto;
	background-color: #fff;
	color: #009063;
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 0 16px 16px #fff;
	user-select: none;
	text-align: center;
}
#home-button-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 20px;
}
#home-button-container * {
	cursor: pointer;
	font-family: 'Chelsea Market', Arial, sans-serif !important;
	font-size: 2rem;
	padding: 16px 48px;
	background-color: #009063;
	color: #fff;
	border-radius: 8px;
	/* remove default styling */
	border: none;
	text-decoration: none;
	min-width: 72px;
}
/* fix button not responding to min-width correctly */
#home-button-container button {
	box-sizing: content-box;
}
@media (hover: hover) and (pointer: fine) {
	#home-button-container *:hover {
		cursor: pointer;
		scale: 1.15;
		transition: scale 100ms;
	}
}

#about-popup {
	display: none; /* remove so it doesn't stop mode buttons from being clicked (happens on smaller screens) */
	color: #0e0e0e;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 11001;
	height: 0; /* keep popup initially hidden */
	width: 100%;
}
#about-bg {
	position: absolute;
	height: 0;
	width: 100%;
	z-index: -1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#about-waves {
	width: 101%; /* extra 1% to fix bug on certain mobile screens that show 1 pixel either side of what's beneath about popup */
	z-index: -2;
	pointer-events: none; /* prevent image from being dragged around */
}
#about-bg-colour {
	height: 100vh;
	width: 100%;
	z-index: -2;
	background-color: #00bcff;
	margin-top: -1px; /* fixes a small gap that appears beneath waves on small screens */
}
#about-text {
	position: relative;
	height: 100vh;
	z-index: 1;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #00c780 #0e0e0e;
	padding: 0 40px;
	opacity: 0;
}
.close-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}
#about-close {
	cursor: pointer;
	height: 32px;
	width: 32px;
	margin: 40px 0 0;
}
@media (hover: hover) and (pointer: fine) {
	#about-close:hover {
		scale: 1.2;
		transition: scale 80ms;
	}
}
#about-text h2 {
	text-align: center;
	margin: 8px 0 48px;
}
#about-text h3 {
	margin: 32px 0 8px;
}
#about-text a,
#about-text a:link,
#about-text a:visited {
	color: #0e0e0e;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
#about-text a:link:active,
#about-text a:visited:active {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
a.bring-dot-closer {
	/* bring . from following p tag closer to end of link */
	margin-right: -4px;
}
@media (hover: hover) and (pointer: fine) {
	#about-text a:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
}
#about-popup .socials {
	margin: 8px 0 64px;
	justify-content: flex-start;
}
#about-text-img {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 200px;
	padding-top: 48px;
	margin-bottom: -40px; /* don't show bottom of seaweed (so it feels like it's looooong) */
	overflow: hidden;
}
#about-text-img img:first-of-type {
	position: relative;
	bottom: -280px;
	height: 250px;
	width: 100px;
}
#about-text-img img:last-of-type {
	position: relative;
	bottom: -280px;
	height: 310px;
	width: 150px;
}
.bubble {
	background: transparent;
	border-radius: 50%;
	position: absolute;
	z-index: 0;
	top: 101vh;
	animation: bubble-rise 3000ms cubic-bezier(0.12, 0, 0.39, 0);
}
/* bubble top left reflection */
.bubble::before {
	content: '';
	background: radial-gradient(rgba(255, 255, 255, 0.8), transparent);
	border-radius: 50%;
	position: absolute;
	height: 25%;
	width: 25%;
	transform: translate(75%, 75%);
}
@keyframes bubble-rise {
	0% {
		top: 101vh;
	}
	100% {
		top: -5vh;
	}
}

/*/////////////////////////*/
/*///// BODY CONTENT ///// */
#content-container {
	/* center content on taller screens, keep footer at a minimum distance */
	margin: auto 0 80px;
}

#title {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}
/* styling for title animations */
.title-text-wrapper {
	display: inline-block;
}
.title-top-letter,
.title-main-letter {
	display: inline-block;
	line-height: 1.25em;
	/* make text initially invisible */
	opacity: 0;
}
.title-top-letter {
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 3rem;
}
.title-main-letters {
	text-align: center;
}
.title-main-letter {
	font-family: 'Chelsea Market', Arial, sans-serif;
	font-size: 5rem;
}
#title-main-qmark {
	position: relative;
	padding-left: 4px;
	animation: glow-q-mark 3000ms ease-out infinite;
}
#title-main-qmark h1 {
	position: relative;
}

#mode {
	display: grid;
	align-items: center;
	justify-items: center;
	justify-content: center;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;
	/* center the block, add space between mode and title, move down same distance to keep it all centered on page */
	width: 500px;
	margin: 48px auto -48px;
}
/* select a mode! text */
#mode h2:first-of-type {
	grid-area: 1 / 1 / span 1 / span 3;
}
/* or text */
#mode h2:last-of-type {
	grid-area: 2 / 2 / span 2 / span 1;
}
#mode button {
	color: #fff;
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 3rem;
	background: #009063;
	border: none;
	border-radius: 16px;
	box-shadow: 8px 8px 8px 0px #0e0e0e40;
	height: 75px;
	width: 350px;
	margin: 16px;
	position: relative;
}
/* if not on a touch device then produce hover effects */
@media (hover: hover) and (pointer: fine) {
	#mode button:hover {
		cursor: pointer;
		background: #fff;
		color: #009063;
		transition: color 75ms, background 75ms, box-shadow 75ms, scale 75ms;
	}
}
#mode-comp {
	grid-area: 2 / 1 / span 1 / span 1;
}
#mode-free {
	grid-area: 2 / 3 / span 1 / span 1;
}

.expanding-bg {
	position: absolute;
	background-color: #009063;
	border-radius: 50%;
	z-index: 999;
}

#game {
	display: none; /* only display once a game mode is chosen */
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
}
#game-question-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8.5rem;
	width: 100%;
	margin: 0 16px 16px;
	z-index: -3; /* keep behind comp mode fog */
}
#game-question {
	padding: 0 8px;
	font-size: 3.1rem;
	text-align: center;
}
#game-content {
	display: grid;
	grid-template-columns: 30% auto 30%;
	grid-template-rows: auto;
	align-items: flex-start;
	justify-items: center;
	justify-content: center;
	width: 100%;
	gap: 4px;
	margin-top: 25px;
}
#game-content * {
	box-sizing: border-box;
}

#fog-container {
	position: relative;
}
.fog {
	background: url('../asset/img/fog-transition.png');
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	min-height: 0vh;
	height: 0vh;
	width: 100vw;
	box-sizing: border-box;
	z-index: -2;
}

/* hold the clouds, only exists so the off-screen clouds won't cause scrollbars to appear */
#cloud-container {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 350px;
	top: 0;
	left: 0;
	z-index: -10;
}
.cloud {
	position: absolute;
}

/*/////////////////////*/
/*///// COMP MODE /////*/
.team-container {
	display: none; /* only display once comp mode is chosen */
	text-align: center;
	color: #0e0e0e;
	border-radius: 48px;
	z-index: 1; /* keep in front of waves, temporarily changed when fog rolls out */
}
#team0 {
	padding-left: 24px;
	grid-column: 1 / 1;
}
#team1 {
	padding-right: 24px;
	grid-column: 3 / 3;
}
/* team name (the one the users chose) */
.team-container h2:nth-child(2) {
	position: relative;
	margin: 16px 0;
	opacity: 0; /* won't be displayed until team names are chosen, keep invisible not gone when name is chosen this element doesn't make others jump around */
	z-index: -1; /* put behind team name form */
}
/* team scores */
.team-container h2:nth-child(3) {
	font-size: 4rem;
	font-weight: 900;
	margin-top: 64px;
	display: none; /* won't be displayed until team names are chosen */
}
/* choose team name input form */
.team-container form {
	position: relative; /* set position so z-index in team1/0NameChosen works */
	display: flex;
	align-items: center;
	flex-flow: column;
	gap: 16px;
	/* move up into invisible h2, becomes visible when team name is chosen */
	margin-top: -64px;
}
.team-container form input[type=text] {
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 2rem;
	padding: 1px 8px;
	border-radius: 16px;
	height: 64px;
	width: 100%;
	box-sizing: border-box;
	color: #0e0e0e;
	background: #fff;
	border: 2px solid #009063;
	padding: 1px 8px;
	outline: none;
}
.team-container form input[type=text]:focus {
	border: 4px solid #009063;
}
@media (hover: hover) and (pointer: fine) {
	.team-container form input[type=text]:hover {
		cursor: text;
	}
}

/*////////////////////*/
/*///// FREEPLAY /////*/
.freeplay-score {
	display: none;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
.freeplay-score h2 {
	font-size: 4rem;
}

/*///////////////////*/
/*///// ANSWERS /////*/
#answers {
	grid-column: 2 / 2;
	display: none;
	flex-flow: column;
	gap: 16px;
	z-index: 1;
	user-select: none; /* sometimes when clicking the text gets highlighted, removed this */
}
#answers span {
	margin: 0 auto;
	border-radius: 8px;
}
#answers input[type=radio] {
	display: none;
}
#answers label {
	display: inline-block; /* align multiple lines to same indentation */
	text-align: center;
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 2rem;
	padding: 1px 32px;
	border-radius: 16px;
	/* reduce elements jumping around with longer answers, high enough to allow for two lines */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5.5rem;
	min-width: 250px; /* provide some uniformity */
}
.answer-hover-white label,
.answer-option-clicked label {
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.answer-hover-white:hover {
		color: #009063;
		background: #fff;
		animation: glow-button-white 2500ms ease-out infinite;
	}
}
.answer-option-clicked {
	color: #fff;
	background: #009063;
	animation: glow-button-green 25000ms ease-out infinite;
	z-index: 1001;
}
@media (hover: hover) and (pointer: fine) {
	.answer-option-clicked:hover {
		color: #fff !important;
		background: #009063 !important;
		animation: glow-button-green 2500ms ease-out infinite !important;
	}
}
/* used when user chooses an answer */
.answer-right {
	color: #fff !important;
	background: #00c780 !important;
	animation: glow-button-green-light 25000ms ease-out infinite !important;
	z-index: 2000;
}
.answer-wrong {
	color: #fff !important;
	background: #c70000 !important;
	animation: glow-button-red 25000ms ease-out infinite !important;
	z-index: 1001;
}
/* name choosing form, and answer submit buttons */
.team-container form input[type=submit],
#answers input[type=submit] {
	color: #009063;
	font-family: 'Englebert', Arial, sans-serif;
	font-size: 3rem;
	background: #fff;
	border: none;
	border-radius: 16px;
	height: 75px;
	width: 350px;
	margin: 32px auto 0;
	padding: 8px 48px;
	animation: glow-button-white 5000ms ease-out infinite;
}
@media (hover: hover) and (pointer: fine) {
	.team-container form input[type=submit]:hover,
	#answers input[type=submit]:hover {
		cursor: pointer;
		color: #fff;
		animation: glow-button-green 5000ms ease-out infinite;
	}
}
/* used when user chooses an answer */
.answer-submit-right {
	color: #fff !important;
	animation: glow-button-green-light 5000ms ease-out infinite !important;
}
.answer-submit-wrong {
	color: #fff !important;
	animation: glow-button-red 5000ms ease-out infinite !important;
}
/* used every time user gets 10 right */
#celebration-container {
	position: absolute;
	top: 50;
	left: 50;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.score-celebration {
	position: absolute;
	top: 0%;
}

/*/////////////////*/
/*///// WAVES /////*/
#waves {
	display: none; /* only displayed once game mode is chosen */
	grid-template-columns: 100%;
	grid-template-rows: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
#waves svg {
	grid-area: 1 / 1 / 1 / 1;
	height: auto;
	width: 100%;
}
/* keep only front wave in front of game loading fog that shows in comp mode */
#wave0,
#wave1,
#wave2 {
	z-index: -3;
}
#wave3 {
	z-index: -1;
}
/* wave animation */
#wave0 path {
	animation: waves0 32.42s infinite;
	animation-delay: 0.2s;
}
#wave1 path {
	animation: waves1 27.83s infinite reverse;
	animation-delay: 0.4s;
}
#wave2 path {
	animation: waves2 22.22s infinite;
	animation-delay: 0.6s;
}
#wave3 path {
	animation: waves3 16.19s infinite reverse;
	animation-delay: 0.8s;
}
@keyframes waves0 {
	0% {
		d: path(
			"M0,145L40,164.3C80,184,160,222,240,241.7C320,261,400,261,480,227.2C560,193,640,126,720,125.7C800,126,880,193,960,198.2C1040,203,1120,145,1200,125.7C1280,106,1360,126,1440,116C1520,106,1600,68,1680,72.5C1760,77,1840,126,1920,120.8C2000,116,2080,58,2160,53.2C2240,48,2320,97,2400,135.3C2480,174,2560,203,2640,217.5C2720,232,2800,232,2880,222.3C2960,213,3040,193,3120,164.3C3200,135,3280,97,3360,67.7C3440,39,3520,19,3600,53.2C3680,87,3760,174,3840,217.5C3920,261,4000,261,4080,232C4160,203,4240,145,4320,120.8C4400,97,4480,106,4560,96.7C4640,87,4720,58,4800,43.5C4880,29,4960,29,5040,67.7C5120,106,5200,184,5280,217.5C5360,251,5440,242,5520,227.2C5600,213,5680,193,5720,183.7L5760,174L5760,290L5720,290C5680,290,5600,290,5520,290C5440,290,5360,290,5280,290C5200,290,5120,290,5040,290C4960,290,4880,290,4800,290C4720,290,4640,290,4560,290C4480,290,4400,290,4320,290C4240,290,4160,290,4080,290C4000,290,3920,290,3840,290C3760,290,3680,290,3600,290C3520,290,3440,290,3360,290C3280,290,3200,290,3120,290C3040,290,2960,290,2880,290C2800,290,2720,290,2640,290C2560,290,2480,290,2400,290C2320,290,2240,290,2160,290C2080,290,2000,290,1920,290C1840,290,1760,290,1680,290C1600,290,1520,290,1440,290C1360,290,1280,290,1200,290C1120,290,1040,290,960,290C880,290,800,290,720,290C640,290,560,290,480,290C400,290,320,290,240,290C160,290,80,290,40,290L0,290Z"
		);
	}
	33% {
		d: path(
			"M0,96L48,117.3C96,139,192,181,288,186.7C384,192,480,160,576,165.3C672,171,768,213,864,192C960,171,1056,85,1152,48C1248,11,1344,21,1440,32C1536,43,1632,53,1728,74.7C1824,96,1920,128,2016,165.3C2112,203,2208,245,2304,256C2400,267,2496,245,2592,245.3C2688,245,2784,267,2880,234.7C2976,203,3072,117,3168,90.7C3264,64,3360,96,3456,128C3552,160,3648,192,3744,192C3840,192,3936,160,4032,154.7C4128,149,4224,171,4320,170.7C4416,171,4512,149,4608,122.7C4704,96,4800,64,4896,53.3C4992,43,5088,53,5184,85.3C5280,117,5376,171,5472,181.3C5568,192,5664,160,5760,165.3C5856,171,5952,213,6048,202.7C6144,192,6240,128,6336,96C6432,64,6528,64,6624,85.3C6720,107,6816,149,6864,170.7L6912,192L6912,320L6864,320C6816,320,6720,320,6624,320C6528,320,6432,320,6336,320C6240,320,6144,320,6048,320C5952,320,5856,320,5760,320C5664,320,5568,320,5472,320C5376,320,5280,320,5184,320C5088,320,4992,320,4896,320C4800,320,4704,320,4608,320C4512,320,4416,320,4320,320C4224,320,4128,320,4032,320C3936,320,3840,320,3744,320C3648,320,3552,320,3456,320C3360,320,3264,320,3168,320C3072,320,2976,320,2880,320C2784,320,2688,320,2592,320C2496,320,2400,320,2304,320C2208,320,2112,320,2016,320C1920,320,1824,320,1728,320C1632,320,1536,320,1440,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
		);
	}
	66% {
		d: path(
			"M0,145L60,164.3C120,184,240,222,360,241.7C480,261,600,261,720,227.2C840,193,960,126,1080,125.7C1200,126,1320,193,1440,198.2C1560,203,1680,145,1800,125.7C1920,106,2040,126,2160,116C2280,106,2400,68,2520,72.5C2640,77,2760,126,2880,120.8C3000,116,3120,58,3240,53.2C3360,48,3480,97,3600,135.3C3720,174,3840,203,3960,217.5C4080,232,4200,232,4320,222.3C4440,213,4560,193,4680,164.3C4800,135,4920,97,5040,67.7C5160,39,5280,19,5400,53.2C5520,87,5640,174,5760,217.5C5880,261,6000,261,6120,232C6240,203,6360,145,6480,120.8C6600,97,6720,106,6840,96.7C6960,87,7080,58,7200,43.5C7320,29,7440,29,7560,67.7C7680,106,7800,184,7920,217.5C8040,251,8160,242,8280,227.2C8400,213,8520,193,8580,183.7L8640,174L8640,290L8580,290C8520,290,8400,290,8280,290C8160,290,8040,290,7920,290C7800,290,7680,290,7560,290C7440,290,7320,290,7200,290C7080,290,6960,290,6840,290C6720,290,6600,290,6480,290C6360,290,6240,290,6120,290C6000,290,5880,290,5760,290C5640,290,5520,290,5400,290C5280,290,5160,290,5040,290C4920,290,4800,290,4680,290C4560,290,4440,290,4320,290C4200,290,4080,290,3960,290C3840,290,3720,290,3600,290C3480,290,3360,290,3240,290C3120,290,3000,290,2880,290C2760,290,2640,290,2520,290C2400,290,2280,290,2160,290C2040,290,1920,290,1800,290C1680,290,1560,290,1440,290C1320,290,1200,290,1080,290C960,290,840,290,720,290C600,290,480,290,360,290C240,290,120,290,60,290L0,290Z"
		);
	}
	100% {
		d: path(
			"M0,145L40,164.3C80,184,160,222,240,241.7C320,261,400,261,480,227.2C560,193,640,126,720,125.7C800,126,880,193,960,198.2C1040,203,1120,145,1200,125.7C1280,106,1360,126,1440,116C1520,106,1600,68,1680,72.5C1760,77,1840,126,1920,120.8C2000,116,2080,58,2160,53.2C2240,48,2320,97,2400,135.3C2480,174,2560,203,2640,217.5C2720,232,2800,232,2880,222.3C2960,213,3040,193,3120,164.3C3200,135,3280,97,3360,67.7C3440,39,3520,19,3600,53.2C3680,87,3760,174,3840,217.5C3920,261,4000,261,4080,232C4160,203,4240,145,4320,120.8C4400,97,4480,106,4560,96.7C4640,87,4720,58,4800,43.5C4880,29,4960,29,5040,67.7C5120,106,5200,184,5280,217.5C5360,251,5440,242,5520,227.2C5600,213,5680,193,5720,183.7L5760,174L5760,290L5720,290C5680,290,5600,290,5520,290C5440,290,5360,290,5280,290C5200,290,5120,290,5040,290C4960,290,4880,290,4800,290C4720,290,4640,290,4560,290C4480,290,4400,290,4320,290C4240,290,4160,290,4080,290C4000,290,3920,290,3840,290C3760,290,3680,290,3600,290C3520,290,3440,290,3360,290C3280,290,3200,290,3120,290C3040,290,2960,290,2880,290C2800,290,2720,290,2640,290C2560,290,2480,290,2400,290C2320,290,2240,290,2160,290C2080,290,2000,290,1920,290C1840,290,1760,290,1680,290C1600,290,1520,290,1440,290C1360,290,1280,290,1200,290C1120,290,1040,290,960,290C880,290,800,290,720,290C640,290,560,290,480,290C400,290,320,290,240,290C160,290,80,290,40,290L0,290Z"
		);
	}
}
@keyframes waves1 {
	0% {
		d: path(
			"M0,232L80,203C160,174,320,116,480,106.3C640,97,800,135,960,164.3C1120,193,1280,213,1440,198.2C1600,184,1760,135,1920,135.3C2080,135,2240,184,2400,193.3C2560,203,2720,174,2880,178.8C3040,184,3200,222,3360,203C3520,184,3680,106,3840,96.7C4000,87,4160,145,4320,154.7C4480,164,4640,126,4800,111.2C4960,97,5120,106,5280,135.3C5440,164,5600,213,5760,207.8C5920,203,6080,145,6240,101.5C6400,58,6560,29,6720,53.2C6880,77,7040,155,7200,169.2C7360,184,7520,135,7680,96.7C7840,58,8000,29,8160,53.2C8320,77,8480,155,8640,169.2C8800,184,8960,135,9120,135.3C9280,135,9440,184,9600,207.8C9760,232,9920,232,10080,222.3C10240,213,10400,193,10560,198.2C10720,203,10880,232,11040,207.8C11200,184,11360,106,11440,67.7L11520,29L11520,290L11440,290C11360,290,11200,290,11040,290C10880,290,10720,290,10560,290C10400,290,10240,290,10080,290C9920,290,9760,290,9600,290C9440,290,9280,290,9120,290C8960,290,8800,290,8640,290C8480,290,8320,290,8160,290C8000,290,7840,290,7680,290C7520,290,7360,290,7200,290C7040,290,6880,290,6720,290C6560,290,6400,290,6240,290C6080,290,5920,290,5760,290C5600,290,5440,290,5280,290C5120,290,4960,290,4800,290C4640,290,4480,290,4320,290C4160,290,4000,290,3840,290C3680,290,3520,290,3360,290C3200,290,3040,290,2880,290C2720,290,2560,290,2400,290C2240,290,2080,290,1920,290C1760,290,1600,290,1440,290C1280,290,1120,290,960,290C800,290,640,290,480,290C320,290,160,290,80,290L0,290Z"
		);
	}
	33% {
		d: path(
			"M0,232L120,203C240,174,480,116,720,106.3C960,97,1200,135,1440,164.3C1680,193,1920,213,2160,198.2C2400,184,2640,135,2880,135.3C3120,135,3360,184,3600,193.3C3840,203,4080,174,4320,178.8C4560,184,4800,222,5040,203C5280,184,5520,106,5760,96.7C6000,87,6240,145,6480,154.7C6720,164,6960,126,7200,111.2C7440,97,7680,106,7920,135.3C8160,164,8400,213,8640,207.8C8880,203,9120,145,9360,101.5C9600,58,9840,29,10080,53.2C10320,77,10560,155,10800,169.2C11040,184,11280,135,11520,96.7C11760,58,12000,29,12240,53.2C12480,77,12720,155,12960,169.2C13200,184,13440,135,13680,135.3C13920,135,14160,184,14400,207.8C14640,232,14880,232,15120,222.3C15360,213,15600,193,15840,198.2C16080,203,16320,232,16560,207.8C16800,184,17040,106,17160,67.7L17280,29L17280,290L17160,290C17040,290,16800,290,16560,290C16320,290,16080,290,15840,290C15600,290,15360,290,15120,290C14880,290,14640,290,14400,290C14160,290,13920,290,13680,290C13440,290,13200,290,12960,290C12720,290,12480,290,12240,290C12000,290,11760,290,11520,290C11280,290,11040,290,10800,290C10560,290,10320,290,10080,290C9840,290,9600,290,9360,290C9120,290,8880,290,8640,290C8400,290,8160,290,7920,290C7680,290,7440,290,7200,290C6960,290,6720,290,6480,290C6240,290,6000,290,5760,290C5520,290,5280,290,5040,290C4800,290,4560,290,4320,290C4080,290,3840,290,3600,290C3360,290,3120,290,2880,290C2640,290,2400,290,2160,290C1920,290,1680,290,1440,290C1200,290,960,290,720,290C480,290,240,290,120,290L0,290Z"
		);
	}
	66% {
		d: path(
			"M0,232L60,203C120,174,240,116,360,106.3C480,97,600,135,720,164.3C840,193,960,213,1080,198.2C1200,184,1320,135,1440,135.3C1560,135,1680,184,1800,193.3C1920,203,2040,174,2160,178.8C2280,184,2400,222,2520,203C2640,184,2760,106,2880,96.7C3000,87,3120,145,3240,154.7C3360,164,3480,126,3600,111.2C3720,97,3840,106,3960,135.3C4080,164,4200,213,4320,207.8C4440,203,4560,145,4680,101.5C4800,58,4920,29,5040,53.2C5160,77,5280,155,5400,169.2C5520,184,5640,135,5760,96.7C5880,58,6000,29,6120,53.2C6240,77,6360,155,6480,169.2C6600,184,6720,135,6840,135.3C6960,135,7080,184,7200,207.8C7320,232,7440,232,7560,222.3C7680,213,7800,193,7920,198.2C8040,203,8160,232,8280,207.8C8400,184,8520,106,8580,67.7L8640,29L8640,290L8580,290C8520,290,8400,290,8280,290C8160,290,8040,290,7920,290C7800,290,7680,290,7560,290C7440,290,7320,290,7200,290C7080,290,6960,290,6840,290C6720,290,6600,290,6480,290C6360,290,6240,290,6120,290C6000,290,5880,290,5760,290C5640,290,5520,290,5400,290C5280,290,5160,290,5040,290C4920,290,4800,290,4680,290C4560,290,4440,290,4320,290C4200,290,4080,290,3960,290C3840,290,3720,290,3600,290C3480,290,3360,290,3240,290C3120,290,3000,290,2880,290C2760,290,2640,290,2520,290C2400,290,2280,290,2160,290C2040,290,1920,290,1800,290C1680,290,1560,290,1440,290C1320,290,1200,290,1080,290C960,290,840,290,720,290C600,290,480,290,360,290C240,290,120,290,60,290L0,290Z"
		);
	}
	100% {
		d: path(
			"M0,232L80,203C160,174,320,116,480,106.3C640,97,800,135,960,164.3C1120,193,1280,213,1440,198.2C1600,184,1760,135,1920,135.3C2080,135,2240,184,2400,193.3C2560,203,2720,174,2880,178.8C3040,184,3200,222,3360,203C3520,184,3680,106,3840,96.7C4000,87,4160,145,4320,154.7C4480,164,4640,126,4800,111.2C4960,97,5120,106,5280,135.3C5440,164,5600,213,5760,207.8C5920,203,6080,145,6240,101.5C6400,58,6560,29,6720,53.2C6880,77,7040,155,7200,169.2C7360,184,7520,135,7680,96.7C7840,58,8000,29,8160,53.2C8320,77,8480,155,8640,169.2C8800,184,8960,135,9120,135.3C9280,135,9440,184,9600,207.8C9760,232,9920,232,10080,222.3C10240,213,10400,193,10560,198.2C10720,203,10880,232,11040,207.8C11200,184,11360,106,11440,67.7L11520,29L11520,290L11440,290C11360,290,11200,290,11040,290C10880,290,10720,290,10560,290C10400,290,10240,290,10080,290C9920,290,9760,290,9600,290C9440,290,9280,290,9120,290C8960,290,8800,290,8640,290C8480,290,8320,290,8160,290C8000,290,7840,290,7680,290C7520,290,7360,290,7200,290C7040,290,6880,290,6720,290C6560,290,6400,290,6240,290C6080,290,5920,290,5760,290C5600,290,5440,290,5280,290C5120,290,4960,290,4800,290C4640,290,4480,290,4320,290C4160,290,4000,290,3840,290C3680,290,3520,290,3360,290C3200,290,3040,290,2880,290C2720,290,2560,290,2400,290C2240,290,2080,290,1920,290C1760,290,1600,290,1440,290C1280,290,1120,290,960,290C800,290,640,290,480,290C320,290,160,290,80,290L0,290Z"
		);
	}
}
@keyframes waves2 {
	0% {
		d: path(
			"M-0.038477,246.639227l78.182902-6.561456c180.139911-9.300255,200.834274-33.016522,320.834274-23.016522s164.259674-14.361249,284.259674-14.061249c120-.3,258.798698-64.028823,411.319879-37.700717c256.393045,46.072329,399.566195-104.670339,416.819051-15.613986C1631.377303,154.485297,1680,174,1800,188.5s240-14.5,360-38.7c120-23.8,240-43.8,360-24.1c120,19.3,240,77.3,360,91.8s240-14.5,360-19.3c120-5.2,240,14.8,360-14.5C3720,155,3840,77,3960,77.3c120-.3,240,77.7,360,111.2s240,24.5,360-9.7C4800,145,4920,87,5040,72.5s240,14.5,360,14.5s240-29,360-14.5s240,72.5,360,77.3c120,5.2,240-43.8,360-58c120-14.8,240,5.2,360,33.9C6960,155,7080,193,7200,203s240-10,360-43.5s240-82.5,360-87s240,33.5,360,33.8c120-.3,240-38.3,300-58L8640,29v261h-60c-60,0-180,0-300,0s-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-300,0h-60Z"
		);
	}
	50% {
		d: path(
			"M0.024978,148.717722l60.00079-4.471071c180.139911-9.300255,260.997443,23.803716,380.997443,33.803716s158.815168-6.542066,278.815168-6.242066c120-.3,232.617765,97.235799,379.931734,45.376877c222.23071-92.461005,416.632059,51.133682,433.884915,140.190035C1653.655028,362.175213,1680,174,1800,188.5s240-14.5,360-38.7c120-23.8,240-43.8,360-24.1c120,19.3,240,77.3,360,91.8s240-14.5,360-19.3c120-5.2,240,14.8,360-14.5C3720,155,3840,77,3960,77.3c120-.3,240,77.7,360,111.2s240,24.5,360-9.7C4800,145,4920,87,5040,72.5s240,14.5,360,14.5s240-29,360-14.5s240,72.5,360,77.3c120,5.2,240-43.8,360-58c120-14.8,240,5.2,360,33.9C6960,155,7080,193,7200,203s240-10,360-43.5s240-82.5,360-87s240,33.5,360,33.8c120-.3,240-38.3,300-58L8640,29v261h-60c-60,0-180,0-300,0s-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-300,0h-60Z"
		);
	}
	100% {
		d: path(
			"M-0.038477,246.639227l78.182902-6.561456c180.139911-9.300255,200.834274-33.016522,320.834274-23.016522s164.259674-14.361249,284.259674-14.061249c120-.3,258.798698-64.028823,411.319879-37.700717c256.393045,46.072329,399.566195-104.670339,416.819051-15.613986C1631.377303,154.485297,1680,174,1800,188.5s240-14.5,360-38.7c120-23.8,240-43.8,360-24.1c120,19.3,240,77.3,360,91.8s240-14.5,360-19.3c120-5.2,240,14.8,360-14.5C3720,155,3840,77,3960,77.3c120-.3,240,77.7,360,111.2s240,24.5,360-9.7C4800,145,4920,87,5040,72.5s240,14.5,360,14.5s240-29,360-14.5s240,72.5,360,77.3c120,5.2,240-43.8,360-58c120-14.8,240,5.2,360,33.9C6960,155,7080,193,7200,203s240-10,360-43.5s240-82.5,360-87s240,33.5,360,33.8c120-.3,240-38.3,300-58L8640,29v261h-60c-60,0-180,0-300,0s-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-300,0h-60Z"
		);
	}
}
@keyframes waves3 {
	0% {
		d: path(
			"M0,232l60-29c60-29,180-87,300-96.7c120-9.3,240,28.7,360,58C840,193,960,213,1080,198.2c120-14.2,240-63.2,360-62.9c120-.3,240,48.7,360,58c120,9.7,240-19.3,360-14.5c120,5.2,240,43.2,360,24.2s240-97,360-106.3c120-9.7,240,48.3,360,58c120,9.3,240-28.7,360-43.5c120-14.2,240-5.2,360,24.1c120,28.7,240,77.7,360,72.5c120-4.8,240-62.8,360-106.3s240-72.5,360-48.3c120,23.8,240,101.8,360,116c120,14.8,240-34.2,360-72.5C5880,58,6000,29,6120,53.2c120,23.8,240,101.8,360,116c120,14.8,240-34.2,360-33.9c120-.3,240,48.7,360,72.5c120,24.2,240,24.2,360,14.5c120-9.3,240-29.3,360-24.1c120,4.8,240,33.8,360,9.6C8400,184,8520,106,8580,67.7L8640,29v261h-60c-60,0-180,0-300,0s-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-300,0h-60Z"
		);
	}
	50% {
		d: path(
			"M0,239.218525L70.935961,232c139.507389-14.5,190.395433-39.592158,328.306276-15.492158c249.252228,33.140442,297.4018-3.244383,357.408009-23.207842c115.190488-38.6,255.780431-38.6,286.061341-38.6C1150.857696,154.7,1320,222,1440,222.3c120-.3,240-38.3,360-29c120,9.7,240-19.3,360-14.5c120,5.2,240,43.2,360,24.2s240-97,360-106.3c120-9.7,240,48.3,360,58c120,9.3,240-28.7,360-43.5c120-14.2,240-5.2,360,24.1c120,28.7,240,77.7,360,72.5c120-4.8,240-62.8,360-106.3s240-72.5,360-48.3c120,23.8,240,101.8,360,116c120,14.8,240-34.2,360-72.5C5880,58,6000,29,6120,53.2c120,23.8,240,101.8,360,116c120,14.8,240-34.2,360-33.9c120-.3,240,48.7,360,72.5c120,24.2,240,24.2,360,14.5c120-9.3,240-29.3,360-24.1c120,4.8,240,33.8,360,9.6C8400,184,8520,106,8580,67.7L8640,29v261h-60c-60,0-180,0-300,0s-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-300,0h-60Z"
		);
	}
	100% {
		d: path(
			"M0,232l60-29c60-29,180-87,300-96.7c120-9.3,240,28.7,360,58C840,193,960,213,1080,198.2c120-14.2,240-63.2,360-62.9c120-.3,240,48.7,360,58c120,9.7,240-19.3,360-14.5c120,5.2,240,43.2,360,24.2s240-97,360-106.3c120-9.7,240,48.3,360,58c120,9.3,240-28.7,360-43.5c120-14.2,240-5.2,360,24.1c120,28.7,240,77.7,360,72.5c120-4.8,240-62.8,360-106.3s240-72.5,360-48.3c120,23.8,240,101.8,360,116c120,14.8,240-34.2,360-72.5C5880,58,6000,29,6120,53.2c120,23.8,240,101.8,360,116c120,14.8,240-34.2,360-33.9c120-.3,240,48.7,360,72.5c120,24.2,240,24.2,360,14.5c120-9.3,240-29.3,360-24.1c120,4.8,240,33.8,360,9.6C8400,184,8520,106,8580,67.7L8640,29v261h-60c-60,0-180,0-300,0s-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-360,0-240,0-300,0h-60Z"
		);
	}
}

/*///////////////////*/
/*///// FOOTER //////*/
footer {
	/* make footer stick to bottom of page */
	margin: auto 0 0;
	height: 80px;
	position: relative;
}
#footer-animation-wrapper {
	position: relative;
	display: grid;
	align-items: center;
	justify-items: center;
	z-index: 100;
}
footer p {
	/* add some space between the text and icons */
	margin-top: 4px;
}