:root {
  --bg-color-main: #0a0a0a;
  --primary-background-color: #0a0a0a;
  --primary-input-color: #1a1a1a;

  --text-color-main: #f9f9f9;
  --primary-text-color-light: #f9f9f9;
  --primary-text-color-dark: #2d2d2d;

  --sucess-color-100: #00FF85;

  --warning-color-100: #FFFC00;

  --error-color-100: #FF0099;

  --neutral-color-100: #1E90FF;

  --primary-button-color: #efff3d;

  --border-radius: 10px;
  --border-radius-pill: 50px;
}

/*---------------------------------------------------------------------------
  FOUNDATION FIXES
-----------------------------------------------------------------------------*/
.grid-container {
	padding:0 1.5rem;
}

/*---------------------------------------------------------------------------
  GENERAL HTML
-----------------------------------------------------------------------------*/
body {
	background: var(--primary-background-color);
	color: var(--text-color-main);
	overflow-x: hidden;
}

/*---------------------------------------------------------------------------
  FORMS
-----------------------------------------------------------------------------*/
form {
	input:-webkit-autofill,
	input:-webkit-autofill:hover, 
	input:-webkit-autofill:focus, 
	input:-webkit-autofill:active{
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: var(--primary-text-color-light);
	    transition: background-color 5000s ease-in-out 0s;
	    box-shadow: inset 0 0 0 0 #23232329;
	}

	[type=color], 
	[type=date], 
	[type=datetime-local], 
	[type=datetime], 
	[type=email], 
	[type=month], 
	[type=number], 
	[type=password], 
	[type=search], 
	[type=tel], 
	[type=text], 
	[type=time], 
	[type=url], 
	[type=week], 
	textarea {
		border-radius: var(--border-radius-pill);
		background: var(--primary-input-color) !important;
		background-color: var(--primary-input-color) !important;
		border:1px solid var(--primary-input-color);
		box-shadow: none;
		color:var(--primary-text-color-light);
		padding:1.2rem 1rem .4rem 1rem;
		font-size: 1rem;
		height: auto;
		line-height: auto;
	}

	input:focus,
	[type=color]:focus, 
	[type=date]:focus, 
	[type=datetime-local]:focus, 
	[type=datetime]:focus, 
	[type=email]:focus, 
	[type=month]:focus, 
	[type=number]:focus, 
	[type=password]:focus, 
	[type=search]:focus, 
	[type=tel]:focus, 
	[type=text]:focus, 
	[type=time]:focus, 
	[type=url]:focus, 
	[type=week]:focus, 
	textarea:focus {
		border: 1px solid var(--primary-text-color-light);
		box-shadow:none !important;
	}

	[type=submit] {
		margin-top:2rem;
	}

	.form-group {
		position: relative;

		label {
			position:absolute;
			top:12px;
			left:16px;
			font-size: 1rem;
			transition:all 100ms ease;
			pointer-events:none;
			color: var(--text-color-main);
		}

		input:focus {
			font-size: 1rem;
		}

		input:focus~label,
		input:not(:placeholder-shown)~label {
		    top:2px;
		    z-index:1;
		    font-size:.8rem;
		    font-weight: 200;
		    opacity: .5;
		 }

		input::-webkit-input-placeholder {
			color:transparent;
		}

		input::-moz-placeholder {
			color:transparent;
		}
	}
}

/*---------------------------------------------------------------------------
  BUTTONS
-----------------------------------------------------------------------------*/
button,
[type=button], 
[type=submit],
.button,
.btn {
	width:100%;
	padding:.8rem 1rem;
	border-radius: var(--border-radius-pill);
	background-color: var(--primary-button-color);
	color: var(--primary-text-color-dark);
	font-size: 1.1rem;
	font-weight: 600;
}

/*---------------------------------------------------------------------------
  HEADER
-----------------------------------------------------------------------------*/
header {
	position: absolute;
	width:100vw;
	height: 100px;
	/*background: var(--neutral-color-100);*/
	display: none;
	align-items: center;

	.grid-container {
		width:100vw;
		max-width:100vw;
		padding:0 2.5rem;

		.cell {
			display:flex;
			justify-content: flex-start;
			align-items: center;

			.logo {
				
			}

			.burger-icon {
				color: red;
			}

			nav {
				display:none;
				background: red;
			}

			.button {
				margin:0;
			}
		}

		.flex-end {
			justify-content: flex-end;
		}
	}
}

/*---------------------------------------------------------------------------
  MAIN 
-----------------------------------------------------------------------------*/
main {
	.hero {
		display:flex;
		justify-content: center;
		align-items: center;
		width:100vw;
		height:100vh;

		.cell {
			.claim {
				width:100%;
				text-align: center;

				.subline {
					font-size: 1.25rem;
				}
			}

			.cta {
				width:100%;
				margin-top:48px;
				text-align: center;
			}
		}
	}

	.login-register-header {
		margin-top: 2rem;
		text-align: center;

		p {
			opacity: .5;
		}
	}

	.login-register-switch-wrapper {
		background: var(--primary-input-color);
		margin: 4rem 0;
		padding:.5rem;
		border-radius: var(--border-radius-pill);

		.cell {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		a {
			color: var(--primary-text-color-light);
		}

		.button {
			margin: 0;
			color: var(--primary-text-color-dark);
		}
	}
}

/*---------------------------------------------------------------------------
  MAIN 
-----------------------------------------------------------------------------*/
footer {
	margin-top:2rem;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	header {
		.large-auto {
			display:flex;
			justify-content: center;

			nav {
				display: flex;
				align-items: center;
			}
		}
	}
}