@media screen {
     *,
     *:before,
     *:after {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
     }
     .background {
         width: 430px;
         height: 540px;
         position: absolute;
         transform: translate(-50%, -50%);
         left: 50%;
         top: 50%;
         background: linear-gradient(to bottom right, #55a8d1 0%, #ffffff 100%);
     }
     .background .shape {
         height: 200px;
         width: 200px;
         position: absolute;
         border-radius: 50%;
     }
     input {
         color: black;
         background: white;
     }
     input::placeholder {
         color: gray;
         /* Change this to black if you want the placeholder in black */
         opacity: 1;
         /* Ensure full opacity */
     }
     /* .shape:first-child {
         background: linear-gradient( #130547, #1268a1);
         left: -80px;
         top: -80px;
     }
     .shape:last-child {
         background: linear-gradient( to right, #751851, #b31227);
         right: -30px;
         bottom: -80px;
     } */
     form {
         height: 580px;
         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;
     }
     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: 50px;
         width: 100%;
         background: linear-gradient(to left, #006666 0%, #ccffff 100%);
         color: #080710;
         padding: 15px 0;
         font-size: 18px;
         font-weight: 600;
         border-radius: 5px;
         cursor: pointer;
     }
     button:hover {
         background: linear-gradient(to right, #006666 0%, #ccffff 100%);
         color: black;
     }
     .social {
         margin-top: 30px;
         display: flex;
     }
     .social div {
         background: red;
         width: 150px;
         border-radius: 3px;
         padding: 200px;
         background-color: rgba(255, 255, 255, 0.27);
         color: #eaf0fb;
         text-align: center;
     }
     .social div:hover {
         background-color: rgba(255, 255, 255, 0.47);
     }
     .social .fb {
         margin-left: 25px;
     }
     .social i {
         margin-right: 4px;
     }
     .register {
         text-align: center;
         margin-top: 30px;
         color: #fff;
     }
 }