/* CSS Styling for both login and signup page since the interface is similar */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	color: #000000;
	margin: 1em;
	font-family: "Roboto", sans-serif;
	background-color: white;
}
.home {
	margin-bottom: 1em;
}

.login-hero-img,
.signup-hero-img {
	display: none;
}

main {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	padding: 1em;
}

header h1,
.signup-h1 {
	font-family: "Open Sans", sans-serif;
	font-weight: 700;
}
.signup-h1 {
	font-size: 2em;
	margin-bottom: 0.2em;
}

.login-with-socials,
.signup-with-socials {
	margin: 1em 0;
	display: flex;
	flex-direction: column;
}

.login-with-socials button,
.signup-with-socials button,
input,
form button {
	padding: 0.7em;
	margin: 1em 0;
	border-radius: 10px;
	background-color: white;
	font-family: "Roboto", sans-serif;
}

.login-with-socials button,
.signup-with-socials button {
	display: flex;
	justify-content: center;
	align-items: center;
}

.social-icon img{
	width: 20px;
	margin-right: 30px;
}

.login-alternative-break,
.signup-alternative-break {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	font-weight: bold;
	color: #827e7e;
}

.line-break {
	width: 45%;
	border-top: 2px solid #827e7e;
}

#login-details-form,
#signup-details-form {
	margin-top: 2em;
	display: flex;
	flex-direction: column;
}

.forgot-password {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

a {
	color: #541059cc;
	text-decoration: none;
}

#submit {
	background-color: #541059;
	color: white;
border: none;

}

/* larger devices */
@media screen and (min-width: 760px) {
	.login-hero-img,
	.signup-hero-img {
		display: block;
		background-image: url("/images/login-hero.png");
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0.5em 0 0 0.5em;
		/* content: url("/images/login-hero.png"); */
		height: 74rem;
		width: 30rem;
		border-radius: 10px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	}
	.signup-hero-img {
		background-image: url("/images/signup-hero.png");
				height: 120rem;
	}
	body {
		display: flex;
		justify-content: center;
	}

	main {
		width: 40rem;
		box-shadow: 4px 0 4px 0 rgba(0, 0, 0, 0.2);
		border-radius: 10px;
	}

	.home-icon {
		display: none;
	}

	.fa-arrow-left {
		color: black;
		padding-right: 10px;
	}

	.login-hero-img a,
	.signup-hero-img a {
		color: black;
		background-color: white;
		border-radius: 5px;
		padding: 5px;
	}

	.login-with-socials button,
	.signup-with-socials button,
	input,
	form button,
	body {
		font-size: 1.5rem;
	}
	header h1 {
		font-size: 3.5rem;
	}
	.signup-h1 {
		font-size: 2rem;
	}
}


/*Signup extra additions*/

/* Labels */
#signup-details-form label {
  font-weight: 600;
  margin: 0.5em 0 0.2em 0;
  font-family: "Open Sans", sans-serif;
}

/* Inputs & Selects */
#signup-details-form input,
#signup-details-form select {
  border: 1px solid #ccc;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Input hover & focus */
#signup-details-form input:focus,
#signup-details-form select:focus {
  outline: none;
  border: 1px solid #541059;
  box-shadow: 0 0 5px rgba(84, 16, 89, 0.4);
}

/* Dropdown (role selector) */
#role {
  appearance: none; /* remove default arrow */
  cursor: pointer;
		padding: 1em;
}
#role option{
	background-color: #541059;
	color: white;
}
/* Checkbox */
#signup-details-form label[for="T&C"] {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: normal;
  margin-top: 1em;
}

#signup-details-form input[type="checkbox"] {
  margin-right: 0.5em;
  accent-color: #541059; /* modern browsers */
  cursor: pointer;
}

/* Submit button hover */
#signup-details-form #submit:hover {
  background-color: #6c1b76;
  transition: background-color 0.3s ease;
}