:root {
	--nav-bar-background: #3b5998;
	--primary-button-background: #4267b2;
	--connect-text-color: #0e385f;
}

body {
	font-family: 'Lucida Grande', tahoma, verdana, arial, sans-serif;
	max-height: 100vh;
	overflow: hidden;
}

.signup-button {
	background: linear-gradient(#67ae55, #578843);
	background-color: #69a74e;
	box-shadow: inset 0 1px 1px #a4e388;
	border-color: #3b6e22 #3b6e22 #2c5115;
	color: white;
}

.signup-button:hover {
	background: -webkit-linear-gradient(#79bc64, #578843);
}

.login-border {
	border: 1px solid rgb(49, 45, 45, 0.5);
}

.nav-bar-background {
	background-color: var(--nav-bar-background);
}

.nav-button-background {
	background-color: var(--primary-button-background);
}

.nav-button-background:hover {
	background-color: var(--nav-bar-background);
}

.nav-height {
	height: 54px;
}

table {
	text-align: left;
	font-size: 0.2rem;
}

.left-text {
	font-size: 0.4rem;
}

.main-bg-gradient {
	background-image: linear-gradient(to bottom, rgba(253, 253, 253, 0.99), rgba(4, 51, 145, 0.15));
}

main {
	height: auto;
}

footer {
	font-size: 0.1rem;
	background-color: white;
}

span {
	color: rgba(13, 13, 175, 0.7);
	cursor: pointer;
}

.languages > * {
	display: inline-block;
	margin-right: 0.3rem;
}

.fb-features > * {
	margin-right: 0.1rem;
}

.additional-features > * {
	margin-right: 0.1rem;
}

select {
	background-color: white;
}

form,
select {
	font-size: 0.3rem;
}

.radios {
	font-size: 0.45rem;
}

.help {
	font-size: 0.45rem;
	background-color: rgba(128, 128, 128, 1);
	cursor: pointer;
}

.agreement {
	font-size: 0.3rem;
}

.createPage {
	font-size: 0.3rem;
}

.max-w-1024 {
	max-width: 1024px;
}

figure img {
	margin-top: 2rem;
	padding-left: 1rem;
}

@media only screen and (min-device-width: 480px) {
	table .email,
	.password {
		width: fit-content;
		font-size: 0.4rem;
	}

	.left-text {
		font-size: 0.6rem;
	}

	footer span {
		font-size: 0.6rem;
	}
}

@media only screen and (min-device-width: 640px) {
	main {
		height: 70vh;
	}

	.languages > * {
		margin-right: 1rem;
	}

	.fb-features > * {
		margin-right: 1rem;
	}

	.additional-features > * {
		margin-right: 1rem;
	}
}

@media only screen and (min-device-width: 768px) {
	footer span {
		font-size: 0.7rem;
	}
}

@media only screen and (min-device-width: 1024px) {
	footer span {
		font-size: 0.7rem;
	}

	footer {
		margin-top: 8%;
	}

	figure img {
		margin-top: 2rem;
		transform: scale(1.15);
	}
}