@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

/* site-wide CSS d6e0f0 */

body {
	margin: 0;

	font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background-color: #7fd1dc;
}

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

a:hover {
	color: red;
}

/*h1 {}
p {}*/

/* Shrinking for mobile */
@media (max-width: 768px) {
	/*h1 {}
	p {}*/
}

/* header css */
.site-header { padding-top: 12px; }
.site-logo-container { text-align:  center; }
.site-logo { max-width: 100px; border-radius: 100%; }


/* ========= START:  MENU/NAV ========= */
/* Add a default background color to the top navigation */
.topnav {
	overflow: auto;
	text-align: center;
}

/* Style the links inside the navigation bar */
.topnav a {
	display: inline-block;
	color: rgb(19, 18, 18);

	background-color: white; 
	text-align: center;
	padding: 10px 8px;
	border-radius:  3px;
	text-decoration: none;
	font-size: 17px;
}

/* Change the color of links on hover  #f3f3f3*/
.topnav a:hover {
	background-color:   #188C67;
	color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
	background-color: transparent;
	color: rgb(235, 151, 151);
}

/* Hide the link that should open and close the topnav on small screens */
.topnav a.icon {
	display: none;
	padding: 10px;
	border-radius: 3px;
	line-height: 1;
}

.topnav a.split {
	float: right;
	background-color:  #ddd;
	color: black;
}

/* menu CSS */
/*
.responsive {
	width: 100%;
	height: auto;
}
*/

@media screen and (max-width: 940px) {

	.topnav.responsive {
		position: fixed;
		top: 0;
		height: 100%;
		width: 100%;
		transition:  0.2s;

		display: flex;
		flex-direction: column;
		justify-content: center;

		background: #ffffffab;
		z-index: 99;
		backdrop-filter: blur(20px);
	}

	.topnav a {
		display: none;
		overflow: hidden;
	}
	.topnav a.icon {
		position: fixed;
		top: 20px;
		right: 20px;
	}
	.topnav a.icon.open { display: block; }
	.topnav.responsive a.icon.open { display: none; }
	.topnav.responsive a.icon.close { display: block; }

	.topnav.responsive a:not(.icon) {
		float: none;
		display: block;
		text-align: center;
		background-color: transparent;
	}
	.topnav.responsive a:hover {
		background-color: rgba(255,255,255,0.4);
	}
}
/* ========= END:  MENU/NAV ========= */


/* container CSS */
.container {
	margin-left: auto;
	margin-right: auto;
	width:  80%;
	max-width: 1080px;
}
.site-logo-container { line-height: 0; }
.container:not(.site-header) { padding-top: 30px; }
body > .container { max-width: 600px; }

/* common elements */
.button,
.button:hover {
	display: inline-block;
	background: #32228b;
	color: white;
	padding: 10px 18px;
	border-radius: 4px;
	border: 2px solid #32228b;
	cursor: pointer;
}
.secondary.button {
	background: rgba(255,255,255,0.3);
	color: #32228b;

	backdrop-filter: blur(10px);
}
.waves {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 18vh;

	min-height:100px;
	/* max-height:150px; */
}

/* Animation */

.parallax > use {
	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}
.parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}

@keyframes move-forever {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% {
		transform: translate3d(85px,0,0);
	}
}

@keyframes rotate-gently {
	0% {
		transform: rotateZ(-6deg);
	}
	100% {
		transform: rotateZ(6deg);
	}
}