* {
       box-sizing: border-box;
       padding: 0;
       margin: 0;
   }

   body {
       margin: 0;
       padding: 0;
       height: 100vh;
       background: rgb(15, 132, 179);
       font-family: Arial, sans-serif;
       box-sizing: border-box;
   }

   .container {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: skyblue;
       border-radius: 10px;
       overflow: hidden;
       width: 900px;
       height: 500px;
       display: inline-block;
       background: right #6c63ff, 0 0 30px #6c63ff;

   }

   .right-box {
       display: inline-block;
       width: 54%;
       height: 100%;
       background: white;
       text-align: center;
       padding: 50px 20px;
       box-sizing: border-box;
       vertical-align: top;


   }

   .btn {
       background: #1320da;
       border: none;
       color: white;
       padding: 10px 24px;
       border-radius: 20px;
       cursor: pointer;
       margin-top: 5px;
   }

   .btn a {
       text-decoration: none;
       color: white;
   }

   .btn:hover {
       background: #6c63ff;
       box-shadow: 0 0 15px #6c63ff, 0 0 30px #6c63ff;
   }

   input {
       width: 80%;
       padding: 12px;
       margin: 10px 0;
       border: 1px solid #878484;
       border-radius: 5px;
   }

   input:hover {
       background-color: #c4c2c2;
   }

   .social-icons a {
       display: inline-block;
       border: 1px solid rgb(67, 23, 229);
       border-radius: 50%;
       width: 40px;
       height: 40px;
       line-height: 40px;
       margin: 5px;
       cursor: pointer;

   }

   i {
       font-size: 24px;
       color: #4e0dd2;
       margin: 10px;
       padding: 12px;
       border: 1px solid #ccc;
       border-radius: 50%;
       cursor: pointer;
       transition: 0.3s;
   }

   i:hover {
       background: #4e54c8;
       color: #fff;
       border-color: #4e54c8;
   }



   .left-box {
       display: inline-block;
       width: 45%;
       height: 100%;
       background: linear-gradient(to right, blue, #8f94fb);
       color: white;
       text-align: center;
       align-content: center;
       background: url(https://img.freepik.com/free-photo/computer-mouse-paper-bags-blue-background-top-view_169016-43523.jpg?semt=ais_hybrid&w=740&q=80) no-repeat center/cover;
   }



   .wrapped {
       width: 250px;
       margin: auto;
       line-height: 23px;
   }

   .right-box p {
       color: gray;

   }