style14.css

body {
	background: #12e2c9;
	background-image: linear-gradient(
		135deg,
		rgba(50, 238, 213, 0.705),
		rgb(55, 236, 236),
		rgba(241, 132, 132, 0.808)
	);
	font-family: "Trebuchet MS";
	/* height: 100vh; */
}

.main {
	width: 1000px;
	height: 500px;
	margin: 0 auto;
	margin-top: 100px;
	box-shadow: 0 5px 202px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	/* border:1px solid red;   */
}

.main .left {
	width: 50%;
	height: 100%;
	float: left;
	text-align: center;
	background: #e53939;
	/* border:1px solid red;  */
	border-radius: 10px;
}

.main .left h1 {
	margin-top: 100px;
}

.left form input {
	text-align: center;
	width: 70%;
	height: 35px;
	margin-bottom: 10px;
	border: none;
	background-color: #f8f8f8;
	border-radius: 25px;
}
.left form input:focus {
	outline: none;
}

.left form input[type="submit"] {
	background: #ffbf37;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
}
.left form input[type="submit"]:hover {
	background: #000;
}

.right {
	background: #ffbf37;
	/* margin-left:10px; */
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.social {
	/* background: rgb(144, 224, 137); */
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.description{
  padding-bottom: 5px;
}
button {
	border-radius: 50%;
	outline: none;
	width: 40px;
	height: 40px;
	cursor: pointer;
  border: none;
  transition:all 0.3s;
}
button > i {
	padding: 3px;
}
.twitter {
	background: rgb(23, 115, 236);
}
.twitter:hover {
	background: blue;
	box-shadow: 5px 3px 1px rgba(83, 78, 78, 0.356);
	transform: translateY(2px);
}
.facebook {
	background: aqua;
}
.facebook:hover {
	background: #0ac7f7;
	box-shadow: 5px 3px 1px rgba(83, 78, 78, 0.356);
	transform: translateY(2px);
}
.google {
	background: #f55d5d;
}
.google:hover {
	background: #e53939;

	box-shadow: 5px 3px 1px rgba(83, 78, 78, 0.356);
	transform: translateY(2px);
}