@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Italianno&display=swap');

:root

{
	--green: green;
	--black: #130f40;
	--light-color: #666;
	--box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
	--border: .2rem solid rgba(0,0,0.1);
	--outline: .1rem solid rgba(207,205,205,100);
}

*
{
	font-family: "Abel", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;
	transition: all .1s linear;
}

html
{
	font-size: .7rem;
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 7rem;
}

body
{
	background-image: url(../seller_background.jpg);
	background-repeat: repeat;
}

header { padding-left: 2rem; color: #fff;  position: fixed; top: 0; left: 0; width: 100%; background-color: #333; text-align: center; z-index: 1000;}
header nav { display: flex; justify-content: space-between; align-items: center; }
header nav .logo { font-size: 26px; font-weight: bold; }
header nav img {height: 3rem;}
header nav a { color: #fff; margin: 0 10px; text-decoration: none; }


footer { background: #333; color: white; text-align: center; padding: 20px; margin-top: 40px; }



.cta {

}
.cta button {
  background: #ff9800;
  border: none;
  padding: .7rem 40px;
  color: white;
  margin-right: 3rem;
  cursor: pointer;
  border-radius: 8rem;
  transition: transform 0.3s, background 0.3s;
  font-size: 1.5rem;
}
.cta button:hover {
  background: #e68900;
  transform: scale(1.05);
}


.forms
{
	margin: auto;
	margin-top: 5rem;
  	width: 71rem;
  	margin-bottom: 5rem;
}

.login
{
	background: #eee;
	border: solid 1px;
	border-color: #EEE487;
	border-radius: 1rem;
	width: 100%;
	margin: .2rem;
}

.login form
{
	display: inline-block;
	padding: 1rem;
	border-radius: 1rem;
}

.login h3
{
	text-align: center;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--black);
}

.login form span
{
	font-size: 1.3rem;
	padding-left: 3rem;
}
 .box
{
	border-radius: .5rem;
	margin: 2rem;
	padding: 1rem;
	width: 29rem;
	display: inline-table;
	background: #eee;
	font-size: 1.6rem;
	background-color: white;
	text-transform: none;
}
.login .signup .check_result
{
	text-align: left;
	background-color: #a8f57f;
	padding: .6rem;
	font-weight: bold;
	border-radius: .5rem;
}

.btn
{
	border: .2rem solid var(--black);
	margin-top: 1rem;
	display: inline-block;
	padding: .8rem 3rem;
	font-size: 1.7rem;
	border-radius: .5rem;
	color: var(--black);
	cursor: pointer;
	background: none;
}

.btn:hover
{
	background: var(--green);
	color: #fff;
}



















/* media queries */
@media (max-width: 3000px)
{

}

@media (max-width: 991px)
{
	html
	{
		font-size: 55%;
	}

}
@media (max-width: 768px)
{
	body
	{
		width: 100%;
	}
}

@media (max-width: 550px)
{
	html
	{
		font-size: 65%;
	}
	.forms
	{
		width: 100%;
	}
	form
	{
		width: 100%;
	}
}