@import "style.css";

#banner
{
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	width: 100%;
	color: black;
	font-family: Fakt,AvenirNext,Segoe UI,sans-serif;
	z-index: 2;
	box-shadow: 0 1px 6px black;
	min-width: 360px;
}

#bannerBackground
{
	background-color: white;
	opacity: 0.6;
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	width: 100%;
	z-index: 1;
}

#logo
{
	position: absolute;
	top: 50%;
  	transform: translateY(-50%);
  	padding-left: 5%;
  	font-size: 36px;
  	height: 44px;
}

.link
{
	position: absolute;
	padding-right: 0;
	top: 50%;
  	transform: translateY(-50%);
	font-size: 16px;
	margin: 0px;
	color: gray;
	cursor: pointer;
}

.link:hover
{
	color: black;
}

.selectedLink
{
	position: absolute;
	padding-right: 0;
	top: 50%;
  	transform: translateY(calc(2px - 50%));
	font-size: 16px;
	margin: 0px;
	color: black;
	height: 22px;
}

#underline
{
	position: absolute;
	bottom: 0;
	background-color: black;
	height: 3px;
	width: 100%;
	border-radius: 2px;
}

#homeTab
{
	right: 32%;
}

#searchTab
{
	right: 19%;
}

#accountTab
{
	right: 5%;
}

#formWrapper
{
	margin-top: 60px;
	font-family: times, arial;
	color: black;
	position: fixed;
	border: 3px solid black;
	/*border-radius: 20px;*/
	background: white;
	overflow: auto;
	top: 40%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	max-height: calc(70vh - 60px);
	width: 40%;
	padding: 20px 40px;
}

.textInput
{
	width: calc(100% - 6px);
	background-color: white;
	color: black;
	font-size: 16px;
	padding: 10px 3px;
	border: none;
	border-bottom: 3px solid gray;
	/*border-radius: 19px;*/
}

.textInput:focus
{
	outline: none;
	/*box-shadow: 0 1px 6px gray;*/
	border-bottom: 3px solid var(--theme-color);
}

button
{
	width: 100%;
	background-color: white;
	color: black;
	font-size: 16px;
	padding: 10px 10px;
	border: none;
	/*border-radius: 50px;*/
	cursor: pointer;
	border: 1px solid gray;
}

button:focus
{
	background-color: var(--theme-color);
	color: white;
	outline: none;
	box-shadow: 0 1px 6px black;
	border: 1px solid var(--theme-color);
}

button:hover
{
	background-color: var(--theme-color);
	color: white;
	box-shadow: 0 1px 6px gray;
	border: 1px solid var(--theme-color);
}

h1, h2
{
	font-family: Fakt,AvenirNext,Segoe UI,sans-serif;
	font-style: bold;
	letter-spacing: 2px;
	margin-top: 0;
}

#switch
{
	cursor: pointer;
}

#backgroundImg
{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	object-fit: cover;
	filter: grayscale(15%);
}

.error
{
	color: red;
}