@keyframes formSlideIn {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes formSlideIn {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes formSlideIn {
	0% {
		opacity:0;
		transform:translateY(30px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes fadeIn {
	from {opacity:0}
	to {opacity:1}
}
html, body {height:100%}
html {scrollbar-width:none}
* {margin:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; scroll-behavior:smooth}
body {background:#0d0d0d; color:#f1f1f1; line-height:1.8; overflow-x:hidden;}
body::-webkit-scrollbar {width:0; height:0;}
header {display:flex; justify-content:space-between; align-items:center; padding:20px 10%; background:rgba(0, 0, 0, 0.8); backdrop-filter:blur(5px); border-bottom:1px solid rgba(255, 255, 255, 0.1); position:sticky; top:0; z-index:1000;}
.logo {text-decoration:none; font-size:2rem; font-weight:bold; color:#0acf97; text-transform:uppercase; letter-spacing:3px;}
nav {display:flex; margin-left:auto}
nav a {text-decoration:none; margin:0 15px; color:#f1f1f1; font-size:1.2rem; font-weight:500; transition:color 0.3s ease;}
nav a:hover {color:#0acf97;}
.section {display:flex; align-items:center; justify-content:center; padding:0 10%; text-align:center; position:relative; min-height:calc(100% - 190px)}

.contact {display:flex; flex-direction:column;}
h1 {font-size:36px; color:#0acf97}
h2 {font-size:22px; color:#0acf97; margin-top:30px;}
.contact>p {color:#b3b3b3}

footer {padding:30px; background:#121212; color:#b0b0b0; text-align:center; border-top:2px solid #333;}

@media (min-width: 160px) and (max-width:820px) {
	header {padding:20px 0 20px 16px}
	.logo {display:none;}
	nav a {font-size:16px; margin:0 22px 0 0;}
	.section {padding:40px 18px; min-height:calc(100% - 157px)}
	.form-register {padding:40px 20px;}
	footer {font-size:14px; color:#fff}
}