@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');
body{
	margin: 0;
	padding: 0;
	/* background-color: #68026f; */
	/* display: flex; */
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	font-family: 'Source Sans Pro', sans-serif;
}

/* Home CSS starts here */
.shf-home {
    align-items: center;
    justify-content: center;
	align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    margin-top: 100px;
	image-rendering: auto;
	text-align: center;
}

.shf-home img{
    align-items: center;
    justify-content: center;
	image-rendering: auto;
	text-align: center;
}

.highlight{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.6rem;
}

.background{
	font-family: 'Source Sans Pro', sans-serif;
}
.footer-home{
	
	text-align: center;
	color: white;
}
.footer-home p{
	color: white;
}
/* Home CSS ends here */

/* Second page CSS starts here */
.images-container{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 140px;
}
.images-container img{
	margin-left: 3px;
	margin-right: 3px;
	
}

.ufirst{
	text-align: center;
	color: #ee06ff;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
}

.lsecond{
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bolder;
	color: #ee06ff;
}
h2.lsecond {
    font-size: 2rem;
    font-weight: 1400px;
}

.usecond{
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bolder;
	color: #68026f;
}

.lfirst{
	text-align: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	color: #68026f;
}
h5.lfirst {
    font-weight: bolder;
    font-size: 1.3rem;
}

/* Base Page starts here */

.main-div {
    border: 1px solid black;
    width: 220px;
	border-radius: 30px 0px 30px 0px;
	position: absolute;
	top: 50%;
  	left: 50%;
  	margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
  	transform: translate(-50%, -50%);

  /* Another way to centralize an item vertically and horizontally 
  display: flex;
  justify-content: center;
  align-items: center; */
}
	
.container_row {
    height: 50px;
    margin: 0;
    position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	margin-left: 8px;
	cursor: pointer;
}

.container_row.one {
    background-color: #ee06ff;
    text-align: center;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bolder;
    border-top-left-radius: 30px;
	margin-top: 5px;
}

.container_row.two {
    background-color: #68026f;
    text-align: center;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bolder;
	margin-top: 10px;
}

.container_row.three {
    background-color: #ee06ff;
    text-align: center;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bolder;
	margin-top: 10px;
}

.container_row.four {
    background-color: #68026f;
    text-align: center;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bolder;
	margin-top: 10px;
    border-bottom-right-radius: 30px;
	margin-bottom: 5px;
}

.signup-h2{
	color: #ee06ff;
	text-align: center;
}
.signup-footer{
	color: #fff;
	text-align: center;
	font-weight: bolder;
}
.card{
	font-family: 'Source Sans Pro', sans-serif;
}







/* Sign-Up Form */
form {
	width: 100%;
	display: block;
	align-items: center;
	justify-content: center;
  }
  
  .form-group {
	height: 65px;
  }
  
  label {
	position: relative;
	bottom: 3px;
  }
  
  input {
	width: 100%;
	height: 40px;
	padding: 5px;
	border: 1px solid black;
	border-radius: 5px;
	outline: none;
	box-sizing: border-box;
	transition: all 0.3s;
  }
  
  input:valid {
	border: 2px solid green;
  }
  
  input:invalid {
	border: 1px solid red;
  }
  
  button {
	cursor: pointer;
	color: white;
	background: black;
	border: none;
	border-radius: 10px;
	height: 50px;
	width: 50%;
	font-family: Sen, sans-serif;
	font-size: 20px;
	letter-spacing: 2px;
	margin-top: 5px;
  }
  
  button:hover {
	filter: brightness(200%);
	background: rgb(22, 22, 22);
  }
  
  button:focus {
	outline: none;
  }
  
  .message-container {
	border: 2px solid black;
	border-radius: 10px;
	width: 90%;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	color: black;
  }
  
@media only screen and (max-width: 600px) {
	.main-div {
		border: 1px solid black;
		width: 220px;
		border-radius: 30px 0px 30px 0px;
		position: absolute;
		top: 50%;
		  left: 58%;
		  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
		  transform: translate(-50%, -50%);
	
	  /* Another way to centralize an item vertically and horizontally 
	  display: flex;
	  justify-content: center;
	  align-items: center; */
	}
		
}