*:before,
*:after {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
body {
 background-image: url('bg.jpg');
 background-size: auto;
}


.background {
 width: 430px;
 height: 520px;
 position: absolute;
 transform: translate(-50%, -50%);
 left: 50%;
 top: 50%;

}

.background .shape {
 height: 200px;
 width: 200px;
 position: absolute;
 border-radius: 50%;
}

.shape:first-child {
 background: linear-gradient(#1845ad,
   #23a2f6);
 left: -80px;
 top: -80px;
}

.shape:last-child {
 background: linear-gradient(to right,
   #ff512f,
   #f09819);
 right: -30px;
 bottom: -80px;
}

form {
 height: 520px;
 width: 400px;
 background-color: rgba(255, 255, 255, 0.13);
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 border-radius: 10px;
 backdrop-filter: blur(10px);
 border: 2px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
 padding: 50px 35px;
}
@media(max-width:1000px){
  form{
zoom:175%
  }
}

form * {
 font-family: 'Poppins', sans-serif;
 color: #ffffff;
 letter-spacing: 0.5px;
 outline: none;
 border: none;
}

form h3 {
 font-size: 32px;
 font-weight: 500;
 line-height: 42px;
 text-align: center;
}

label {
 display: block;
 margin-top: 30px;
 font-size: 16px;
 font-weight: 500;
}

input {
 display: block;
 height: 50px;
 width: 100%;
 background-color: rgba(255, 255, 255, 0.07);
 border-radius: 3px;
 padding: 0 10px;
 margin-top: 8px;
 font-size: 14px;
 font-weight: 300;
}

::placeholder {
 color: #e5e5e5;
}

button {
 margin-top: 30px;
 width: 100%;
 background-color: #ffffff;
 color: #080710;
 padding: 15px 10px;
 font-size: 18px;
 font-weight: 600;
 border-radius: 5px;
 cursor: pointer;
}

.social {
 margin-top: 30px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.social div {
 background: red;
 width: 150px;
 border-radius: 3px;
 padding: 5px 10px 10px 5px;
 background-color: rgba(255, 255, 255, 0.27);
 color: #eaf0fb;
 text-align: center;
 justify-content: center;
 align-items: center;
}

.social div:hover {
 background-color: rgba(255, 255, 255, 0.47);
 cursor: pointer;
}
.social div:active{
  transform: scale(0.95);
  transition: 0.5s;
}

.social .fb {
 margin-left: 25px;
}

.form{
 text-align: center;
}

button:active{
  transform: scale(0.95);
}