body {
	background:#40576d;
}
:root {
	--font:#ffffff;
	--link:#86feff;
	--linkhover:#ffffff;
}
@font-face {
	font-family:"Galagar";
	src:url("/fonts/Galagar.woff2") format("woff2"),url("/fonts/Galagar.woff") format("woff");
	font-weight:normal;
	font-style:normal;
}
h1,h2,h3 {
	font-family:"Galagar";
	color:#86feff;
}
#container {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:flex;
	overflow:hidden;
}
#left {
	height:100vh;
	width:40%;
	overflow:hidden;
	position:relative;
	z-index:-10;
	background:linear-gradient(
  0deg,rgba(64,87,110,1) 0%,rgba(37,53,69,1) 100%
 );
}

#background {
	position:absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 100%;
	overflow:hidden;
	z-index: -10
}

#background svg {
  position: absolute;
  bottom: 0;
	left:-50px;
}

#deco {
	position:absolute;
	bottom:-40px;
	left:0;
	z-index: -9
}
#deco img {
  width: 100%;
  height: auto;
  max-height: 600px;
}
#cloud {
	background:#1e2529;
	top:0;
	width:120%;
	height:200px;
}
#puffs,#puffs::before,#puffs::after {
	background:#1e2529;
	height:240px;
	border-radius:50%;
	z-index:-5 !important;
}
#puffs {
	position:relative;
	margin:auto;
	top:75px;
	width:50%;
}
#puffs::before {
	content:" ";
	display:inline-block;
	margin-left:-300px;
	margin-top:-80px;
	width:600px;
}
#puffs::after {
	content:" ";
	display:inline-block;
	position:relative;
	margin-left:280px;
	margin-top:-200px;
	width:600px;
}
#rain {
	height:100%;
	width:100%;
	z-index:-8;
	overflow:hidden;
}
#title {
	position:absolute;
	top:0;
	left:0;
	width:90%;
	text-align:center;
}
#title h1 {
	font-size:5.1em;
	line-height:90%;
	text-shadow:0 0 8px #86feff;
}
hr {
	width:50px;
	border-color:transparent;
	border-right-color:rgba(255,255,255,0.7);
	border-right-width:50px;
	position:absolute;
	bottom:100%;
	transform-origin:100% 50%;
	animation-name:rain;
	animation-duration:2s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	z-index:-8 !important;
}
@keyframes rain {
	from {
	transform:rotate(105deg) translateX(0);
}
to {
	transform:rotate(105deg) translateX(calc(100vh + 20px));
}
}#main {
	height:100%;
	width:40%;
	border:none;
	background:#427f9b;
	padding-left:40px;
	margin-left:-40px;
	mask:conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg)
  50%/100% 40px;
	overflow:hidden;
}
#frame {
	border:none;
	width:97.5%;
	height:100%;
	margin-left:-20px;
}
#right {
	background:#2c5567;
	height:100%;
	width:20%;
	padding-left:40px;
	margin-left:-40px;
	mask:conic-gradient(from 45deg at left,#0000,#000 1deg 89deg,#0000 90deg)
  50%/100% 40px;
	overflow:hidden;
}
ul {
	list-style:none;
	font-family:"Galagar";
	font-size:1.9em;
	color:#5db1b2;
	list-style-position:inside;
}
ul a {
	color:#86feff;
	text-decoration:none;
}
ul ul {
	font-size:0.8em;
}
#right a:hover,#right a:active {
	color:var(--linkhover);
	text-decoration:none;
	animation:navpulse 2s ease-in-out infinite both;
	font-variant:normal;
}
@keyframes navpulse {
	0% {
	transform:translate(0px,0px);
	letter-spacing:1px;
	font-size:1.05em;
	line-height:0.9em;
}
50% {
	transform:translate(0px,1px);
	letter-spacing:0px;
	font-size:1em;
}
100% {
	transform:translate(0px,0px);
	letter-spacing:1px;
	font-size:1.05em;
	line-height:0.9em;
}
}