:root {
	--navyblue: #001133;
	--aquagreen: #00ffcc;
	--cornflower: #7a9eff;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: white;
	color: black;
	font-family: Quicksand, "Fira Sans", sans-serif;
	background-color: white;
}

::-moz-selection{
	background: var(--navyblue);
	color: white;
}
::selection{
	background: var(--navyblue);
	color: white;
}

a{
	text-decoration: none;
	color: inherit;
}

section.inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	opacity: 0.12;
	transform: translateY(36px);
}
section.inner.animated{
	animation: slide_up 0.6s linear forwards;
}
@keyframes slide_up {
	0% { opacity: 0.12; transform: translateY(36px); }
	100% { opacity: 1; transform: translateY(0px); }
}

nav {
	background-color: var(--aquagreen);
}

nav section.inner {
	width: 90%;
	height: 42px;
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
}
nav section.inner .heading {
	font-size: 21px;
	font-weight: 700;
	color: darkblue;
}
nav section.inner ul {
	display: flex;
	list-style: none;
}
nav section.inner ul li {
	padding: 3px 12px;
	border-radius: 3px;
	transition: 0.2s ease-in;
}
nav section.inner ul li a {
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	color: darkblue;
}
nav section.inner ul li:hover {
/*	background-color: darkcyan;*/
}
nav section.inner ul li a:hover {
/*	color: white;*/
	color: darkcyan;
}
nav section.inner .sideMenuButton {
	font-size: 21px;
	font-weight: bolder;
	cursor: pointer;
	display: none;
}

.sideNavigationBar {
	width: 0;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0%;
	background-color: lightslategray;
	overflow-x: hidden;
	transition: 0.3s ease-in;
	padding-top: 60px;
	display: none;
}
.sideNavigationBar a {
	padding: 9px 9px 9px 15px;
	display: block;
	font-size: 18px;
	font-weight: 500;
	color: white;
	transition: 0.3s;
	text-decoration: none;
}
.sideNavigationBar a button {
	padding: 10px 20px;
	border-radius: 10px;
	color: darkcyan;
	font-size: 16px;
	border-style: none;
	font-weight: 700;
}
.sideNavigationBar a:hover {
	color: white;
}
.sideNavigationBar .closeButton {
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 20px;
	margin-left: 50px;
}

.content#head{
	background: linear-gradient(var(--aquagreen), var(--cornflower));
	min-height: 540px;
}
.content#head section.inner{
	margin-top: 120px; /*TODO: change*/
	text-align: center;
	vertical-align: middle;
}
.content#body_1{
	/*background-image: url("background-body_1.png");*/
	/*background-position: right top;*/
}
.content#body_2{
	/*background-image: url("background-body_2.png");*/
	/*background-position: left top;*/
	/* half-width */
	/* padding-left: calc(50% - 30px);*/
}
.content#boxes{
	/*background-image: url("background-boxes.png");*/
	/*background-position: center top;*/
}
.content#sign_up{
	/*background-image: url("background-sign_up.png");*/
	/*background-position: center top;*/
}

.content{
	margin-bottom: 21px;
	padding: 42px 5%;
}

.content > section.inner h1{
	font-size: 60px;
	color: var(--navyblue);
}

.content > section h2{
	font-size: 36px;
	color: var(--navyblue);
}

.content > section.inner h3{
	font-weight: normal;
	color: black;
}

.content > section.inner section.paragraphs{
	/*color: darkslateblue;*/
	color: var(--navyblue);
	margin: 21px 0;
	/* half-width */
	/*width: 50vw;
	min-width: 120px;
	max-width: 420px;*/
}

.content > section.inner section.paragraphs p{
	margin: 15px 0;
}

.content > section.inner section.paragraphs ul{
	margin-left: 15px;
}
.content > section.inner section.paragraphs ul li{
	margin-bottom: 6px;
}
.content > section.inner a.citation{
	color: gray;
}

.content > section.inner section.boxes{
	margin: 21px 0;
	padding: 0;
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.content > section.inner section.boxes div.box{
	margin: 12px 0;
	width: calc(33.3333% - 15px);
	color: darkslateblue;
}

#footer{
	padding: 20px 5%;
	text-align: center;
	background-color: lightsteelblue;
}

section#footer{
	font-size: 12px;
}

section button{
	width: 150px;
	height: 24px;
	margin-top: 6px;
	padding: 3px 3px;
	border-radius: 3px;
	background-color: white;
	border: solid 1.5px var(--navyblue);
	color: var(--navyblue);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
}

section button.join{
	background-color: var(--navyblue);
}

section button.join,
section button.join a {
	color: white;
}

section button:hover{
	border-color: darkcyan;
	background-color: darkcyan;
}

section button:hover a{
	color: white;
}

section.heading,
section.images_center {
	text-align: center;
}
section.images_center:not(.animated) img {
	width: min(60%, 600px);
}
section.images_center img {
	z-index: -1;
	border-radius: 9px;
	width: min(60%, 600px);
	animation: enlarge_from_top_center 0.6s ease-in-out forwards;
}
@keyframes enlarge_from_top_center {
	0% { opacity: 0.3; width: min(60%, 600px); height: min(60%, 600px); }
	100% { opacity: 1; width: min(72%, 720px); height: min(72%, 720px); }
}

section.images {
	/*width: 100%;*/
	/*height: 100px;*/
}
section.images img {
	position: absolute;
	right: 20%;
	opacity: 0.3;
	height: 150px;
}
section.images.animated img {
	animation: enlarge 0.6s ease-in-out forwards;
}
@keyframes enlarge {
	0% { opacity: 0.3; height: 150px; }
	100% { opacity: 1; height: 300px; }
}
section.images img#octobulb {
	position: absolute;
	left: calc(50% - 540px);  /*TODO change*/
	height: 360px;
	opacity: 0;
	/*animation: float 6s ease-in-out infinite;*/
	animation: zoom 4.5s ease-in-out forwards 1.5s;
}
@keyframes zoom {
	0% { opacity: 1; height: 360px; transform: translateX(0) translateY(450px); }
	25% { opacity: 1; height: 210px; transform: translateX(900px) translateY(-450px); }
	100% { opacity: 0; height: 210px; transform: translateX(900px) translateY(-450px); }
}
@keyframes float {
	0% { opacity: 0.81; transform: translateX(0) translateY(0); }
	40% { opacity: 1; transform: translateX(-4.5px) translateY(0); }
	50% { opacity: 1; transform: translateX(-6px) translateY(-0.6px); }
	90% { opacity: 0.81; transform: translateX(-1.5px) translateY(0.6px); }
	100% { opacity: 0.81; transform: translateX(0) translateY(0); }
}
section.images svg {
	position: absolute;
}
section.images svg#bubble_0 {
	top: 240px;
	left: calc(50% - 360px);
	width: 90px;
	height: 90px;
	/*border: 3px solid #73AD21;*/
}
section.images svg#bubble_1 {
	top: 75px;
	left: calc(50% + 261px);
	width: 150px;
	height: 150px;
}
section.images svg#bubble_2 {
	top: 216px;
	left: calc(50% + 240px);
	width: 72px;
	height: 72px;
}
section.images svg#bubble_3 {
	top: 240px;
	left: calc(50% + 150px);
	width: 90px;
	height: 90px;
}
section.images svg#bubble_4 {
	top: 213px;
	left: calc(50% + 360px);
	width: 90px;
	height: 90px;
}
section.images svg#bubble_5 {
	top: 420px;
	left: calc(50% + 210px);
	width: 81px;
	height: 81px;
}
section.images svg#bubble_6 {
	top: 540px;
	left: calc(50% + 126px);
	width: 63px;
	height: 63px;
}
section.images svg#bubble_7 {
	top: 840px;
	right: calc(50% + 156px);
	width: 81px;
	height: 81px;
}
section.images svg#bubble_8 {
	top: 900px;
	right: calc(50% + 126px);
	width: 63px;
	height: 63px;
}
section.images svg#bubble_9 {
	top: 1050px;
	right: calc(50% + 216px);
	width: 90px;
	height: 90px;
}
section.images svg#bubble_10 {
	top: calc(840px + 840px);
	right: calc(120px + 50% + 156px);
	width: 81px;
	height: 81px;
}
section.images svg#bubble_11 {
	top: calc(840px + 900px);
	right: calc(120px + 50% + 126px);
	width: 63px;
	height: 63px;
}
section.images svg#bubble_12 {
	top: calc(840px + 1050px);
	right: calc(120px + 50% + 216px);
	width: 90px;
	height: 90px;
}
section.images svg#bubble_13 {
	top: calc(1680px + 840px);
	right: calc(50% + 156px);
	width: 81px;
	height: 81px;
}
section.images svg#bubble_14 {
	top: calc(1680px + 900px);
	right: calc(50% + 126px);
	width: 63px;
	height: 63px;
}
section.images svg#bubble_15 {
	top: calc(1680px + 1050px);
	right: calc(50% + 216px);
	width: 90px;
	height: 90px;
}
section.images svg circle {
	fill: none;
	stroke: white;
	filter: blur(9px);
	r: 30;
	cx: 60;
	cy: 60;
	stroke-width: 24px;
}
section.images svg.blue circle {
	stroke: var(--cornflower);
}
section.images svg#bubble_0 circle {
	animation: faint_fade_out_animation 2.7s linear infinite;
}
section.images svg#bubble_1 circle {
	animation: fade_in_animation 2.7s linear infinite;
}
section.images svg#bubble_2 circle {
	animation: faint_fade_out_animation 2.7s linear infinite;
}
section.images svg#bubble_3 circle {
	animation: faint_fade_in_animation 1.5s linear infinite;
}
section.images svg#bubble_4 circle {
	animation: faint_fade_out_animation 1.5s linear infinite;
}
section.images svg#bubble_5 circle {
	animation: faint_fade_in_animation 2.7s linear infinite;
}
section.images svg#bubble_6 circle {
	animation: very_faint_fade_in_animation 1.5s linear infinite;
}
section.images svg#bubble_7 circle,
section.images svg#bubble_10 circle,
section.images svg#bubble_13 circle {
	animation: faint_fade_in_animation 1.5s linear infinite;
}
section.images svg#bubble_8 circle,
section.images svg#bubble_11 circle,
section.images svg#bubble_14 circle {
	animation: very_faint_fade_in_animation 1.5s linear infinite;
}
section.images svg#bubble_9 circle,
section.images svg#bubble_12 circle,
section.images svg#bubble_15 circle {
	animation: very_faint_fade_out_animation 1.5s linear infinite;
}
@keyframes fade_in_animation {
	0% { opacity: 0.3 }
	50% { opacity: 1 }
	100% { opacity: 0.3 }
}
@keyframes fade_out_animation {
	0% { opacity: 1 }
	50% { opacity: 0.3 }
	100% { opacity: 1 }
}
@keyframes faint_fade_in_animation {
	0% { opacity: 0.3 }
	50% { opacity: 0.6 }
	100% { opacity: 0.3 }
}
@keyframes faint_fade_out_animation {
	0% { opacity: 0.6 }
	50% { opacity: 0.3 }
	100% { opacity: 0.6 }
}
@keyframes very_faint_fade_in_animation {
	0% { opacity: 0.15 }
	50% { opacity: 0.3 }
	100% { opacity: 0.15 }
}
@keyframes very_faint_fade_out_animation {
	0% { opacity: 0.3 }
	50% { opacity: 0.15 }
	100% { opacity: 0.3 }
}

/* Header content responsive */
@media screen and (max-width: 980px) {
	.content#body_2,
	.content#body_3{
		padding-left: 5%;
	}

	.content > section.inner section.paragraphs{
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.content > section.inner section.boxes{
		flex-direction: column;
	}
	.content > section.inner section.boxes div.box{
		width: 100%;
	}

	section.images img#octobulb {
		position: absolute;
		left: calc(50% - 180px);
		height: 480px;
		animation: float 6s ease-in-out infinite;
	}
	@keyframes float {
		0% { opacity: 0.3; transform: translateX(0) translateY(0); }
		40% { opacity: 0.6; transform: translateX(-4.5px) translateY(0); }
		50% { opacity: 0.6; transform: translateX(-6px) translateY(-0.6px); }
		90% { opacity: 0.3; transform: translateX(-1.5px) translateY(0.6px); }
		100% { opacity: 0.3; transform: translateX(0) translateY(0); }
	}

	/* responsive navbar css */
	nav section.inner .sideMenuButton {
		display: flex;
	}

	nav section.inner .navbar {
		display: none;
	}

	.sideNavigationBar {
		z-index: 1;
		display: block !important;
	}
}